盒模型
一、盒模型概念
- 广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签
- 侠义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用)
- 盒模型组成:margin + border + padding + content
v_hint:content = width x height
二、盒模型成员介绍
1、content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高,默认宽为父级宽(width=auto)、高为0,高度可以由内容决定
- 内联标签不可以设置自身宽高,默认宽高均为0,宽高一定由内容决定
2、border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- border成员:border-left、border-right、border-top、border-bottom
- border-width成员:border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员:border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员:border-left-style、border-right-style、border-top-style、border-bottom-style
风格 | 解释 |
---|
solid | 实线 |
dashed | 虚线 |
dotted | 点状线 |
double | 双实线 |
groove | 槽状线 |
ridge | 脊线 |
inset | 内嵌效果线 |
outset | 外凸效果线 |
v_hint:border满足整体设置语法,eg:border: 1px solid red;
3、padding
- padding成员:padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
值得个数 | 方位 |
---|
1 | 上下左右 |
2 | 上下 | 左右 |
3 | 上 | 左右 | 下 |
4 | 上 | 右 | 下 | 左 |
4、margin
- margin成员:margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
赋值个数 | 方位 |
---|
1 | 上下左右 |
2 | 上下 | 左右 |
3 | 上 | 左右 | 下 |
4 | 上 | 右 | 下 | 左 |
三、边界圆角
border-radius
成员 | 解释 |
---|
border-top-left-radius | 左上 方位 |
border-top-right-radius | 右上 方位 |
border-bottom-left-radius | 左下 方位 |
border-bottom-right-radius | 右下 方位 |
赋值个数(值类型:长度 | 百分比) | 解释 |
---|
1 | 横纵 |
2 | 横 | 纵 |
赋值个数(值类型:长度 | 百分比) | 解释 |
---|
1 | 左上 右上 左下 右下 |
2 | 左上 右下 | 右上 左下 |
3 | 左上 | 右上 左下 | 右下 |
4 | 左上 | 右上 | 右下 | 左下 |
四、其他相关属性
- max|min-width|height
- overflow
值 | 描述 |
---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
值 | 描述 |
---|
inline | 内联 |
block | 块级 |
inline-block | 内联块 |
伪类选择器
1、a标签四大伪类
- :link:未访问状态
- :hover:悬浮状态
- :active:活跃状态
- :visited:已访问状态
2、内容伪类
:before, :after {
content: "ctn";
}
3、索引伪类
- :nth-child(n):位置优先,再匹配类型
- :nth-of-type(n):类型优先,再匹配位置
v_hint:值可以为位置数,也可以为2n、3n…,代表2的倍数,3的倍数,且位置数从1开始
4、取反伪类
- :not(selector):对selector进行取反
css高级选择器与盒模型
1.组合选择器
div, #div, .div {
color: red
}
.sup .sub {
后代
}
.sup > .sub {
子代
}
.up ~ .down {
兄弟
}
.up + .down {
相邻
}
section.ss#s {
标签类名id名综合修饰
}
2.复杂选择器的优先级
1.与修饰符位置无关
2.属性选择器与类选择器权重相同
3.id 无限大于 类[属性] 无效大于 标签
4.权重只与个数相关,个数(类型)均相同时,最后由位置决定
3.伪类选择器
链接标签四大伪类
:hover(悬浮) | :active(点击集合)
:link :visited
位置相关
:nth-child() | :last-child 先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
取反
选择器:not(修饰词) | div:not(:nth-child(2))
4.盒模型
margin + border + padding + content(width x height)
都具有自身区域
margin参与布局,不参与盒子显示,其他都参与盒子显示
border颜色自身定义,padding和content颜色有背景色填充
padding: 上 右 下 左 (无值边取对边)
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border: 10px solid black;
border-top: 10px solid black;
border-right: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如何要保证显示区域大小不变,增加了padding和border,可以相应减小content的区域
5.盒模型布局
完成自身布局: margin-left | margin-top
下移|右移: top取正值|left取正值
上移|左移: top取负值|left取负值
作为兄弟,上盒子的垂直布局会影响下盒子垂直方位, 上盒子的结束位置为下盒子的开始位置