必威体育Betway必威体育官网
当前位置：首页 > IT技术

CSS常见布局总结

时间:2019-08-16 05:13:26来源:IT技术作者:seo实验室小编阅读:63次「手机版」
　

css布局

居中

元素水平居中

行内元素水平居中

text-align:center;

块元素水平居中

margin:0 auto;

注意： margin 是复合属性，也就是说 margin: auto; 其实相当于 margin: auto auto auto auto;，margin: 0 auto;相当于 margin: 0 auto 0 auto;

根据规范，margin-top: auto; 和 margin-bottom: auto;，其计算值为0。这也就解释了为什么 margin: auto; 等同于 margin: 0 auto;

单行文字垂直居中

height:n px;
line-height:n px;

文字相对图片、输入框垂直居中

vertical-align:middle;

单行文字垂直居中

文本垂直居中

text-align + line-height实现单行文本水平垂直居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
    .box{
        line-height: 200px;
        width: 200px;
        height: 200px;
        background-color: red;
        color: #fff;
        text-align: center;
    }
    </style>
</head>
<body>
<p class="box">
我要垂直居中
</p>
</body>
</html>

水平居中

水平居中实现只要设置margin：0 auto;就可以实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>水平居中</title>
        <style type="text/css">
        #box{width: 200px;height: 200px;background: red;margin: 0 auto;}
        </style>
    </head>
    <body>
    <p id="box"></p>
    </body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
        <style type="text/css">
        #box{
            width: 200px;height: 200px;background: red;position:absolute;top:50%;margin-top: -100px;
        }
        </style>
    </head>
    <body>
    <p id="box"></p>
    </body>
</html>

CSS实现水平垂直居中

使用absolute

方法一

利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .wrap{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .inner{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: auto;
        }
    </style>
</head>
<body>
<p class="wrap">
    <p class="inner"></p>
</p>
</body>
</html>

方法二

在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果。

使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，达到水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>css实现水平垂直居中</title>
        <style type="text/css">
        .box{
        width:200px;
        height:200px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-100px;
        margin-top: -100px;
    }
        </style>
    </head>
    <body>
    <p class="box"></p>
    </body>
</html>

方法三

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中布局</title>
        <style type="text/css">
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        #box {
            width: 300px;
            height: 300px;
            background: red;
            margin: 0 auto; /*水平居中*/
            position: relative;/*相对自己当前进行定位*/
            top: 50%;
            margin-top: -150px;
        }
        </style>
    </head>
    <body>
    <p id="box"></p>
    </body>
</html>

方法四—CSS3实现垂直水平居中

利用绝对定位元素的偏移属性和CSS3的translate(translate 函数的动画是利用 GPU，能够减少浏览器重绘)来实现的自身偏移达到水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3实现垂直水平居中</title>
        <style type="text/css">
        #p1{
            width: 200px;height: 200px;background: red;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%); /* 这里我们使用css3的transform来达到类似效果 */
        }
        </style>
    </head>
    <body>
    <p id="p1"></p>
    </body>
</html>

CSS3 flex实现元素的垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中布局</title>
        <style type="text/css">
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        body{
            display: flex;align-items: center;justify-content: center;
        }
        #box{
            width: 200px;height: 200px;background: red;
        }
        </style>
    </head>
    <body>
    <p id="box"></p>
    </body>
</html>

flex实现垂直水平居中

margin: auto–完美的居中

使用弹性盒子(display: flex)，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>margin垂直水平居中</title>
    <style type="text/css">
    .box{
        width: 500px;
        height: 500px;
        background: #ccc;
        display: flex;
        display: -webkit-flex;
    }
    .inner{
        background: red;
        width: 100px;
        height: 100px;
        margin: auto;
    }
    </style>
</head>
<body>
<p class="box">
    <p class="inner"></p>
</p>
</body>
</html>

方法二

在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3 Flexbox轻松实现元素的垂直水平居中</title>
        <style type="text/css">
        .box{
            display: flex;
            width: 980px;
            height: 30rem;
            align-items:center;
            justify-content: center;
            background: #0099cc
        }
        h1{
            font-size: 1rem;
            padding: 1rem;
            border: 1px dashed #FFF;
            color: #FFF
        }
        </style>
    </head>
    <body>
    <p class="box">
        <h1>CSS3</h1>
    </p>
    </body>
</html>

table-cell实现元素水平垂直居中

方法一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .wrap{
            display: table-cell;/*此元素会作为一个表格单元格显示*/
            vertical-align: middle;
            text-align: center;
            background-color: red;
            width: 200px;
            height: 200px;
            border: 1px solid yellow;
        }
        .inner{
            display: inline-block;/*为了防止块级元素的宽度默认等于其父元素*/
            background-color: blue;
            color: #fff;
        }
    </style>
</head>
<body>
<p class="wrap">
        <p class="inner">我要实现水平垂直居中</p>
</p>
</body>
</html>

方法二

若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .wrap{
            width: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 0;
            background-color: #ccc;
        }
        .inner{
            vertical-align: middle;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<p class="wrap">
        <img class="inner" src="12.jpg">
</p>
</body>
</html>

浮动元素水平居中

小提示：在不带float的情况下,p元素的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化。

这里是在不知道父元素和子元素宽度的情况下实现子元素的水平居中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>如何居中一个浮动元素</title>
        <style type="text/css">
        .p{
           position: relative;
            float: left;
            left:50%;
            border: 1px solid red;
        }
     .c{
            position: relative;
            float: left;
            right: 50%;
        }
        </style>
    </head>
    <body>
    <!-- 父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
    相对定位元素的定位是相对其正常位置。
    -->
    <p class="p">
    <h1 class="c">居中浮动元素</h1>
    </p>
    </body>
</html>

注意：绝对定位在布局中可以很方便的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如： 弹层，悬浮层等。

元素宽度未知实现居中

这里父元素和子元素的宽度都不知道，并且要求子元素的宽度随着其内容的增加而增加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
    .wrap{
        border: 1px solid red;
    }
    .inner{
        background-color: blue;
        //设置子元素为行内块元素
        display: inline-block;
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }
    </style>
</head>
<body>
<p class="wrap">
        <p class="inner">我是一个可以改变宽度的p</p>
    </p>
</body>
</html>

三栏布局(两边固定，中间自适应)

浮动实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浮动实现</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: red;
        float: left;
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: blue;
        float: right;
    }
    .middle{
        margin: 0 210px;
        background-color: green;
        height: 300px;
    }
    </style>
</head>
<body>
    <p class="left">左边</p>
    <p class="right">右边</p>
    <p class="middle">中间</p>
</body>
</html>

注意：这种实现方式要把middle这个p放到最后面。相当于先把两边的p布局好，然后中间的p嵌入进去。

绝对定位实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绝对定位实现</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
    .right{
        width: 200px;
        height: 300px;
        background-color: blue;
        position: absolute;
        right: 0;
        top: 0;
    }
    .middle{
        margin: 0 210px;
        background-color: green;
        height: 300px;
    }
    </style>
</head>
<body>
    <p class="left">左边</p>
    <p class="middle">中间</p>
    <p class="right">右边</p>
</body>
</html>

注意：这种方式不要求将middle这个p放在最后面，放在任意位置都可以。

负margin值实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>负margin实现</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .left,.right{
          height: 300px;
                width: 200px;
                float: left;
    }
    .left{
        background-color: red;
        margin-left: -100%;
    }
    .right{
        background-color: blue;
        margin-left: -200px;
    }
    .middle{
        background-color: green;
        height: 300px;
        float: left;
        width: 100%;
    }
    </style>
</head>
<body>
    <p class="middle">中间</p>
    <p class="left">左边</p>
    <p class="right">右边</p>
</body>
</html>

参考博文：

实现垂直水平居中的5种方法

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

相关阅读

动态添加布局-LayoutParams

其实这个LayoutParams类是用于child view（子视图） 向 parent view（父视图）传达自己的意愿的一个东西（孩子想变成什么样向其父亲说明） 

js中currentStyle和getComputedStyle获取css样式区别

js中获取样式我了解到三种。一种是通过obj.offsetAttr来获取样式，通过这种方法来获取元素的宽高时，如果没有边框，可以正确获取，如果使

11 - css3渐变

css3渐变 鼠标样式 透明度的使用以及兼容性写法(针对IE的大傻逼) 线性渐变 径向渐变 ###鼠标样式(cursor)规定当鼠标进入元素呢

LinearLayout(线性布局)的基本使用

LinearLayout又称作线性布局，是一种非常常用的布局。正如它的名字所描述的一样，这个布局会将它所包含的控件在线性方向上依次排列。

【CSS】如何设置行距、段落间距、缩进格式

在使用MarkDownHere的时候，需要利用CSS编辑各个段落的格式，本文记录了CSS中编辑格式的各个属性及其设置。 行距 行距一般使用line-h

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图