CSS知识点3

盒子模型

一些概述

• 网页设计的三大核心：盒子模型，浮动，定位
• 网页布局的过程
  1. 先准备好网页元素，基本都是盒子
  2. 利用CSS设置好盒子样式，摆放到相应位置
  3. 往盒子里面装内容

盒子模型的组成

• CSS盒子模型本质上是一个盒子，包括：边框，外边距，内边距，实际内容
  

边框（border）

属性	作用
border-width	设置粗细(px)
border-style	样式(solid实线边框,dashed虚线边框,dotted点线边框)
border-color	颜色
border	复合写法(无先后顺序可言)，可以跟top,bottom等分别设置上下左右边框

表格的细线边框

• border-collapse：属性控制表格边框的样式
• collapse属性表示相连的边框合并在一起

边框会影响盒子大小

内边距(padding)

• padding属性属于设置内边距，边框和内容的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距
padding	一个值：各个方向；两个值：上下，左右；三个值：上，左右，下；四个值：由上开始的顺时针

内边距会影响盒子大小

• 若如果没有高度宽度，则padding不会撑开盒子。
• 只要有高度宽度，则会撑开盒子
• 子类和父类一样宽，则没有必要写宽度

外边距(margin)

• 语法格式与padding格式完全相同

外边距的典型应用：块级盒子的水平居中

必须满足两大条件：

1. 盒子必须指定宽度(width);
2. 盒子的左右外边距设置为auto,常见写法
   • margin-left:auto;margin-right:auto;
   • margin:auto;
   • margin:0 auto;

如果想要行内元素和行内块元素居中对齐，则只需要父类添加text-align:center即可

外边距合并：嵌套元素的塌陷

• 使用padding定义块元素时，可能出现外边距的合并
• 对于两个嵌套关系，父子均有外边距时，此时父类元素会塌陷较大的外边距
• 解决方法
  1. 定义父类的上边框
  2. 定义父类的内边距
  3. 为父亲添加overflow:hidden。(推荐，不会增加盒子的大小)
• 其他方法如浮动，固定，绝对定位则不会出现此情况

！！！使用全局变量清楚内外边距！！！

圆角边框

• border-radius:length属性设置圆角边框，radius其实是半径值，边角会根据半径值相靠近。
• 如果想要圆形，则需要半径值设置为正方形边长的一半即可，或者设置50%即可
• 还可以跟多个值：两个值是主副对角线的关系，四个值是顺时针的关系
• 或者是border-top-left-radius:length设置左上角的值

盒子阴影

• border-shadow属性添加盒子阴影

属性	描述
h-shadow	必需，水平阴影的距离
v-shadow	必须，竖直阴影的距离
blur	可选，模糊度
spread	可选，阴影尺寸
color	可选，阴影的颜色，可以搭配透明度使用
inset	可选，可视之为inset(内阴影)，若为外阴影则不需要设置！

文字阴影

• text-shadow设置文字阴影。
• 对比盒子阴影属性，实际开发并不常用。