CSS布局

1.左右布局

image.png

1.1 介绍

主要是利用 float CSS属性,让元素从网页的正常流动中移除,left左浮动,right右浮动。

1.2 源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 500px;
                height: 500px;
                border: 1px solid red;
            }

            #left{
                background-color: blue;
                height: 250px;
                width: 250px;
                float: left;
            }

            #right{
                background: yellow;
                height: 250px;
                width: 250px;
                float:right;
            }
        </style>
    </head>
    <body>
        <div id="bd">
            <div id="left"></div>
            <div id="right"></div>
        </div>
    </body>
</html>

2 左中右布局

image.png

2.1介绍

主要还是是利用 float CSS属性,left左浮动,right右浮动,center自动适应调整自身宽度。

2.2源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 450px;
                height: 100px; 
                border: 1px solid red;
            }

            #left{
                background-color: blue;
                height: 50px;
                width: 150px; 
                float: left;
            }
            #center{
                margin:0 150px; 
                height: 50px;
                background-color: cadetblue;
            }

            #right{
                background: yellow;
                height: 50px;
                width: 150px;
                float:right;
            }
        </style>
    </head>
    <body>
        <div id="bd">
            <div id="left"></div>
            <div id="right"></div>
            <div id="center"></div>
        </div>
    </body>
</html>

3. 水平居中

3.1 宽度确定的情况下,可以利用设置margin的左右值为auto来实现。

image.png

3.1.1源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 450px;
                height: 100px; 
                border: 1px solid red;
            }
            #center{
                margin: 0 auto;
                height: 50px;
                width: 100px;
                background-color: cadetblue;
            }

        </style>
    </head>
    <body>
        <div id="bd">
            <div id="center"></div>
        </div>
    </body>
</html>

3.2 通过设置元素的为inline-block属性,并且在其父系容器中设置text-align的属性为"center",如没有父系容器可自己添加一个父系容器来实现。

image.png

3.2.1源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 450px;
                height: 100px; 
                border: 1px solid red;
                text-align: center
            }
            #center{
                height: 50px;
                background-color: cadetblue;
                display: inline-block;
            }

        </style>
    </head>
    <body>
        <div id="bd">
            <div id="center">123</div>
        </div>
    </body>
</html>

3.3 绝对定位实现水平居中,利用绝对定位,父系容器left: 50%,子容器right: 50%。

image.png
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 450px;
                height: 100px; 
                border: 1px solid red;
                position: absolute;
                left: 50%;
            }
            #center{
                height: 50px;
                background-color: cadetblue;
                position: relative;
                right: 50%;
            }

        </style>
    </head>
    <body>
        <div id="bd">
            <div id="center"></div>
        </div>
    </body>
</html>

4. 垂直居中

4.1 在父系容器高度确认的情况,可以用height=line-height来实现

image.png

4.1.1源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 450px;
                height: 100px; 
                border: 1px solid red;
                
            }
            #center{
                line-height: 100px;
                position: relative;  
            }

        </style>
    </head>
    <body>
        <div id="bd">
            <div id="center">123</div>
        </div>
    </body>
</html>

4.2 可以利用CSS3 中的flexbox 布局

image.png

4.2.1 源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            #bd{
                width: 450px;
                border: 1px solid red;
            }
            #center{
                display: flex;
                align-items: center;
            }

        </style>
    </head>
    <body>
        <div id="bd">
            <div id="center">123</div>
        </div>
    </body>
</html>

5. CSS技巧

5.1 ::before 和 ::after

::before和::after 是用来给元素添加额外内容的,因为只存在于作用元素内容的前后。
例:利用::before和::after ,我们可以很简洁的画出一个太极来。


image.png

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>taiji</title>

    <style>
        body {
            background-color: #abcdef;
        }

        .taiji {
            width: 0px;
            height: 600px;
            border-left: 300px solid black;
            border-right: 300px solid white;
            border-radius: 50%;
        }

        .taiji::before {
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            border: 100px solid black; 
            border-radius: 50%;
            background-color: white;
            margin-left: -150px;
        }

        .taiji::after {
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            border: 100px solid white; 
            border-radius: 50%;
            background-color: black;
            margin-left: -150px;
        }
    </style>
</head>

<body>
    <div class="taiji">

    </div>
</body>

</html>

5.2 :nth-child

选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
例:利用选择器,我们可以很简单的为奇数的元素设置单独的属性


image.png

5.2.1 源码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <style>
            p:nth-child(odd){
                width: 50px;
                background:#ff0000;
            }

        </style>
    </head>
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,584评论 5 15
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布...
    一个敲代码的前端妹子阅读 822评论 0 12
  • CSS布局解决方案(终结版) 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又...
    杀个程序猿祭天阅读 596评论 0 2
  • 单列布局水平居中水平居中 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介...
    Osmond_wang阅读 339评论 0 1