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>
复制代码

效果以下：测试

与伪元素：after方法相比，这个方法多了一层div进行包含嵌套，并设置该div样式为text-align: justify;便可在iell和edge浏览器下正常显示，具体原理暂不清楚，