【Day05】CSS盒模型

学习内容

• 盒模型组成部分
• 外边距
• 宽高
• 内边距
• 盒模型大小计算
• 浮动

盒模型组成部分

css盒模型: 网页布局的基石
盒模型的组成部分: margin(外边距)+border(边框)+padding(内边距)+content (内容:width+height)

外边距

外边距: 元素与元素之间的距离
属性名: margin
margin+方位词 (top left right bottom): 某一方向上的外边距
属性值: 数值+单位 可以为负值

复合属性: margin: 值1
一个值: 表示上下左右
两个值: 上下 左右
三个值: 上 左右 下
四个值: 上 右 下 左

margin: 0 auto
实现有宽度的元素水平方向居中显示

特性: 外边距垂直方向会发生重叠，值更大的生效

宽高

width: 宽度数值+单位 px rem em vw vh %
height: 高度数值+单位 px rem em vw vh %

以百分比为单位,百分比基于父级元素的宽高进行改变

有些标签宽高不会生效
a span b strong i u del s 涉及到元素分类下周讲

内边距

内边距: padding 内容到边框之间的距离
padding-方位词: 实现某一方向上的内边距
复合属性: padding
一个值: 表示四个方向
两个值: 上下 左右
三个值: 上 左右 下
四个值: 上 右 下 左

padding不能为负值
padding会影响盒子占据页面的实际宽高

盒模型大小计算

盒模型计算方式: box-sizing (盒子占据页面的实际宽度)
content-box
标准盒模型计算方式
占据的页面实际宽度=左边框+左内边距+with+右内边距+右边框
占据的页面实际高度=上边框+上内边距+height+下内边距+下边框

border-box
怪异盒模型计算方式
占据的页面实际宽度=width
占据的页面实际高度=height
自动分配宽高给内边距和边框

浮动

浮动: 让元素水平方向显示 float
属性值: left 左浮动 right 右浮动 none

浮动的副作用: 半脱离文档流，造成父元素高度塌陷

最外面的大盒子，也叫版心，设置固定宽度，实现整体居中效果