CSS终结篇...

Posted 2021-12-12 ethan99

一 盒子模型

组成部分: 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

显示区域只能由父级大小决定

1. 以滚动的方式允许子级所有内容显示

   overflow: auto;或overflow: scroll;

2. 只运行子级在父级所在区域的部分显示,超出的部分影藏

   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）

① 脱离文档流
② 以文档窗口作为参考坐标系

比如网站上的那些广告 , 不管怎么滚动滚动条 , 广告还是在那个位置用的就是固定定位 .

6. z-index

脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意正整数