CSS基础(4)-三大特性+PxCook的基本使用+盒子模型

盒子模型

1.1 盒子模型的介绍

1. 盒子的概念
1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
2. 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
3. 记忆：可以联想现实中的包装盒

1.2 小结

➢ 盒子模型一共有几个部分组成？分别是什么？
1. 内容区域：content
2. 边框区域：border
3. 内边距区域：padding
4. 外边距区域：margin

2.1 内容的宽度和高度

➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px

2.2 小结

➢ 设置盒子模型内容区域大小可以通过什么属性设置？
1. 宽度：width
2. 高度：height

3.1 边框（border）- 单个属性

➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：

3.2 边框（border）- 连写形式

➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab

3.3 边框（border）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值

3.4 盒子实际大小初级计算公式

➢ 需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）

布局顺序

1，从外到内，从上到下

2.盒子的样式

1.先调整宽高背景色

2.放盒子内容

3.调整盒子的位置

4.控制盒子的细节，文字的颜色，大小

4.1 内边距（padding）- 取值

➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding

padding属性可以当作复合属性，表示单独设置某个方向的内边距

最多可以设置4个值

多值写法，永远都是从上开始顺时针转一圈，如果数值不够就看对面

➢ 常见取值：

4.2 内边距（padding）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px

小结

➢ 给盒子设置四周 20px 的内边距可以通过什么属性设置？
• padding : 20px ;
➢ 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？
• padding : 20px 30px ;
➢ 给盒子设置左侧50px的内边距可以通过什么属性设置？
• padding-left : 50px

4.3 CSS3盒模型（自动内减）

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去

5.1 外边距（margin）- 取值

➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：

5.2 外边距（margin） - 单方向设置

➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px

5.3 margin单方向设置的应用

5.4 清除默认内外边距

➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法：

版心

网页的有效内容百分比居中

去掉列表的符号

ul{

      list-style:none;

}

5.6 外边距正常情况

➢ 场景：水平布局 的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和

5.7 外边距折叠现象 – ① 合并现象

➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可

5.8 外边距折叠现象 – ② 塌陷现象

➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动

5.9 行内元素的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时

➢ 结果：
1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！