css3的边距和浮动练习

最新推荐文章于 2022-07-24 17:59:54 发布

int float double

最新推荐文章于 2022-07-24 17:59:54 发布

阅读量161

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_53560319/article/details/124391461

版权

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box-container{   /*大箱子*/
            width: 1226px;
            height: 628px;
            background-color: #CCC;
        }
        .left-box{       /*左箱子*/
            float: left;
            width: 234px;
            height: 628px;
            background-color: #aaa;
        }
        .right-box{   /*右箱子*/
            float: left;
            width: 992px;
            height: 612px;
            background-color: #777;
            padding: 8px 0;
        }
        /* 左箱子+右箱子的宽度==大箱子的宽度 234+992==1226 */
        /* 大箱子高度-右箱子的高度==628-612==16,说明有16px给小盒子调边距*/
        /* 右箱子的上下内边距都为8刚好 8+8 == 16 */
        li{   /*右箱子中的小盒子的属性标签 */
                float: left;
                width: 234px;
                height: 300px;
                background-color: red;
                list-style-type: none;
                margin: 0 12px 12px 0;
            }
        /*右箱子的宽度992-四个盒子的宽度4*234 == 56*/
        /*四个盒子的右外边距都为12px,但最右边的盒子会被下面的li.last里的右外边距所覆盖*/
        /*10+36(前3个盒子的右外边距)+10 ==56*/
        /*右箱子下面的4个小盒子因为右箱子内边距已经设为8，所以他们的12px没生效，还是显示8的*/
        li.first{/*第一个红色小箱子的左外边距 */
                margin-left: 10px;
        }
        li.last{/*第一个红色小箱子的右外边距 */
                margin-right: 10px;
        } 
    </style>
    <body>
        <div class = "box-container">
            <div class = "left-box"></div>       
            <div class = "right-box">  
               <ul class = "box1">
                    <li class = 'first'> </li>
                    <li> </li>
                    <li> </li>
                    <li class = 'last'> </li>
                    <li class = 'first'> </li>
                    <li> </li>
                    <li> </li>
                    <li class = 'last'> </li>
                </ul>
            </div>
        </div>
    </body>
</html>

int float double

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css3的边距和浮动练习

<!doctype html><html> <head> <meta charset = "utf-8"> <title></title> </head> <style> *{ margin: 0; padding: 0; } .box-container{ .
复制链接

扫一扫