1. 盒子内容区(content)
CSS
属性名
|
功能
|
属性值
|
---|---|---|
width |
设置内容区域宽度
|
长度
|
max-width |
设置内容区域的最大宽度
|
长度
|
min-width |
设置内容区域的最小宽度
|
长度
|
height |
设置内容区域的高度
|
长度
|
max-height |
设置内容区域的最大高度
|
长度
|
min-height |
设置内容区域的最小高度
|
长度
|
注意:
max
-
width
、
min
-
width
一般不与
width
一起使用。
max
-
height
、
min
-
height
一般不与
height
一起使用。
2. 关于默认宽度
所谓的默认宽度,就是不设置 width 属性时,元素所呈现出来的宽度。
总宽度
=
父的
content
—
自身的左右
margin
。
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。
3. 盒子内边距(padding)
CSS
属性名
|
功能
|
属性值
|
---|---|---|
padding-top |
上内边距
|
长度
|
padding-right |
右内边距
|
长度
|
padding-bottom |
下内边距
|
长度
|
padding-left |
左内边距
|
长度
|
padding |
复合属性
|
长度,可以设置
1 ~ 4
个值
|
padding 复合属性的使用规则:
1.
padding: 10px
;
四个方向内边距都是
10px
。
2.
padding: 10px 20px
;
上
10px
,左右
20px
。(上下、左右)
3.
padding: 10px 20px 30px
;
上
10px
,左右
20px
,下
30px
。(上、左右、下)
4.
padding: 10px 20px 30px 40px
;
上
10px
,右
20px
,下
30px
,左
40px
。(上、右、下、左)
注意点:
1.
padding
的值不能为负数。
2.
行内元素
的 左右内边距是没问题的,上下内边距不能完美的设置。
3.
块级元素
、
行内块元素
,四个方向
内边距
都可以完美设置。
4. 盒子边框(border)
CSS
属性名
|
功能
|
属性值
|
---|---|---|
border
-
style
|
边框线风格
复合了四个方向的边框风格
|
none
: 默认值
solid
: 实线
dashed
: 虚线
dotted
: 点线
double
: 双实线
......
|
border
-
width
|
边框线宽度
复合了四个方向的边框宽度
|
长度,默认
3px
|
border
-
color
|
边框线颜色
复合了四个方向的边框颜色
|
颜色,默认黑色
|
border
|
复合属性
|
值没有顺序和数量要求。
|
border
-
left
border
-
left
-
style
border
-
left
-
width
border
-
left
-
color
border
-
right
border
-
right
-
style
border
-
right
-
width
border
-
right
-
color
border
-
top
border
-
top
-
style
border
-
top
-
width
border
-
top
-
color
border
-
bottom
border
-
bottom
-
style
border
-
bottom
-
width
border
-
bottom
-
color
|
分别设置各个方向的边框
|
同上
|
边框相关属性共
20
个。 (
border
-
style
、
border
-
width
、
border
-
color
其实也是复合属性。)
5. 盒子外边距_margin
CSS
属性名
|
功能
|
属性值
|
---|---|---|
margin
-
left
|
左
外边距
|
CSS
中的长度
值
|
margin
-
right
|
右
外边距
|
CSS
中的长度值
|
margin
-
top
|
上外边距
|
CSS
中的长度值
|
margin
-
bottom
|
下
外边距
|
CSS
中的长度值
|
margin
|
复合属性,可以写
1~4
个值,规律同
padding
(顺时针)
|
CSS
中的长度值
|
5.1 margin 注意事项
1.
子元素的
margin
,是参考父元素的
content
计算的。(因为是父亲的
content
中承装着子元素)
2.
上
margin
、左
margin
:影响自己的位置;下
margin
、右
margin
:影响后面兄弟元素的位置。
3.
块级元素、行内块元素,均可以完美地设置四个方向的
margin
;但行内元素,左右
margin
可以完美设置,上下
margin
设置无效。
4.
margin
的值也可以是
auto
,如果给一个
块级元素
设置左右
margin
都为
auto
,该块级元素会在父元素中水平居中。
5.
margin
的值可以是负值。
5.2 margin 塌陷问题
什么是
margin
塌陷?
第一个子元素的
上
margin
会作用在父元素上,最后一个子元素的
下
margin
会作用在父元素上。
如何解决
margin
塌陷?
方案一: 给父元素设置不为
0
的
padding
。
方案二: 给父元素设置宽度不为
0
的
border
。
方案三:给父元素设置
css
样式
overflow:hidden
5.3 margin 合并问题
什么是
margin
合并?
上面兄弟元素的
下外边距
和下面兄弟元素的
上外边距
会合并,取一个最大的值,而不是相加。
如何解决
margin
塌陷?
无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了。