【静态页面架构】CSS之定位

CSS架构

1.浮动;

是以float属性设置容器指定的位置

<style>
        div {
            width: 200px;
            height: 200px;
        }
        #qq {
            background-color: lightcoral;

            /*float: right;*/
        }
        #yy {
            /*width: 300px;
            height: 300px;*/
            background-color: yellowgreen;
            /* 当前元素设置为浮动后,只影响当前元素后面的所有元素的位置 */
            /*float: left;*/
        }
        #cc {
            background-color: lightskyblue;

            float: left;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>

块级元素;

不再独占一行,多元素之间会水平方向排列设置浮动后,会从页面的文档流脱离

  <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            /*默认宽度是父级宽度的100%
              高度是后者的所有元素高度之和*/
            float: left;
            /*左浮动*/
               /*
                * 宽度默认是 0 或者所有后代元素宽度之和
                * 高度默认是 0 或者所有后代元素高度之和

                多个块级元素都设置为浮动后 -> 垂直方向排列变为水平方向排列
                * 如果占满父级元素宽度的100%后,会自动换行
                */
        }
    </style>
</head>
<body>
<div></div>
</body>

示意图;
【静态页面架构】CSS之定位

内联元素;

<style>
        span{
            background-color: red;
            width: 200px;
            height: 200px;
            /*宽和高是以内容撑起*/
            /*设置宽高属性是无效的*/
            float: left;
            /*设置完浮动后
              其宽高属性才有效
              多个内联元素之间依旧是水平方向的排列*/
        }
    </style>
</head>
<body>
<span>呼延觉罗</span>
<span>爱新觉罗</span>
</body>

示意图;
【静态页面架构】CSS之定位

清除浮动;

以clear属性来设置清除浮动

<style>
        div{
            width: 200px;
            height: 200px;
            float: left;
        }
        #qq{
            background-color: red;

        }
        #yy{
            background-color: blue;
            clear: both;
            /*清除浮动*/
        }
        #cc{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="qq"></div>
<div id="yy"></div>
<div id="cc"></div>
</body>

示意图;
【静态页面架构】CSS之定位

高度塌陷;

在没有给父级容器设置高度,而且设置子元素浮动,父级失去高度

<style>
        .qq{
            border: 10px solid black;
            overflow: hidden;
        }
        .hh{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div class="qq">
    <div class="hh"></div>
</div>
</body>

示意图;
【静态页面架构】CSS之定位

【静态页面架构】CSS之定位

上一篇:JS,Cookie本地存储,设置获取cookie函数的封装!


下一篇:kubernetes(一)之Docker基础入门