目录
1.盒子模型定义
2.盒子的复合属性
3.外边距合并
(1)上下元素垂直外边距的合并
(2)嵌套元素垂直外边距的合并(塌陷)
4.实用tips
(1)字数不一样多的导航栏设计
(2)块级盒子水平居中对齐
(3)CSS第一句话:清除所有元素内外边距
(4)圆角边框
(5)盒子阴影
1.盒子模型定义
将网页布局看成一个矩形盒子,由元素内容、边框(border)、内边距(padding)、外边距(margin)组成。盒子实际的大小=内容的宽度和高度+内边距+边框。
注意:如果盒子没有宽度(继承父亲),则padding值不会撑开盒子。
考虑到布局稳定性,推荐使用顺序为width>padding>margin
2.盒子的复合属性
边框——border: border-width || border-style || border-color
内边距——padding:一个值(上下左右)
两个值(上下,左右)
三个值(上,左右,下)
顺时针
3.外边距合并
(1)上下元素垂直外边距的合并
解决办法:尽量只给一个盒子添加margin值
(2)嵌套元素垂直外边距的合并(塌陷)
塌陷原因:父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中较大者
解决方法:为父元素定义上边框;为父元素定义上内边距;为父元素添加overflow:hidden;此外,浮动、固定、绝对定位的盒子不会塌陷。
4.实用tips
(1)字数不一样多的导航栏设计
链接转换为行内块元素,用padding值撑开
.nav a {
display: inline-block;
height: 41px;
line-height: 41px;
padding: 0 20px;
text-decoration: none;
}
(2)块级盒子水平居中对齐
(1)盒子必须指定宽度;(2)左右外边距设置为auto;
margin: 0 auto;
(3)CSS第一句话:清除所有元素内外边距
* {
margin: 0;
padding: 0;
}
(4)圆角边框
width: 200px;
height: 200px;
border-radius: 100px; /*圆*/
border-radius: 50%; /*圆*/
width: 200px;
height: 20px;
border-radius: 10px; /*圆角边框,给高度的一半*/
(5)盒子阴影
box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸 阴影颜色 内/外阴影
注意:阴影尺寸为0时和盒子大小一致,外阴影默认不写
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3) inset;