盒子模型（box model）（组成部分、布局、样式、轮廓、阴影和圆角）

盒子模型（box model）

---

盒子组成部分

组成部分
内容区	content
内边距	padding
边框	border
外边距	margin

---

内容区（content）

• 元素中所有子元素和文本内容都在内容区中排列
  内容区的大小有 width 和 height 两个属性来设置
  width 默认值为 auto

---

边框（border）

• 边框属于盒子边缘，里面属于盒子内部，外面是盒子外部。边框的大小会影响整个盒子的大小
• 设置边框至少要三个样式
  • 边框的宽度 border-width // 默认值 3px
  • 边框的颜色 border-color // 如果省略不写则自动使用color的颜色值
  • 边框的样式 border-style // 默认值是none 表示没有边框

border-style
solid	实线
dotted	点状虚线
dashed	虚线
double	双线

border简写属性(常用)：通过该属性可以同时设置边框所有相关样式，并且没有顺序要求
border: 10px orange solid

---

内边距（padding）

• 内容区和边框之间的距离
• 内边距的设置会影响盒子的大小
• 背景颜色会延伸到内边距上

一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

---

外边距（margin）

• 外边距不会影响盒子可见框的大小，但是会影响盒子的位置，margin会影响到盒子实际占用空间
  外边距的重叠（折叠）
• 相邻的垂直方向外边距会发生重叠现象
• 兄弟元素
  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
  • 特殊情况（较少遇见）
    • 如果相邻的外边距一正一负，则取两者之和
    • 如果相邻的外边距都是负值，则取两者中绝对值较大的
  • 兄弟元素之间的外边距重叠，对于开发是有利的，我们不需要处理
• 父子元素
  • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
  • 父子外边距的折叠会影响到页面的布局，必须进行处理

---

元素的水平方向的布局

• 元素在其父元素中水平方向的位置由以下几个属性共同决定
  margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
• 一个元素在其父元素中，水平布局必须满足一下等式：
  margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）
  • 以上以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
  • 调整情况：如果这七个值没有为 auto 的情况，则浏览器会自动调整 margin-right 值以使等式满足
  • 这七个值中有三个值可设置为auto 分别是width margin-left margin-right，如果其中某个值为auto，则会制动调整为auto的那个值以使等式成立
    • 如果将一个宽度和一个外边距设置为 auto，则宽度会调整到最大，设置为auto的外边距会自动为0
    • 如果将三个值都设置为auto，则外边距都是0，宽度最大
    • 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值（利用这个特点使一个元素在其父元素中水平居中）
      width:xxxpx;
margin:0 auto;

---

元素垂直方向的布局

• 默认情况下父元素的高度被内容撑开
• 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
  使用 overflow 属性来设置父元素如何处理溢出的子元素

overflow: xxxx;	可选值
visible	默认值 子元素会从父元素中溢出，在父元素外部位置显示
hidden	溢出内容将会被裁减不会显示
scroll	生成两个滚动条，通过滚动条来查看完整的内容
auto	根据需要生成滚动条
overflow-x	处理水平溢出
overflow-y	处理垂直溢出

---

行内元素的盒模型

• 行内元素不支持设置宽度和高度
• 行内元素可以设置padding border margin，但是垂直方向都不会影响页面布局

display: xxx;	用来设置元素显示的类型
inline	将元素设置为行内元素
block	将元素设置为块元素
inline-block	将元素设置为行内块元素 （少用）
table	将元素设置为一个表格
none	元素不在页面中显示（隐藏元素、不占据位置）

visibility	用来设置元素的显示状态
visible	默认值，元素在页面中正常显示
hidden	元素在页面中隐藏，不显示，但是依旧占据页面的位置

---

默认样式

• 通常情况，浏览器都会为元素设置一些默认样式
• 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（pc端）
  去除项目符号 list-style:none;

重置样式表：专门用来对浏览器的样式进行重置的
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一

---

盒子的尺寸

• 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing: xxxx;	默认值，宽度高度用来设置内容区的大小
content-box	默认值，宽度和高度用来设置内容区的大小
border-box	宽度和高度用来设置整个盒子可见框的大小（width 和 height 指的是内容区和内边距和边框的总大小）

---

盒子轮廓、阴影和圆角

• 轮廓
  • outline 用来设置元素的轮廓线，用法与 border 一模一样
    ouline: 10px red solid
  • 轮廓与边框的不同点就是轮廓不会影响到可见框的大小
• 阴影
  • box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
    box-shadow: 20px 20px 50px rgba( 0, 0, 0, .3) （水平偏移量 垂直偏移量 模糊半径 阴影的颜色）
• 圆角
  • border-radius 用来设置圆角，设置圆角的半径大小

border-radius: xxx;
border-top-left-radius	左上
border-top-right-radius	右上
border-bottom-left-radius	左下
border-bottom-right-radius	右下
border-top-left-radius: 50px 100px	左上角x轴 y轴方向变化

• border-radius 可以分别指定四个角的圆角
  • 四个值： 左上 右上 右下 左下
  • 三个值： 左上 右上/左下 右下
  • 两个值： 左上/右下 右上/左下
• 将元素设置为圆形：border-radius: 50%;