首页 > 其他分享> > 让霸道的块级元素并排---浮动

让霸道的块级元素并排---浮动

2019-02-25 08:49:18 作者：互联网

float属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*浏览器默认展示的元素位置-- 标准流
        如果想让盒子从左到右排 -> 浮动 float: left right none
        并排的所有元素同时加浮动属性 --> 浮动流
        */
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            /*float: left;*/
        }
        /*伪类选择器
            语法:
            标签名/类名:first-child{
                }
            标签名/类名:last-child{
                }
            标签名/类名:nth-child(2*n+1){
                }
            */
        .box:first-child{
            /*box父亲的第一个孩子*/
            background-color: #4c8ced;
        }
        .box:nth-child(2){
            background-color: #cc4a44;
        }
        .box:nth-child(3){
            background-color: red;
        }
        .box:nth-child(4){
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div class="box">第一个孩子</div>
<div class="box">第二个孩子</div>
<div class="box">第三个孩子</div>
<div class="box">第四个孩子</div>
</body>
</html>

将上面代码段中 float: left; 取消注释,页面展示如下:

标签：浮动,box,color,float,nth,并排,background,child,霸道
来源： https://blog.csdn.net/weixin_42223833/article/details/87910815