CSS+div布局总结（快速入门，附代码）

最新推荐文章于 2024-07-23 10:00:17 发布

popofzk

最新推荐文章于 2024-07-23 10:00:17 发布

阅读量6k

点赞数 9

分类专栏：前端 css 文章标签： css html 前端

本文链接： https://blog.csdn.net/popofzk/article/details/107235896

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

定位

相对定位

以当前为参照物移动指定的距离
注意：相对定位，被定位的元素会占据原有的物理位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #box1{
            background: red;
        }
        #box2{
            background:green;
            /*相对定位
                以当前为参照物移动指定的距离
                注意：相对定位，被定位的元素会占据原有的物理位置
            */
            position:relative;
            /*移动定位元素*/
            top:200px;/*bottom*/
            left:200px;/*right*/
        }
        #box3{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

绝对定位

绝对定位的元素不会占据原有的物理位置
以其他元素作为参考物移动指定距离的定位方式

关于绝对定位的参考点：
1. 如果元素的外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点
1. 如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
1. 如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #box1{
            background: red;
        }
        #box2{
            background:green;
            position: absolute; 
            /*top:200px;
            left:200px;*/
        }
        #box3{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

加上

top:200px;

left:200px;

参考点为(0,0)绝对左上角，而不是红色框左上角

如果外层元素没有定位，但是外外层（爷爷类）有定位，则有：

如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)

子类参考点为外外层（爷爷类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width:200px;
            height:200px;
        }
        #box1{
            background: red;
        }
        #box2{
            width:500px;
            height:500px;
            background:green;
            border:1px solid green;
            /*绝对定位：
                绝对定位的元素不会占据原有的物理位置
                以其他元素作为参考物移动指定距离的定位方式
                关于绝对定位的参考点：
                1.如果元素的外层元素是非static（有了除默认值之外的定位设置）那么这个外层元素就成为该元素的定位参考点
                2.如果元素的外层元素没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
                3.如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页面
            */
            /*position: absolute;*/
            /*top:200px;*/
            /*left:200px;*/
            position: relative;
        }
        #father{
            width:200px;
            height:200px;
            background: aquamarine;
            /*父类做一个定位*/
            /*position:relative;*/
            margin:20px;

        }
        #son{
            width:100px;
            height:100px;
            background:fuchsia;
            position:absolute;   /*son的参考点是father，但前提是father这一层（外层）必须有定位*/
            top:100px;
            left:100px;
        }
        #box3{
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
    <div id="box3"></div>
</body>
</html>

如果son的father没有定位，box2也没定位，则其absolute参考点为body：

固定定位

垂直滚动条：

background:palevioletred;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        div{
            height:2000px;
            background:palevioletred;
        }
        #box{
            width:80px;
            height:400px;
            background: green;
            position: fixed;
            right:0px;  /*距离右边为0*/
            top:300px;  /*距离顶部为0*/
        }
    </style>
</head>
<body>
1
    <div>
        <div id="box"></div>
    </div>
2
</body>
</html>

堆叠顺序

注意：只能支持定位元素！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index设置定位元素z轴的距离(定位元素的显示顺序)</title>
    <style>
        #one{
            width:200px;
            height:200px;
            background: red;
            position: absolute;
            top:100px;
            left:100px;
            z-index:1;
        }
        #two{
            width:200px;
            height:200px;
            background: yellow;
            position:absolute;
            top:150px;
            left:150px;
            z-index:999; /*这里设置1仍然是黄色盖住红色*/
        }
    </style>
</head>
<body>
    <!--注意：z-index属性只支持定位元素-->
    <div id="one"></div>
    <div id="two"></div>
</body>
</html>

首先看代码先后顺序，渲染的是one在前，two在后，所以黄色会盖住红色，z-index可以提高层级别

display

回顾浮动：任意元素一旦浮动，display都会失效

预备知识：

div:默认为块状元素：具有宽高属性，并且独占一行
Span:默认为行内元素：没有宽高属性，不会独占一行

块状&行内元素的互换：

1. 如果将div设置为行内元素display: inline，则会使得div无宽高属性，且不会独占一行！
1. 也可以将span设置为块状元素:display:block，则可以有宽高属性，独占一行！
1. 如果用了很多块状元素div，但是会独占一行，如果不想独占一行（想并列显示），则要将其改为行内块元素：display:inline-block——既有宽高属性且不会独占一行，但涉及图文混排，故此方式用的较少，浮动使用较多
接着将div的display改为表格属性display:table-cell,变为单元格形式，

隐藏元素：

display:none可以将div块进行隐藏，并且不会占用原物理空间（类似：visibility:hidden隐藏效果，但仍占用物理空间）
如果元素是使用visibility设置的隐藏方式，那么只能用visibility：visible的方式来让元素显示;对应的，display:none要用display:block来显示！
总结：visibility:设置元素是否显示
visible 显示
hidden隐藏
注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是彻底隐藏该元素的内容和位置。
应用：网页中鼠标未选中时隐藏，选中时显示展开

设置透明度：

opacity: 0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        div,span{
            width:200px;
            height:200px;
        }
        div{
            background: red;
            /*设置为行内元素*/
            /*display: inline;*/
            /*设置元素为行内块元素，具有宽高属性，并且不会独占一行*/
            /*display: inline-block;*/
            /*display: table-cell;*/
            /*隐藏元素*/
            /*display: none;*/
            /*display: block;*/
            /*隐藏元素，占据原有物理位置*/
            /*visibility: hidden;*/
            /*如果元素是使用visibility设置的隐藏方式，那么只能用visibility：visible的方式来让元素显示*/
            /*visibility:visible;*/
            /*
                visibility:设置元素是否显示
                    visible 显示
                    hidden隐藏
                   注意：visibility和display:none的区别：visibility的隐藏方式仅隐藏了内容的显示，其占用的空间依旧占用，而display:none的隐藏方式是
                   测地隐藏该元素的内容和位置。

            */
            /*设置元素透明度*/
            opacity: 0;
        }
        span{
            /*设置为块状元素*/
            /*display: block;*/
            background: fuchsia;
        }
    </style>
</head>
<body>
    <!--div:块状元素：具有宽高属性，并且独占一行-->
    <div>这是块状元素</div>
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
<!--    <div>这是块状元素</div>-->
    <!--行内元素：没有宽高属性，不会独占一行-->
    <span>这是行内元素</span>
</body>
</html>

盒子模型

预备知识：

盒子与盒子之间的距离——margin：外间距

盒子内部的content与边框的间距——padding：内边距

边框也有一个厚度：border：边框

margin

快速设置：

margin:10px 10px 10px 10px顺序：上右下左

margin:20px 10px 20px上下20px，左右都为10px

margin:20px 10px上下20px，左右为10px

居中显示：

如果想要div居中，可以margin:10px auto;实现块状元素居中显示，如果改为浮动，则display失效,无法居中

外边距合并：

几个特点：

1. 块级元素的垂直相邻外边距会合并
1. 行内元素实际上不占上下外边距，行内元素的的左右外边距不合并
1. 浮动元素的外边距也不会合并
1. 允许指定负的外边距值，不过使用时要小心

取两者最大值，而非之和！

合并只有上下

子父类div：

margin负值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        #box{
            width:620px;
            height:620px;
            background: pink;
        }
        #box>div:nth-child(1){
            width:600px;
            height:200px;
            background: blue;
            float:left;
        }
        #box>div:nth-child(2){
            width:200px;
            height:200px;
            background: yellow;
            float:left;
        }
        #box>div:nth-child(3){
            width:200px;
            height:200px;
            background: green;
            float:left;
            /*当前元素与其他元素之间的距离 外间距*/
            /*margin-top:10px;*/
            /*margin-bottom:10px;*/
            /*margin-left:10px;*/
            /*margin-right:10px;*/
            /*margin:10px 10px 10px 10px;*/
            /*margin:20px 10px 20px;*/
            /*margin:20px 10px;*/
            margin:10px;
        }
        #box>div:nth-child(4){
            width:200px;
            height:200px;
            background: aqua;
            float:left;
        }
        #box>div:nth-child(5){
            width:600px;
            height:200px;
            background: blueviolet;
            float:left;
        }
        #block{
            width:1200px;
            background: blue;
            height: 40px;
            /*实现让块状元素居中显示*/
            margin:10px auto;
        }
        #box1{
            margin-top: -100px;
            width:200px;
            background: red;
            height:200px;
            margin-bottom: 100px;
        }
        #box2{
            width:200px;
            background: yellow;
            height: 200px;
            margin-top:50px;
        }
        #father{
            width: 500px;
            height:200px;
            /*加一像素红色 实线边框*/
            border: 1px solid red;
            background: green;
        }
        #son{
            width:200px;
            height:100px;
            background: pink;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>顶部元素</div>
        <div>左侧元素</div>
        <div id="self">当前元素</div>
        <div>右侧元素</div>
        <div>底部元素</div>
    </div>
    <!--可以设置块状元素居中-->
    <div id="block"></div>
    <!--外间距合并-->
    <div id="box1"></div>
    <div id="box2"></div>
    <!--包含式外间距合并-->
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

边框border

border: 5px solid red

每条边分开设置：

统一设置（大多数情况下）：

双线注意：

padding

总结：

padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以在书写宽高时注意减掉内边距和边框(标准盒模型)

宽高指的是content的！回顾如图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding</title>
    <style>
        span{
            border:1px solid red;
            float:left;
            /*padding-top:10px;*/
            /*padding-left:10px;*/
            /*padding-right:10px;*/
            /*padding-bottom: 10px;*/
            /*padding:10px;*/
            /*padding:10px 20px;*/
            /*padding: 10px 20px 15px;*/
            padding: 10px 20px 30px 40px;
        }
        div{
            width:150px;
            height:150px;
            background: red;
            clear: both;
            border:5px solid red;
            padding: 20px;
            /*margin:20px;*/
            /*
                padding的宽高要记录在盒子模型的宽高之内，于此相同的是border也要记录在盒子模型的宽高之内，但是margin并不算在宽高之内。所以各位在书写宽高时注意减掉内边距和边框(标准盒模型)
            */
        }
    </style>
</head>
<body>
    <span>这是内容</span>
    <div></div>
</body>
</html>

怪异盒模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>怪异盒</title>
    <style>
        div{
            width:200px;
            height:200px;
            padding:20px;
            border:5px solid red;
            background: red;
            /*设置怪异盒*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>