css佈局知識摘要

時間 2019-11-08

標籤 css 佈局知識摘要欄目 CSS 简体版

原文原文鏈接

兩列（一側定寬，一側自適應）佈局：

<!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>Document</title>
    <style>
    *{
        margin:0;
    }
    .main{
        height:600px;
        overflow:hidden;
    }
    .left{
        float: left;
        background-color: aquamarine;
        width: 500px;
        height: 600px;
    }
    .right{
        margin-left:500px;
        background-color: cornflowerblue;
        height:600px;
    }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">航啊時代科技鞍山市打個卡四大金剛了阿斯蘭的就夠了阿</div>
        <div class="right">裏克森點擊率高家裏四大金剛拉手機端了估計安祿山的價格了啊殭屍臉的價格l</div>
    </div>
</body>
</html>
複製代碼

在css佈局中最有名的也是最基礎的佈局當屬「聖盃佈局」和「雙飛翼佈局」，它們屬於三列（左中右）佈局，兩邊定寬，中間自適應，基本能夠知足大部分基礎佈局需求。css

聖盃佈局 (三列（左中右）佈局，經測試無誤能夠正常使用)：

<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>Document</title>
    <style>
        *{
            margin:0;
        }
        body{
            min-width: 850px;
        }
    .header {
			width: 100%;
			height: 100px;
			background: red;
		}
    .container{
        padding:0 250px 0 300px;
    }
    .main,.left,.right{
        float: left;
    }
    .main{
        width:100%;
        background-color: burlywood;
    }
    .left{
        width:300px;
        background-color: crimson;
        margin-left:-100%;
        position: relative;
        left: -300px;
    }
    .right{
        width:250px;
        background-color: brown;
        height: 600px;
        margin-right:-250px;
    }
    </style>
</head>
<body>
        <div class="header"></div>
        <div class="container">
       <div class="main">hoahso愛事後好哦好多個傲嬌的攻角度講過奧四大金剛</div>
       <div class="left">asdfasd 事後好哦好多個傲嬌的攻角度講過奧四asd</div>
       <div class="right">事後好哦好多個傲嬌的攻角度講過奧四事後好哦好多個傲嬌的攻角度講過奧四</div>
   </div>
   <div class="footer"></div>
</body>
</html>
複製代碼

效果以下：html

雙飛翼佈局（三列（左中右）佈局，經測試無誤能夠正常使用）：

<!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>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #FFFFE0;/*便於觀看加的樣式*/
        min-width:1000px;
    }
    header{
        height:30px;
        background: gray;
        text-align: center;
    }
    footer{
        clear: both;
        height:30px;
        background: gray;
        text-align: center;
    }
    .middle,.left,.right{
        float: left;
    }
    .middle{
        width: 100%;
    }
    .middle .inside{
        margin-left:200px;
        margin-right:150px;
        background-color: darksalmon;
        
    }
    .left{
        width: 200px;
        background-color: chartreuse;
        margin-left:-100%;

    }
    .right{
        width: 150px;
        background-color:darkred;
        margin-left:-150px;
    }
    </style>
</head>
<body>
        <header>我是雙飛翼頭部區域</header>
        <div class="middle">
            <div class="inside">b<h1>This is the main content.</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                <!--文字僅供測試無心義-->
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                <!--文字僅供測試無心義-->
            </div>
        </div>
        <div class="left"><h2>This is the left sidebar.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
            <!--文字僅供測試無心義-->
        </div>
        <div class="right">
        <h2>This is the right sidebar.</h2>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan .</p>
              <!--文字僅供測試無心義-->
          </div>
        <footer>我是雙飛翼底部區域</footer>
</body>
</html>
複製代碼

效果以下：vue

css元素居中：

css元素居中方式多大十幾種，各類思路各類寫法一通秀，簡直舉不勝舉，日常使用中基本只要掌握7，8種就能夠應付平常的全部業務要求了，具體就不一一列舉了，掘金的這位總結的比較全面，能夠學習一下，css居中大全。瀏覽器

`text-align`兩端對齊

text-align:justify在佈局使用中也是常常使用的，須要注意的是text-align:justify對第一行內容不起做用，並且只對最後一行以前的行生效，若是你只有一行則需特殊處理。通常慣用的的方法是使用僞元素::after。bash

代碼以下：框架

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>	
		.contain{
			width: 800px;
			background-color: red;
			text-align: justify;
			margin:0 auto;
			font-size:0;
		}
		.contain span{
			background-color: yellow;
			display: inline-block;
			font-size:18px;
			

		}
		.contain:after{
			content: "";
			display: inline-block;
			width:100%;
			overflow:hidden;
			height: 0;
		}
	</style>
</head>
<body>
		<div class="contain">
		<span>全部全部全部全部全部</span>
		<span>框架全部全部全部</span>
		<span>vue全部全部全部</span>
		<span>原生JS全部全部</span>
		</div>
</body>
</html>
複製代碼

效果以下：ide

另一種是使用text-align-last:justify,MDN上面顯示目前的瀏覽器都支持，可是該屬性通過我的測試發現ie11和edge瀏覽器都不支持，解決方法以下：佈局

代碼以下：學習

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>

		.contain{
			width: 800px;
			margin:0 auto;
			background-color: red;
			text-align-last: justify;
		}
		.ceshi{
			text-align: justify;

		}
		.contain span{
			background-color: yellow;
			display: inline-block;
		}
    </style>
</head>
<body>
	<div class="contain">
		<div class="ceshi">	
		<span>全部</span>
		<span>框架</span>
		<span>vue</span>
		<span>原生JS</span>
		</div>
	</div>
</body>
</html>
複製代碼

效果以下：測試