01-23 css布局

2019-02-11 本文已影响0人 ychaochaochao

1.标准流

<!--1.什么是标准流
        标签在没有添加布局相关的样式的时候，在浏览器中默认的布局方式。
        块级标签在标准流中是一个占一行（不管宽度是多少），默认宽度是父标签的宽度，默认高度是内容的高度，设置宽高是有效的
        行内标签在标准流中一行可以显示多个；默认大小是内容的大小；设置宽高无效(span,a……)
        行内块标签在标准流中一行可以显示多个；默认大小是内容的大小，可以设置宽高（img，input）     
        2.实际布局的选择
        a.左右结构使用行内块
        display属性 - 可以让任何标签变成块级、行内、行内块；隐藏标签     
        b.脱流/脱标（脱离标准流）
        float(流动)
        定位（letf , right ,top ,bottom , position）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="background: burlywood; width: 120px;">
            我是div,块级的
        </div>
        <div id="" style="background: red ;">
            我是div,块级的
        </div>
        <span style="background: gold;">
            天下英雄尽役
        </span>
        <span  style="background: teal;">
            天下无又给
        </span>
    </body>
</html>

二：display

    display属性（css属性）
    block(块) - 
    inline(行内)
    inline-block(行内块) - 默认左右有间隙(因为换行产生的)，可以通过将父标签的字体大小设置为0来去掉。
    none(隐藏)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .d1{
                display: inline-block;
            }
        </style>
    </head>
    <body style="font-size: 0px;">
        <div style="height: 120px; background-color: red;">
            <a href="" style="font-size: 20px;">夜帝</a>
            <a href="">楚留香</a>
        </div>
        <div class="d1" style="height: 200px; width: 30%; background-color: darkgray;"></div>
        <div class="d1" style="height: 200px; width: 70%; background-color:darkgoldenrod;"></div>       
    </body>
</html>

三：float

    浮动
    浮动会让标签脱流
    脱流 - 让标签脱离标准流布局，不管什么标签脱流了，都是按’一行可以显示多个，默认大小是内容大小，并且设置宽高有效的方式‘
    
    float属性
    left
    right
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">         
        </style>
    </head>
    <body>
        <div id="" style="background-color: salmon; height: 50px;">
            人生如梦
        </div>
        <div id="" style="background-color: gold; width: 40%; float:left; ">
            hehe
        </div>
        <div id="" style="background-color: chartreuse; width: 40%; float:left; ">
            hehe
        </div>
        <div id="" style="background-color: darkblue; width: 20%; float:left; ">
            hehe
        </div>
        <div id="" style="background-color: hotpink; width: 100%; float:left; ">
            hehe
        </div>
    </body>
</html>

四：文字环绕

<!--文字环绕
    被环绕的标签浮动，文字标签不浮动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="" style="background-color: lawngreen; width: 80px;height: 80px;float:left ;margin-right: 10px;">
        </div>
        <p>
            本文实例讲述了Python列表切片用法。分享给大家供大家参考，具体如下：Python中符合序列的有序序列都支持切片（slice），例如列表，字符串，元组。
        本文实例讲述了Python列表切片用法。分享给
        本文实例讲述了Python列表切片用法。分享给
        本文实例讲述了Python列表切片用法。分享给
        本文实例讲述了Python列表切片用法。分享给
        </p>
    </body>
</html>

五：清除浮动

1.高度塌陷
当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷的问题 

2.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷问题。
a.方法一：添加空盒子
在高度会塌陷的父标签的里面最后，添加一个空的div;然后给空的div添加样式，设置clear属性的值为both 
b.方法二：overflow
给高度会塌陷的父标签添加样式，设置overflow属性值为hidden 
c.方法三：万能清除法
选中高度会塌陷的父标签，给after状态添加样式：
然后再给这个父标签添加样式zoom:1

六：定位

1.定位
定位会让标签脱流

2.定位属性：
top : 到顶部的距离 
bottom : 底部的距离
left : 左边的距离
right ：右边的距离
以上4个属性想要有效，必须通过position属性来说明参考对象
position : 
initial和static - 默认值，不能定位（定位无效）
absolute - 绝对定位；以第一个position的值不是默认值的父标签进行定位（注意：body块标签的position不是initaial和static）
relative - （相对定位）相对于标准流定位；（相对自己在标签流的位置定位）一般使用relative是在标签本身不需要定位，但希望自己的子标签相对自己来定位的时候使用。
fixed - 相对浏览器定位
sticky - 当浏览器内容没有超过一屏的时候，显示在内容的最下面，当浏览器内容超过一屏bottom有效，并且显示在浏览器的底部

top和borrom有效，left和right无效。

七：盒子模型
1.盒子模型
网页上所有的可视标签都是一个盒子模型：一个标签是由四个部分组成，分别是：内容（content）、padding、border、margin；
其中content、padding、border是可见的，margin不可见，但是占位
2.盒子模型的每个部分
content - 标签内容，设置标签的宽高就是设置内容部分的大小。标签中的文字和子标签都是添加在content上的
padding - 在内容外部，默认是0；可见的，并且背景颜色也作用于padding;有四个方向