前端攻城狮在拿到设计图，最开始做的事情是什么？布局？yup
定位：position
- position值
- static：默认方式，作为文档流的一部分，有行内元素（不会换行）和块级元素（独占一行）
- relative：相对位置，想对于此元素应该在的位置进行偏移，并且原来的位置也会被占据。发生偏移时，可能会覆盖其他元素（这个特性让我想起了z-index），当有元素需要在后来的元素之上时，
position:relative就很管用了 - absolute：绝对位置，脱离文档流，在文档流之上，元素不再占有文档流位置，想对于最近的position不为static的元素进行偏移（从此元素向上级找到的第一个position不为static的元素）
- fixed：固定位置，想对于视图区域进行固定
- sticky：css3新属性，这个属性，个人认为是relative属性相似（因为对此位置值不太，本人也很少使用...）
- 讲到了position属性就必定会想到偏移量属性
- left
- right
- top
- bottom
（注：这四个属性在position:static时，这四个属性不起作用。偏移量使用px的话，不同的web端会有兼容性问题，所有推荐使用rem或者百分比（百分比基准是父级的宽度））
浮动 float
- float就是脱离文档流的一种布局方式，但是它占文档位置。一般会使用在图片上，让文字围绕此图片。浮动元素会生成一个块级框，而不论它本身是何种元素（使用float时，最好定义此元素的宽度和高度）。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
- 敲黑板，画重点：
float：left|right与position:absolute区别
float：left|right属性与position:absolute属性都具有包裹性，两者都会使元素脱离文档流，但是，与absolute不同的是：float 的元素还会在文档流上占据一个位置。position:absolute的元素是根据最近的非static的父元素定位，如果没有，则根据最初的包含块定义（一般是body），关于float，也会脱离文档流，会被放置在其容器的左边或右边。 - 讲到元素浮动，就必须牵扯到清除浮动
- 当元素height:auto时，且容器内容中有浮动，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢到容器外部而影响整体布局；
// html代码
<div class="wrap">
<div class="content">我是浮动元素</div>
</div>
// css代码
.wrap {
font-size: 12px;
border: 1px solid gray;
color: #fff;
}
.content {
float: left;
padding: 15px;
background: blue;
}
float布局
- 清除浮动
（1）使用带clear属性的空元素：在浮动元素后使用一个空元素如<div class="clear"></div>，并且.clear{clear:both;}属性即可清理浮动
// html
<div class="wrap">
<div class="content">我是浮动元素</div>
<div class="clear"></div>
</div>
// css
.clear {
clear: both;
}
clear:both清除浮动
（2）使用CSS的overflow属性：给浮动元素的容器添加 overflow:hidden或overflow:auto可以清除浮动，
.wrap {
font-size: 12px;
border: 1px solid gray;
color: #fff;
overflow: hidden; // 添加
}
（3）使用CSS的:after伪元素
.wrap:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
（4）为容器设置高度height
布局display
- block：块级元素，占领一整行，可以设置width、height、margin、padding
- inline：行内元素，不占领一行，不可以设置width、height、只能设置左右的margin和padding，上下的margin和padding是不可以设置的
- inline-block：像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现，可以设置width和height；设置inline-block之后，会有空白，这个时候是因为空白符才显示的间隙，这个时候设置font-size:0就可以完美解决啦
- none：不显示
- inherit：继承，从父元素继承布局
- flex：flex布局，敲黑板，画重点。你们认真看看 阮一峰老师的flex布局
- table: 表格布局，类似于<table>，表格前后有换行
- inline-table：表格布局，类似于<table>，表格前后没有换行
- list-item：列表元素，类似于<li>
经常见到的几种布局
- 元素水平居中
- 行内元素水平居中：
text-align:center - 块级元素水平居中：
margin: 0 auto
- 元素垂直居中
- 单行文本垂直居中：
line-height - 文字和图片在一行中垂直居中：平时遇到文字和图片卸载一行，图片和文字不对齐，什么鬼，用这个属性就可以解决了
vertical-align:middle - 使用flex布局实现垂直居中
- 水平垂直居中
- 利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto
// html
<div class="wrap">
<div class="inner"></div>
</div>
// 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;
}
absolute+margin
- flex实现元素的水平垂直居中
设置容器属性justify-content:center;align-items:center - table-cell实现元素水平垂直居中
.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;
}
- 两栏布局
- float + margin
// html
<div class="left">固定宽度</div>
<div class="right">自适应</div>
// css
.left{
width: 200px;
height: 200px;
background: red;
float: left;
}
.right{
margin-left: 210px;
height: 200px;
background: yellow;
}
- 三栏布局
- float + margin
// html
<div class="wrap">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="center"></div>
</div>
// css
.float-left {
width: 200px;
float: left;
background-color: yellow;
height: 300px;
}
.float-right {
width: 200px;
float: right;
background-color: red;
height: 300px;
}
.center {
margin: 0 200px;
background-color: blue;
height: 300px;
}
- flex布局
感谢您的view，留个赞再走呗
- 感谢浏览姑娘的文章，来自一个写前端的姑娘！
