CSS----盒子模型、背景样式

目录

盒子属性

边框属性

外边距属性

内边距属性

CSS盒子背景样式

盒子属性

文档中的每个元素都可以被看作是一个矩形盒子。具有如图的一些属性。

margin

外边距 代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

border

设定介于padding的外边缘与margin的内边缘之间，默认值为0

padding

内间距 在任何定义的边界内的元素内容周围生成空间

width & height

用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

width

内容宽度，块级元素默认 100%，单位可以：px em %

height

内容高度，默认 0 ，由子元素填充，单位可以： px em %

max-width

定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此元素可以比指定值窄，但不能比其宽。不允许指定负值。

min-height

属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。因此元素可以比指定值高， 但不能比其矮。不允许指定负值。

边框属性

边框属性的格式

边框宽度 ​ border-width: 5px;

边框样式 ​ border-style: solid; ​

边框样式取值： ​

none 定义无边框。 ​ hidden 与 "none" 相同。

不过应用于表时除外，对于表，hidden 用于解决边框冲突。 ​

dotted 定义点状边框。在大多数浏览器中呈现为实线。 ​

dashed 定义虚线。在大多数浏览器中呈现为实线。 ​

solid 定义实线。 ​

double 定义双线。双线的宽度等于 border-width 的值。

边框颜色 ​ border-color: red;

注意点: ​

1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下 左右 ​

2.这三个属性的取值省略时的规律 ​

2.1上 右 下 左 > 上 右 下 - 左边的取值和右边的一样 ​

2.2上 右 下 左 > 上 右 - 左边的取值和右边的一样 下边的取值和上边一样

2.3上 右 下 左 > 上 - 右下左边取值和上边一样

border-radius

为元素指定圆角边框的半径取值：绝对值 px、mm 、cm 相对值 em 、rem %

取值是从左上角->到右上角->右下角->左下角

外边距属性

格式

非连写 ​ margin-top: ; ​ margin-right: ;

浏览器是默认左对齐的。看起来margin-right没有生效，其实有效果的，只是在默认即标准流的情 况的下显示不出来效果，可以加右浮动脱离标准流。

margin-bottom: ; ​ margin-left: ;

连写 ​ margin: 上 右 下 左;

这三个属性的取值省略时的规律

1.上 右 下 左 > 上 右 下 - 左边的取值和右边的一样 ​

2.上 右 下 左 > 上 右 - 左边的取值和右边的一样 下边的取值和上边一样 ​

3.上 右 下 左 > 上 - 右下左边取值和上边一样

注意点: ​ 外边距的那一部分是没有背景颜色的

外边距合并现象

在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。

水平方向上的外边距会叠加

内边距属性

格式

非连写 ​ padding-top: ; padding-right: ; ​ padding-bottom: ; ​ padding-left: ;

注意点: ​

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 ​

2.给标签设置内边距之后, 内边距也会有背景颜色

连写 ​ padding: 上 右 下 左;

.这三个属性的取值省略时的规律

1.上 右 下 左 > 上 右 下 > 左边的取值和右边的一样 ​

2.上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样 ​

3.上 右 下 左 > 上 > 右下左边取值和上边一样

盒子背景样式

- background-color 背景颜色

专门用来设置标签的背景颜色的 ​ 取值: ​ 具体单词 ​ rgb ​ rgba ​ 十六进制

- background-image 背景图片

专门用于设置背景图片的 ​位置;

注意点: ​

1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址 ​

2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充

3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

- background-repeat 背景平铺属性

专门用于控制背景图片的平铺方式的

取值: ​

repeat 默认, 在水平和垂直都需要平铺

no-repeat 在水平和垂直都不需要平铺 ​

repeat-x 只在水平方向平铺 ​

repeat-y 只在垂直方向平铺

-background-position 背景定位属性

专门用于控制背景图片的位置 ​ 格式: ​ background-position: 水平方向 垂直方向;

取值 ​ 具体的方位名词 ​ 水平方向: left center right ​ 垂直方向: top center bottom

具体的像素 ​ 例如: background-position: 100px 200px; ​ 记住一定要写单位, 也就是一定要写px ​ 记住具体的像素是可以接收负数的

-如何修改背景关联方式？

在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

格式 ​ background-attachment：scroll;

取值： ​

scroll 默认值， 会随着滚动条的滚动而滚动 ​

fixed 不会随着滚动条的滚动而滚动

在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的

格式 ​ background-attachment：scroll;

取值： ​ scroll 默认值， 会随着滚动条的滚动而滚动 ​ fixed 不会随着滚动条的滚动而滚动