前端攻城狮在拿到设计图,最开始做的事情是什么?布局?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,留个赞再走呗
- 感谢浏览姑娘的文章,来自一个写前端的姑娘!
网友评论