4.CSS布局

CSS学习网站：http://www.w3school.com.cn/css/index.asp
手撕百度首页练习：https://github.com/3KK3/H5-

默认情况下，大部分网页标签都在标准流布局中：
从左到右，从上到下

部分脱离了标准流布局。脱离标准流的方法有：

float属性
position属性和 left、right、top、bottom属性

1.float属性

无论何种标签，只要脱离了标准流布局，都会变为行内-块级标签

    <style>
        #main {
            background-color: red;
            width: 200px;
            height:100px;
        }

        /*无论何种标签，只要脱离了标准流布局，都会变为行内-块级标签*/
        .test1 {
            float: left;
            background-color: green;
            width: 10px;
        }
        .test2 {
            float: right;
            background-color: blue;
        }
    </style>

<div id="main">
    <p class="test1">段落标签p1</p>
    <p class="test2">段落标签p2</p>
</div>

2.position属性

    <style>
        /*子绝父相 子标签是绝对定位  父标签是相对定位*/
        #main{
            background-color: red;
            height: 200px;
            width: 200px;
            /*我是相对定位的*/
            position: relative;
        }
        /*relative 和 absolute配对使用，如果不设置relative， 则会找static标签进行定位*/
        .test1 {
            background-color: green;
            /*我是绝对定位的*/
            position: absolute;
        }

        .test2 {
            background-color: yellow;
            bottom: 0px;
            width: 80px;
            /*相对于浏览器定位*/
            position: fixed;
            margin:0px;
        }

    </style>

<div id="main">
    <p class="test1">我是相对于父标签定位的段落标签p</p>
    <p class="test2">我是相对于浏览器窗口定位的段落标签p</p>
</div>

水平居中：

行内标签和行内块级标签：在父标签中设置text-align：center即可
块级标签：还需要在自身设置margin：0 auto

    <style>
        #main{
            height: 400px;
            width: 300px;
            background-color: red;
            text-align: center;

        }

        span {
            height: 100px;
            width: 100px;
            background-color: green;
        }
        
        /*块级标签此时只是文字居中 ，如果想要在父标签位置居中 需要单独设置*/
        div {
            height: 100px;
            width: 100px;
            background-color: blue;
        }
        button {
            height: 100px;
            width: 100px;
            background-color: yellow;
        }

    </style>

效果

<div id="main">
    <span>行内标签</span>
    <div>块级标签</div>
    <button>行内块级标签</button>
</div>

改进：
让左右边距改为自动

        div {
            height: 100px;
            width: 100px;
            background-color: blue;
            
            margin-left: auto;
            margin-right: auto;
            /*或者*/
            margin:0 auto;
        }

垂直居中：

行内标签和行内块级标签：在父标签中设置line-height = 内容高度即可
块级标签需要设置：

 position: absolute; (同时需要设置父标签的postion为relative)
 left:50%;
 top:50%;
 transform: translate(-50%,-50%);

实例：

    <style>
        #main{
            height: 400px;
            width: 300px;
            background-color: red;
            /*垂直居中*/
            line-height: 400px;
            position: relative;
        }

        span {
            height: 100px;
            width: 100px;
            background-color: green;
        }

        /*块级标签 需要单独设置*/
        .haha {
            height: 100px;
            width: 100px;
            line-height: 400px;
            background-color: blue;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }

    </style>


<div id="main">
    <span>行内标签</span>
    <div class="haha">块级标签</div>
</div>

最后编辑于：2019.01.17 09:57:44