09 css盒子模型

页面布局要学习三大核心:
盒子模型, 浮动 和 定位

• 学好盒子模型能非常好的帮助我们布局页面

网页布局过程

• 先准备好相关网页元素, 网页元素基本都是盒子Box
• 利用CSS设置好盒子样式, 然后摆放到相应位置
• 往盒子里面装内容
  • 网页布局的核心: 就是利用CSS摆盒子

盒子模型

• border边框
  • 边框粗细border-width: 5px;
  • 边框样式border-style: solid/dashed/dotted;
  • 边框颜色border-color: red;

简写:

- `border: 1px solid pink;` **没有顺序**
- `border-top: 1px solid pink;`

注意:

- `border-collapse: collapse;`把相邻边框合并到一起
- **边框会影响盒子实际大小** (会增加大小, 注意测量时不量边框或者直接进行计算)

• content内容
  文字

• padding内边距

值的个数	表达意思
padding: 5px;	1个值, 代表上/下/左/右都有5像素内边距
padding: 5px 10px;	2个值, 上下/左右
padding: 5px 10px 20px;	3个值, 上/左右/下
padding: 5px 10px 20px 30px;	4个值, 上/右/下/左 顺时针!

注意:

• 内边距也会影响盒子实际大小
• 解决方案:
• 如果保证盒子跟效果图大小保持一致, 让width/height减去多出来的内边距大小即可

应用:

• 给盒子宽度不合理 -> 给盒子padding合理

特殊情况(重要)

• padding不会影响盒子大小的情况:
  如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小!!

• margin外边距
  控制盒子与盒子的距离

外边距典型应用

• 外外边距可以让块级盒子水平居中, 但是必须满足两个条件
  • 盒子必须指定宽度(width)
  • 盒子左右的外边距都设置为auto margin: 0 auto;
  • 行内元素或者行内块元素水平居中,只需要给其父元素添加text-align: center即可

外边距合并

使用margin定义块元素的垂直外边距时, 可能会出现外边距的合并

1. 相邻块元素垂直外边距的合并
   当上下相邻的两个块元素(兄弟关系)相遇时, 如果上面的元素有下外边距margin-bottom, 下面的元素有上外边距margin-top, 则他们之间的垂直间距不是margin-bottom与margin-top之和. 取两个值中的较大者,这种现象被称为相邻块元素垂直外边距的合并
   

• 解决方案:
  尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距的塌陷
   -对于两个嵌套关系(父子关系)的块元素, 父元素有上外边距, 同时子元素也有上外边距, 此时父元素会谈先较大的外边距值
   

• 解决方案:
  • 可以为父元素定义上边框border-top: 1px solid transparent;
  • 可以为父元素定义上内边距padding: 1px;
  • 可以为父元素添加overflow: hidden;

清除内外边距

网页元素很多都带有默认的内外边距, 而且不同浏览器默认值也不一致. 因此我们在布局前, 首先要清楚网页元素的内外边距

* {
 padding: 0;
 margin: 0;
 }

• 注意: 行内元素为了照顾兼容性, 尽量只设置左右内外边距,不要设置上下内外边距. 但是转换为块级和行内块元素就可以了
• 行内元素是可以使用padding和margin的!!! 只是只有左右有效!!! 上下是没有效的! 设置了也没有用, 尽量不要设置

总结:

1. 布局为啥用不同盒子, 我是想用div?
   标签都是有语义的, 合理的地方用合理的标签. 比如产品标题就用h, 大量文字段落就用p
2. 为什么用那么多类名?
   类名就是给每个盒子起了一个名字, 可以更好的找到这个盒子, 选取盒子更容易, 后期维护也方便
3. 到底用margin还是padding?
   大部分情况两个可以混用, 两者各有优缺点, 但是根据实际情况, 总是有更简单的方法实现
4. 自己做没有思路?
   布局有很多种实现方式, 可以先模仿, 然后再做出自己的风格
   最后一定要多运用辅助工具, 比如屏幕画笔, ps等等

---

圆角边框

• border-radius: 10px; 参数值可以是数值, 也可以是百分比
• 该属性是简写属性, 可以写4个值, 分别代表左上角, 右上角, 右下角, 左下角
• 可以2值 左上右下/右上左下; 可以3个值 左上/右上左下/右下
• 可以分开来写: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

• box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, .3); 阴影常用颜色rgba(0, 0, 0, .3)

值	描述
h-shadow	必须. 水平阴影的位置, 允许负值
v-shadow	必须. 垂直阴影的位置, 允许负值
blur	可选. 模糊距离
spread	可选. 阴影尺寸
color	可选. 阴影颜色
inset	可选, 将外部阴影(outset)改为内部阴影

注意

1. 默认的是外引用(outset), 但是不可以写这个单词, 否则导致阴影无效
2. 盒子阴影不占用空间, 不会影响其他盒子排列

文字阴影

text-shadow: h-shadow v-shadow blur color; 4个值

值	描述
h-shadow	必须. 水平阴影的位置, 允许负值
v-shadow	必须. 垂直阴影的位置, 允许负值
blur	可选. 模糊距离
color	可选. 阴影颜色