CSS（四）
页面布局
display: 用来控制盒子模型的显示方式；
block:块级元素显示方式；
inline:内联元素显示方式；
inline-block:同时具备内联和块级元素的特点；
table：块级table元素的显示特点；
table-cell: tr,td的显示特点（分栏，弹性，等高）；
flex:设置为弹性盒子布局；
grid:设置为网格布局；
两大布局方式：
- table+CSS布局
- div+CSS布局
三栏-固定宽度布局
首先全部装在一个wrapper盒子下，并确定盒子初始宽度960px，并为之后分栏做准备
将整个盒子划分为header、nav、aside、article、footer五个部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 960px;
margin: 0 auto;
border: 1px solid;
}
header{
background-color: #f00;
}
nav{
float: left;
width: 160px;
background: rgb(38, 204, 140);
}
nav ul li{
list-style-type: none;
}
article{
float: left;
width: 500px;
background-color: aqua;
}
aside{
float: left;
width: 300px;
background: #3f7ccf;
}
footer{
clear: both;
color: white;
text-align: center;
background: rgb(75, 29, 201);
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Hello Xherlock!</h1>
</header>
<nav>
<ul>
<li>主页</li>
<li>博客</li>
<li>主页</li>
</ul>
</nav>
<article>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam voluptatum sit quasi quaerat quis amet quam sed similique est consequatur rem architecto ipsa tempora, labore, accusantium at nostrum provident ex!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquam, quasi ab modi labore, repellat asperiores dicta sapiente repudiandae fuga reprehenderit amet veritatis quia obcaecati reiciendis aut dolor officiis illo.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, sunt! Ipsa odio ipsam fugit ex id, quaerat iste velit sint nesciunt debitis, vitae minus animi tempora! Nostrum, eligendi. Aliquam, quisquam?
</article>
<aside>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam voluptatum sit quasi quaerat quis amet quam sed similique est consequatur rem architecto ipsa tempora, labore, accusantium at nostrum provident ex!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquam, quasi ab modi labore, repellat asperiores dicta sapiente repudiandae fuga reprehenderit amet veritatis quia
</aside>
<!-- 若有article必须要有footer,wrapper才起作用 -->
<footer>
©2021 Copyright
</footer>
</div>
</body>
</html>将nav、article、aside三个盒子的宽度加起来应小于等于wrapper的宽度，否则会由于float左浮动的原因下移
显示三栏效果
若在article中增加padding，这个在css中初始化时所有元素设置的padding均为0
此时出现下面这样
最右栏滑移到下一行最左侧
解决办法有
设定的article元素减去相应宽度
article{ float: left; width: 480px; background-color: aqua; padding: 10px; }在容器内部的元素添加内边距或外边距
article{ float: left; width: 500px; background-color: aqua; /* padding: 10px; */ } article p{ padding: 10px; }- 使用box-sizing切换盒子缩放方式，加个box-sizing: border-box;
第一种方法比较麻烦，很容易调错，还得进行计算
第二种方法可行，但前提是内容元素没有设定宽度，但是出现多个元素时就很麻烦了
这时可以采用给该栏中所有元素一块添加个div来调整（div属于中性元素：如果不给它应用样式表，啥作用也没）
eg：
article .inner{
padding: 10px;
border: 1px solid black;
margin: 10px;
}
<article>
<div class="inner">
<!-- 此处省略文字内容 -->
</div>
</article>
效果还不错
第三种方法最简单，只需要一个box-sizing声明就可(避免内部div为内容添加边距导致浮动变化)，简洁！
三栏-中栏流动布局
负外边距法
原理：设置两个容器，一个包装所有三栏，另一个只包装左栏和中栏
主体部分（body）
<div id="wrapper">
<header></header>
<!-- 三栏包装 -->
<div class="threewrap">
<!-- 左栏和中栏包装 -->
<div class="twowrap">
<nav></nav>
<article></article>
</div>
<aside></aside>
</div>
<footer></footer>
</div>css主要部分
*{
margin: 0;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
nav{
float: left;
width: 160px;
background: rgb(38, 204, 140);
}
article{
width: auto;
margin-left: 160px; /* 左栏宽度 */
margin-right: 300px; /* 右栏宽度 */
background-color: aqua;
padding: 10px 0;
}
aside{
float: left;
width: 300px;
background: #3f7ccf;
padding: 20px 0;
}
.threewrap{
float: left;
width: 100%;
}
.twowrap{
float: left;
width: 100%;
margin-right: -300px; // 负的右栏宽度
}实现效果
全屏下
缩小页面
左栏和右栏宽度保持不变
单元格法
优点：单元格不需要浮动就可并排显示，应用内边距也不会破坏布局，任何没有明确设定宽度的栏都是流动的
主体部分除去所有div，只保留header、nav、article、aside、footer等
css部分
给nav、article、aside加上display: table-cell; 去除浮动等即可实现
*{
margin: 0;
padding: 0;
}
header{
background-color: #f00;
}
nav{
display: table-cell;
width: 160px;
background: rgb(38, 204, 140);
}
nav ul li{
list-style-type: none;
}
article{
display: table-cell;
width: auto;
background-color: aqua;
padding: 10px 0;
}
article .inner{
padding: 10px;
border: 1px solid black;
margin: 10px;
}
aside{
display: table-cell;
width: 300px;
background: #3f7ccf;
padding: 20px 0;
}
footer{
color: white;
text-align: center;
background: rgb(75, 29, 201);
}实现效果
全屏下
缩小页面
当出现多个article之类的时可以使用nth-child(n)分别为这些元素设置css格式
