CSS终结篇...
一 盒子模型
组成部分: margin + border + padding + content
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成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
| 值的个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
4、margin
margin外边距
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
| 赋值个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
ps***
1、盒模型布局基本介绍
- 布局方位：margin-left、margin-right、margin-top、margin-bottom
- 影响自身布局：margin-left、margin-top
- 影响兄弟布局：margin-right、margin-bottom
- 正向 / 反向：正值 / 负值
2、margin布局坑位
- 很多语义标签具有默认margin
- 父子标签margin-top重叠取大者
- 兄弟标签margin-bottom、margin-top重叠取大者
overflow
overflow
显示区域只能由父级大小决定
-
以滚动的方式允许子级所有内容显示
overflow: auto;或overflow: scroll; -
只运行子级在父级所在区域的部分显示,超出的部分影藏
overflow: hidden;
浮动大坑 float
块级:独占一行
浮动后:可以同行显示(只占自身显示区域)
1、解决的经典案例
<style type="text/css">
.box {
width: 300px;
border: 1px solid black;
}
.box img {
width: 150px;
float: left;
}
</style>
<div class="box">
<img src="bg.gif" alt="">
浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布 局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决 的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典 案例，浮动布局解决的经典案例，浮动布局解决的经典案例，浮动布局解决的经典案例。
</div>
2、基本语法
float: left | right
3、浮动布局问题
-
在不做清浮动情况下，父级不会获取子级的高度
-
坑
- 当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常
- 父级未设置固定高度,不再撑开父级高度
4、清浮动
- 目的：对父级所在容器中的Block-level Box布局不产生影响
- 原理：在浮动布局情况下，让父级获得合适的高度
① 浮动的父级设置高度
super {
height: npx;
}
② 浮动的父级设置overflow
super {
overflow: hidden;
}
③ 浮动的父级兄弟设置clear
brother {
clear: left | right | both;
}
④ 浮动的父级伪类清浮动
super:after {
content: "";
display: block;
clear: left | right | both;
}
总结
不完全脱离文档流
通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度
脱离文档流后的子级标签,不再撑开父级高度
不完全脱离文档流(浮动后的结果),不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度
清浮动本质:让父级获得合适的高度
定位大坑 position
1、目的(应用):让目标(要被布局的)标签在指定参考系下任意布局
2、定位的语法
position: static | relative | absolute | fixed
布局方位：left | right | top | bottom
1.通过position设置定位是否开启
static：静态，未定位（默认值）
relative: 相对定位, 未脱离文档流
absolute: 绝对定位, 完全脱离文档流
fixed: 固定定位, 完全脱离文档流
2.定位开启后,四个定位方位便会开启,且四个方位均参与布局
如果发生冲突,左右取左,上下取上
3、相对定位（relative）
可以看做元神出窍 , 肉体在原来的位置 , 现在的位置是灵魂
① 未脱离文档流
② 以自身原有位置作为参考坐标系
3.参考系:相对定位参考系为自身原有位置
4.left=-right top=-bottom,同时存在,左右取左,上下取上
相对定位好处:父级不会脱离文档流,满足所有的盒模型布局
总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔
4、绝对定位（absolute）
① 脱离文档流
② 以最近定位父级作为参考坐标系
绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位
如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响
注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值
5、固定定位（fixed）
① 脱离文档流
② 以文档窗口作为参考坐标系
