10.前端笔记-CSS-盒子模型-border和padding
页面布局的三大核心：
- 盒子模型
- 浮动
- 定位
1、盒子模型
1.1 盒子模型组成
盒子模型本质还是一个盒子，包括边框border、外边距margin、内边距padding和实际内容content
1.1.1 边框border
组成
组成：颜色border-color、边框宽度border-width、样式（实线、虚线）border-style
| 属性 | 作用 |
|---|---|
| border-width | 边框粗细，单位px |
| border-style | 边框样式，none\solid\dashed\dotted |
| border-color | 边框颜色 |
边框的复合写法：
没有先后顺序
border:1px solid red;
Document
按照盒子四条边分别设置边框属性
top\left\right\bottom
border-top:1px solid red;//只设置上边框
练习：
给一个200*200的盒子，设置上边框为红色，其余边框为蓝色
Document
表格细线边框
border-collapse:collapse;//表示相邻边框合并在一起
练习：
Document
排名 关键词 趋势 今日搜索 1 西游记 up 456 2 乌合之众 up 333 3 三体 down 123
边框会影响盒子的实际大小
因此要保证盒子实际做出来的效果与效果图一致：
测量效果图边框时，不量边框。或者加上边框减去边框的距离
1.1.2 内边距padding
用来设置内边距，即边框与内容之间的距离
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距
练习：
Document
盒子模型的内容content
padding复合属性写法
顺序：上右下左
padding:5px;//上下左右
padding:5px 10px;//上下是5，左右是10px
padding:5px 10px 20px;//上-5，左右-10，下-20
padding:5px 10px 20px 30px;//上-5，右-10，下-20 左30
padding会影响盒子实际大小
如果盒子已经有了宽度和高度设置，指定padding内边距时，会撑大盒子
因此要保证盒子实际做出来的效果与效果图一致，需要让width、height减去多出来的内边距
Document
盒子模型的内容content
应用：
导航栏里字数不一样多，如果给每个盒子设置一样的宽度，就会导致相邻两个盒子中内容之间的距离可能有的大有的小，看起来不美观。可以采用padding
给盒子设置相同宽度：
练习：新浪导航
Document
padding使用的特殊场景
如果盒子本身没有指定width/height属性，padding可以改变元素的宽度和高度
块级元素：
1、
宽度：没有设置时，可以继承父类的宽度（不受padding影响）
高度：不能继承父类高度（由padding控制）
父类设置宽度300，高度200。
子类没有设置宽高，设置了padding,宽度是300，高度=padding*2
Document
2、
宽度：子类设置宽度时，取设置的宽度+padding2（受padding影响）
高度：子类设置高度，取设置的高度+padding2
父类设置宽度300，高度200。
子类没有设置宽高，设置了padding,宽度是300，高度=padding*2
Document
行内元素
有内容：
宽度：不受width属性的限制，宽度由行内元素内容和padding决定。宽度=行内元素宽度+padding*2
高度：不受height属性的限制，有默认高度，且可以由line-height和font-size改变高度
Document
有内容有内容
没有内容：
宽度：不受width属性的限制，没有内容时。宽度=padding2
高度：不受height属性的限制，有默认高度，没有设置line-height和font-size时，高度=padding2+默认高度
Document
下一篇：求公司四十周年庆相关诗歌10分