盒模型
box: 盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
- 行盒,display等于inline的元素(不换行)(默认值)
- 块盒,display等于block的元素(独占一行)
浏览器默认样式设置的块盒: 容器元素 \ h \ p
常见的行盒: span \ a \ img \ video \ audio
盒子的组成部分
无论是行盒还是块盒,都有下面几个部分组成,从内到外分别是:
- 内容 content
width \ height,设置的是盒子内容的宽高.
内容部分通常叫做整个盒子的内容盒 content-box
- 填充 padding
盒子边框到盒子内容的距离
padding-left \ padding-right \ padding-top \ padding-bottom
填充区 + 内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式: border-style
边框宽度: border-width
边框颜色: border-color
边框 + 填充区 + 内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top \ margin-right \ margin-bottom \ margin-left
padding \ margin简写属性:
- 一个值:上=右=下=左
- 两个值:上=下,左=右
- 三个值:上,左=右,下
- 四个值:上,右,下,左
盒模型应用
改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高.
衡量设计稿尺寸时,往往使用的是边框盒,但设置width和height时,则设置的是内容盒.
- 精确计算
- CSS3: box-sizing(改变宽高的影响范围)
改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: #008c8c;
border: #555555 20px dashed;
background-clip: content-box;
}
</style>
</head>
<body>
<div></div>
</body>
background-clip为默认时:
background-clip为content-box时:
溢出处理
overflow,控制内容溢出边框盒后的处理方式
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
断词规则
world-break,会影响文字在什么位置被截断换行.
| 值 | 描述 |
|---|---|
| normal | 普通.CJK字符(文字位置截断),非CJK字符(单词位置截断). |
| break-all | 截断所有.所有字符都在文字处截断. |
| keep-all | 保持所有.所有文字都在单词处截断. |
空白处理
white-space: nowrap
将溢出的文本用省略号代替.
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
行盒的盒模型
常见的行盒:包含具体内容的元素
span \ strong \ em \ i \ img \ video \ audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小 \ 行高 \ 字体类型,间接调整.
- 内边距(填充区)
水平方向有效,垂直方向仅会影响背景,不会实际占据空间.
- 边框
水平方向有效,垂直方向仅会影响背景,不会实际占据空间.
- 外边距
水平方向有效,垂直方向仅会影响背景,不会实际占据空间.
行块盒
display: inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠,发生在行盒 (行块盒) 内部 或 行盒 (行块盒) 之间.
有多个空格 \ 换行 \ 制表符时,页面中只会显示一个空格.
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素.
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素.
可替换元素:img \ video \ audio
绝大部分可替换元素均为行盒.
可替换元素类似于行块盒,盒模型中所有尺寸都有效.
常规流
常规流布局
常规流 \ 文档流 \ 普通文档流 \ 常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块 (containing block) : 每个盒子都有它的包含块,包含块决定了盒子的排列区域.
绝大部分情况下:盒子的包含块,为其父元素的内容盒.
块盒
- 每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto,默认值为0
auto: 将剩余空间吸收掉
width吸收能力强于margin.
若宽度 \ 边框 \ 内边距 \ 外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收完.
在常规流中,块盒在其包含块中居中,可以定宽,然后左右margin设置为auto.
- 每个块盒垂直方向上的auto值
height:auto,适应内容的高度
margin:auto, 表示0
- 百分比取值
padding \ width \ margin可以取值为百分比
以上的所有百分比相对于包含块的宽度.
高度的百分比:
- . 包含块的高度是否取决于子元素的高度,设置百分比无效
- . 包含块的高度不取决于子元素的高度,百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并.
两个外边距取最大值.
浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠左靠上
- right:右浮动,元素靠上靠右
默认值为none
- 当一个元素浮动后,元素必定为块盒(更改display属性为block)
- 浮动元素的包含块和常规流一样,为父元素的内容盒
盒子尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,与常规流一致,适应内容高度
- margin为auto时,为0.
- 边框 \ 内边距 \ 百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流盒子
- 常规流块盒在排列时,无视浮动盒子
- 行盒在排列时,会避开浮动盒子.
- 外边距合并不会发生
如果文字没有在行盒中,浏览器会自动生成一个行盒来包裹文字,该行盒叫做匿名行盒.
文字环绕时,要让图片与文字距离变大,应设置图片的margin-right.
高度坍塌
高度坍塌的根源:常规流盒子的自动高度在计算时不会考虑浮动盒子.
清除浮动,设计css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
.clearfix::after{
content: "";
display: block;
clear: both;
}
定位
定位:手动控制元素在包含块中的精确位置
涉及的CSS属性:position
position属性
| 值 | 名称 |
|---|---|
| static | 静态定位(不定位)(默认值) |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
一个元素,只要position的取值不是static,认为该元素是一个定位元素.
定位元素会脱离常规流(相对定位除外)
一个脱离了常规流的元素:
- 常规流中的元素摆放时,会忽略脱离了常规流的元素.
- 常规流中元素计算自动高度时,会忽略脱离了常规流的元素.
相对定位
不会导致元素脱离常规流,只是让元素在原来位置上进行偏移.
可以通过四个CSS属性对设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响.
左右出现矛盾时以左为准,上下出现矛盾时以上为准.
绝对定位
- 宽高为auto,适应内容
- 包含块变化: 找祖先元素中第一个定位元素,该元素的填充盒为其包含块.若找不到,则他的包含块为整个网页(初始化包含块).
固定定位
其他情况和绝对定位完全一样.
包含块不同: 固定为视口 (浏览器的可视窗口)
定位下的居中
某个方向居中:
- 定宽(高)
- 将左右(上下)距离设置为0
- 将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户.
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流 \ 浮动元素,会被其覆盖.
补充
- 绝对定位 \ 固定定位元素一定是块盒.
- 绝对定位 \ 固定定位元素一定不是浮动.
- 没有外边距合并.
566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
