饥人谷学习第11天
什么是布局
现有样式
- 文档流
- 浮动
- 定位
不能满足人们的需求
人们需要 - 导航栏+内容
- 导航栏+内容+广告栏
- 从上到下、从左到右、定宽、自适应...
-
单列布局
一栏布局
一栏布局(通栏)
实现方式:定宽+水平居中
注意:max-width和width的差别 -
双列布局
一列固定宽度,另一列自适应
实现方式:浮动+普通元素margin
注意:浮动元素要写到前面先去渲染 -
三栏布局
类似双栏布局 -
水平等距排列
用到了浮动和负margin -
圣杯布局
-
双飞翼布局
-
流式布局
-
弹性布局flex
Flexbox为CSS提供了强大的弹性布局方式
适合移动端场景 -
grid布局
-
移动端布局
设置meta
适配 媒体查询 or 动态 rem
元素居中
水平居中
- text-align
在父元素上设置text-align: center
式文字/图片水平居中 - margin
块级元素设置宽度,左margin和右margin设置为相同
垂直居中
-
绝对定位实现居中
绝对定位之后设置left: 50%
和top: 50%
以及margin-left: 负自身宽度的一半
和margin-top: 负自身高度的一半
前提:高度和宽度是固定的
高度宽度不确定的前提下可以用transform: translate(-50%, -50%)
- vertical-align实现居中
.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
然后给box里要垂直居中的文字/图片设置 vertical-align: middle;
- table-cell居中
.box{
width: 300px; /* 宽度不加的话会自动收缩 */
height: 200px;
border: 1px solid ;
display: table-cell; /* 不是块级元素 */
vertical-align: middle;/* 对表格元素的居中特别明显 */
text-align: center;
}
- display: flex
.space { /* 父元素 */
width: 100vw;
height: 100vh; /* 设置宽高以显示居中效果 */
display: flex; /* 弹性布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
flex讲解:https://blog.csdn.net/linda_417/article/details/51507176
媒体查询
响应式布局以及响应式布局的引入
资料:http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6/HTML5%E5%92%8CCSS3/media_query.html
网友评论