CSS终结篇...

一 盒子模型

组成部分: margin + border + padding + content

content = width x height

img

盒模型

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属性,可以用来控制显示层次的优先级,值为任意正整数
posted @ 2019-05-30 21:21  EthanChen95  阅读(94)  评论(0编辑  收藏  举报