CSS基础(4) - 盒子模型

1.网页布局的本质
网页布局过程

1. 先准备好相关的网页元素，网页元素基本都是盒子
2. 利用css设置好盒子样式，然后摆放到相应的位置
3. 往盒子里面装内容

2.盒子模型组成
盒子包括：边框(border) 外边距(margin) 内边距(padding) 和实际内容(content)

2.1 边框
1.样式 border-style: solid 实线 dashed 虚线 dotted点线
2.颜色 border-color

3.复合写法：
border: 1px solid red 没有顺序
边框分开写法：
border-top: 1px solid red

4.表格的细线边框
border-collapse:collapse 表示相邻边框合并在一起，避免下图边框重叠的情况，实现1+1=1

5.边框会影响盒子的实际大小
盒子大小=盒子width+border宽度

6.圆角边框
border-radius：圆的半径或百分比。
一个半径为n的圆和矩形相切

若画圆形，即设置正方形盒子的border-radius为盒子高度/宽度的一半 或 border-radius:50%
同理，圆角矩形，即长方形盒子的border-radius设置为高度的一半

可以设置不同的圆角
border-radius: 10px 20px 30px 40px; （顺时针）

分开写： border-top-radius， border-left-radius等

2.2 内边距 padding
内容和边框的距离

1.复合写法：
padding:5px; 上下左右内边距都是5px
padding:5px 10px; 上下内边距是5px，左右内边距是10px
padding:5px 10px 20px; 上内边距是5px，左右内边距是10px，下内边距是20px
padding:5px 10px 20px 30px; 上右下左。顺时针

2.padding 会影响盒子的实际大小
如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
比如， 目标宽度200， 若设置width=200，左右padding 20, 此时盒子宽度变成240，则需要修改width=160px

案例：由于内边距可以撑开盒子,我们可以做巧妙地运用。例如导航栏里面的字数不一致，我们就不用给每个盒子宽度了，直接给padding最合适。

如果盒子本身没有width/height,则此时padding不会撑开盒子大小。加上width属性，则使用padding宽度会被撑开; 加上height属性，使用padding高度会被撑开。

2.3 外边距 margin
盒子和盒子之间的距离
margin的复合写法和padding一致

2.4 外边距典型应用
外边距可以让块级 盒子水平居中，但是必须满足两个条件：

1. 盒子必须指定了宽度width
2. 盒子左右边距都设置为 auto
   常见的写法是
   margin: 0 auto;
   margin-left:auto;margin-right:auto;
   margin:auto;
   注意：以上方法是让块级元素水平居中，行内或行内块元素水平居中给其父元素 添加text-align:center即可

2.5 外边距合并
嵌套块元素垂直外边距的塌陷

解决方案：

1. 可以为父元素定义上边框（可以设置border:transparent来隐藏边框）
2. 可以为父元素定义上内边距padding
3. 可以为父元素添加 overflow:hidden

2.6 清除内外边距
很多网页元素都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局时，首先要清除下列网页元素的内外边距。
*{
padding:0; --清除内边距
margin:0; --清除外边距
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。

2.7 盒子阴影
box-shadow:
h-shadow(水平阴影，必需)
v-shadow(垂直阴影，必需)
blur(模糊距离,即影子的虚实程度，值越大越虚)
spread(阴影大小)
color(阴影颜色)
inset/outset(内阴影/外阴影。默认的外阴影，不需要写outset，写了阴影会不起效果)

盒子阴影不占用空间，不会影响其他盒子排列

2.8 文字阴影（了解）
text-shadow

---

tips
去掉li前面的项目符号（小圆点）
list-style:none;