css简单布局
1.左右布局
常用左边固定，右边自适应
实现这样的布局，我们可能会有如下方法：
- 浮动布局
- flex布局
- grid布局
新建一个HTML页面，结构如下：
<div class="wrapper">
<div class="list">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</div>
<div class="context">
内容内容
</div>
</div>
浮动布局
.list {
float: left;
width: 200px;
}
.context {
border-left: 200px solid #999;
height: 500px;
}
flex布局
.wrapper {
display: flex;
}
.list {
width: 200px;
background: #999;
}
.context {
flex: 1;
height: 500px;
}
grid布局
.wrapper {
display: grid;
grid-template-columns: 200px auto;
}
.list {
background: #999;
}
.context {
height: 500px;
}
::子元素添加float: left; 父元素添加class=“clearfix”::
2.左中右三列布局
1、浮动法（float与absolute区别在第二点）
浮动法的原理：
对### 左右块使用分别使用### float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。
注意：
middle位置要求：middle块一定要放在left和right之后，因为它占据文档流位置，所以一定要放在最后
新建一个html 页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 浮动</title>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="middle">middle</div> <!--注意middle块的位置，虽然写在right后面，但是在布局效果中出现在中间 -->
</div>
</body>
</html>
css样式
#left,#right{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left {float: left;} //左边块左浮动
#right{float: right;} //右边块右浮动
#middle{height: 200px; background-color: #a0b3d6;}
[image:2A3B18BC-1D0D-49EB-B3E6-1F8D08298535-53541-000141F27CBFB569/20181002174820212.png]
2、绝对定位
这种方法就是利用了绝对定位absolute，让左右两块脱离文档流，此时left和right与文档流无关，不占据空间。定位的元素和其他元素重叠。此处的left是叠在middle上的。
方法1和2的区别：
在CSS中也可以通过float或者position:absolute两种方法让元素脱离文档流。而这两者的表现实际上非常相似。简单的可以理解为部分无视和完全无视的区别：::使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置（即在文档流中占位置），环绕在周围(可以说是部分无视)。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(不占位置)。::
css样式
#left{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
top: 0;
left: 0; //注意这里
}
#middle{
height: 200px;
background: red;
text-align: center;
}
#right{
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 0;
right: 0; //注意这里
}
[image:EC539438-4181-4FF6-90E4-51965E50B6FE-53541-0001422AA09F664E/20181002181128307.png]
3、marign负值法
该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
要求：在middle外部再加一个div。此div需要设置float属性使其形成一个BFC（请自行百度 点击跳转 ），并设置宽度，并且这个宽度要和left块的margin负值进行配合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 marign负值法</title>
</head>
<body>
<div id="div">
<div id="middle">middle</div> <!-- middle必须放在最前面 -->
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
相应css
#div{
width: 100%;
height: 200px;
background: green;
float: left; /*记得是包含middle外层的div写啊*/
}
#middle{
height: 100%;
background: red;
}
#right,#left{
width: 200px;
height: 200px;
float: left; /*左右块浮动*/
}
#left{
background: yellow;
margin-left: -100%; /*-100%是因为相对来说它偏移到下一行去了*/
}
#right{
background: blue;
margin-left: -200px; /*这里的宽度一定要设置成等于负的包含middle的那个块的宽度*/
}
[image:84778F59-8F70-481A-9427-B5C6173637AD-53541-0001425CBF7857E3/2018100218223856.png]
4. css3新属性flex方法
flex相关的请移步 flex属性简介
写一个<div>，在flex中类似于容器，
将left、right、middle全部包进去
并设div的display：flex。
middle块的样式中加上flex：1（或者auto）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三列自适应布局 css3新属性flex方法</title>
</head>
<body>
<!-- 写一个的div包含left、right、middle，设置为display：flex；并将middle设置flex：1； -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>
#box{
width: 100%;
height: 200px;
display: flex;
}
#left,#right{
width: 200px;
height: 200px;
background: pink;
}
#middle{
flex: auto; /* flex属性是flex-grow（项目放大比例）, flex-shrink（缩小比例） 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选*/
background: skyblue;
}
[image:C6E1DF0D-F7BC-478D-994F-38E8754DA645-53541-0001427854259E08/20181002183109178.png]
3.水平居中
text-align: center.
只要父级的div设置了这个属性，里面的文字就会居中（包括图片）,这个属性只对行内元素起作用。如果想要居中的是块级元素，它就无能为力了，要么把这个块级元素display: inline-block;要么换另一种方法。
.box-wrap {
text-align: center;
}
.box {
display:inline-block;
}
4.垂直居中
1、absolute，margin: auto
.container {
position: relative;
}
.content {
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
注意: 当没有指定内容块的具体的高度和宽度时，内容块会填满剩余空间。可以通过使用max-height来限制高度，也可以通过 display:table 来使高度由内容来决定，但是浏览器支持不是很好。
2、relative，left top 50%，负margin-left margin-top
.isNegative {
position: relative;
width: 200px;
height: 300px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -150px;
}
缺点:需要知道具体的高度和宽度
3、relative，left top 50%，transform: translate(-50%,-50%)
.content {
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
这里translate的百分比是相对于自身的，所以高度是可变的
4、Table-Cell
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
</div>
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
注意: 需要添加最内层的div，并且给div指定宽度和margin:0 auto;来使div居中。
5、Inline-Block
html
<div class="Center-Container is-Inline">
<div class="Center-Block">
<!-- CONTENT -->
</div>
</div>
css
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
- 空内容也会占据一定空间，需要margin-left:-0.25em;来抵消偏移
- 内容块的最大宽度不能是100%，否则会把::after的内容挤到下一行
6、Flex
html
<div class="contain">
<div class="content">
// content
</div>
</div>
css
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
最方便最简单的方式，但是要注意浏览器的支持
7、display:flex和margin:auto
.box8{
display: flex;
text-align: center;
}
.box8 span{
margin: auto;
}
8、display:-webkit-box
.box9{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center；
}
9、display:-webkit-box
这种方法，在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮动，并显示在中间。
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}
- 优点：
适用于所有浏览器
没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现 - 缺点：
唯一的就是需要额外的空元素了。
网友评论