css布局

什么是布局

• 文档流不能够满足人们的需求

单栏布局

• 网站大部分都是单栏布局
• 一栏布局(通栏)

width和max-width的区别

• width会使得块级元素固定宽度
• max-width会使得宽度进行自适应

双列布局

• 一列固定宽度，另一列自适应宽度
• 如简书app

三列布局

水平单列布局

flex布局

grid布局

• 一个全新的技术

移动端布局

1. 设置meta
2. 媒体查询 or 动态 em

元素居中

水平居中

####text-align

• 在父元素设置text-algin ,使得文字图片变为水平居中

margin

• 加一个Width然后加上margin：0 auto

垂直居中

绝对定位居中

• margin-left和margin-top相当于水平向左移动中和垂直向下移动
• 有前提：宽度和高度都是固定的
• 这时候可以用transform:translate(-50%,-50%)

vertical-align:实现居中

地址

实例

.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box img{
  vertical-align: middle;
  background: blue;
}

table cell实现居中

.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box img{
  vertical-align: middle;
  background: blue;
}

#响应式 媒体查询
自从有了屏幕属性就可以使用媒体查询了

@media screen and(max-width:990px){

}

当屏幕宽度不超过990px的时候

orientation: landscape

当他变为横屏的时候，下面的条件有效

如何引入media

两种常用的引入方法

link方法引入

@media进行引入

@media screen and(min-width:500px)

@media

@media也需要看选择器的次序，媒体查询只能看是否生效

• 媒体查询一般放在下方

bosttrap 框架

width: calc(33.33% - 2px)

屏幕宽度的百分之三十三减去2px

实现一个两栏布局，左侧固定宽度200px，右侧自适应宽度，附上预览链接。 效果如图

demo

实现一个三栏布局，两侧固定宽度200px，中间宽度自适应撑满，附上链接。效果如下

demo

css reset 是什么？css 预编译器是什么？ 后编译器(post css)是什么？

• css reset 即重置浏览器标签的样式表

• css 预编译器CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了 一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
  CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
  目前主流的预处理器里最常用的三种有：Sass，Less ，Stylus 。

• 后编译器

  PostCSS是一个使用JavaScript插件来转换CSS的工具。它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。

实现如下居中方式，并附上 Demo 链接 要求：块级元素固定宽度，水平居中

demo

实现如下居中方式，并附上 Demo 链接要求：大段文字在容器内水平垂直居中

demo

实现如下居中方式，并附上 Demo 链接

要求：并列三个按钮，在父容器内水平居中

demo

• 你的ul要display 成inline-block,然后header要text-align :center
• ul默认是块级元素，独占一行。你的before占了高度100%，所以按钮跑到下面去了。

实现如下居中效果， 要求：图片在容器内水平垂直居中，容器宽高大于图片宽高

demo

实现如下居中方式要求： 固定宽高的块在浏览器窗口水平垂直居中

demo

实现如下居中方式要求： 不定宽高的块在浏览器窗口水平垂直居中

demo