Css 布局
html文档的正常文档流应该是所有块级元素从上往下依次排列，所有行内元素沿着行间排列。css可以改变这种布局得到我们想要的布局样式。
一、css语法
selector {property: value} 即 选择器{属性：值} 属性和值也是一条css声明。一个选择器可以有多条声明，相同声明以后出现的为准。
css引入可以行内直接写style、link和@import，区别分别是什么
1、行内优先级最大 2、link是html的标签，@import是css的语法，2.1以上 3、link的加载时间是页面被加载的时候加载，@import是css加载好开始解析加载。
header中 ：<link rel="stylesheet" href="CSSurl路径" />
html中：<style type="text/css">
@import url(CSS文件路径地址);
</style>
css中 @import url(CSS文件路径地址);
二、css选择器
选择器有类别选择器、标签选择器、id选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器
串联选择器
.class1.class2{} 不同于后代选择器
后代选择器
.class1 .class2{}
子选择器
.class1 > .class2{}
伪类选择器
a:hover{} a:link{}
通用选择器
*{}
群组选择器
p,h1,div{}
选择器之间的优先级和权重
内联style：1000， ID：100， 类选择器：10， 标签选择器：1 ！important：最高
三、css关系选择符、伪类和伪元素
关系选择符
包含选择符 E F 选择所有被E元素包含的F元素
子选择符 E > F 选择所有作为E元素的子元素F
相邻选择符 E+F 选择紧贴在E元素之后F元素
兄弟选择符 E~F 选择E元素所有兄弟元素F
伪类和伪元素的区别
伪类就是假的类、伪元素是假的元素 伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息 伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式
伪类
1）表示状态：
:link 选择未访问的链接；:visited 选择已访问的链接；
:hover 选择鼠标指针移入链接；
:active 被激活的链接，即按下单击鼠标左键但未松开；
:focus 选择获取焦点的输入字段；
2）结构化伪类：
:not 否定伪类，用于匹配不符合参数选择器的元素；
:first-child 匹配元素的第一个子元素；
:last-child 匹配元素的最后一个子元素；
:nth-child :nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数（an+b最大数为匹配元素的个数）；
:target 当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素；
3）表单相关伪类：
:checked 匹配被选中的input元素，这个input元素包括radio和checkbox；
:default 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮；
:disabled 匹配禁用的表单元素
伪元素
::before/:before 在某个元素之前插入一些内容；
::after/:after 在某个元素之后插入一些内容；
::first-letter/:first-letter 为某个元素中的文字的首字母或第一个字使用样式；
::first-line/:first-line 为某个元素的第一行文字使用样式；
####四、css继承
css样式表继承指的是，特定的css属性向下传递到后代元素
可继承属性
1、字体系列属性
font-family：规定元素的字体系列、
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font：组合字体、
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与
"font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。
2、文本系列属性
color：文本颜色
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
text-indent：文本缩进
letter-spacing：增加或减少字符间的空白（字符间距）text-transform：控制文本大小写 direction：规定文本的书写方向
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
无继承的属性
1、display
2、文本属性：vertical-align：text-decoration： text-shadow：white-space：unicode-bidi：
3、盒子模型的属性:宽度、高度、内外边距、边框等
4、背景属性：背景图片、颜色、位置等
5、定位属性：浮动、清除浮动、定位position等
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after
所有元素可以继承的属性：
1、元素可见性：visibility、opacity 2、光标属性：cursor
内联元素可以继承的属性:
1、字体系列属性 2、除text-indent、text-align之外的文本系列属性
块级元素可以继承的属性:
1、text-indent、text-align
五、css布局模型
#####文档流模型、盒模型、浮动布局、定位布局（position）、flex布局、栅格布局、grid布局、table布局
1、默认文档流布局 按照块级元素独占一行，行内元素一行分配来布局。 控制布局的属性 display 每个元素都有一个默认的display属性， 如div，p默认为display：block， script默认为display：none， span，img ，a默认为display：inline。 inline和inline-block、block的区别:
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
2、盒模型布局
每个html标签都可以看做是一个盒子，它具有content，border，padding，margin这些属性，
在标准盒模型里面，width和height不包含border和padding。
在ie盒模型（也叫怪异盒模型）里面，width和height包含border和padding。
要统一这种盒模型的话，可以用box-sizing：border-box （统一为ie盒模型）
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
3、float属性
float属性会让元素会脱离文档流原本的排列顺序也沿着行间排列，这就是浮动，但是会造成一系列影响其他布局的效果。
浮动元素引起的问题和解决办法
BFC是当元素脱离文档流的时候，我们需要为它创建一个块级格式化上下文，即像块级元素一样排列在文档流中。详情见css-BFC
4、定位布局
决定元素的定位机制 position属性
positon默认值为static，即正常出现在文档流中。
position：relative，相对定位，元素会相对于其正常位置进行定位
position：absolute，绝对定位，元素会相对于离他最近的relative的元素定位
position：fixed，固定定位，相对移动坐标是浏览器视图
六、flex布局
flex解决了传统布局三大痛点，排列方向，对齐方式，自适应尺寸。
flex布局由flex容器和flex容器成员组成。 第一步：设置容器组件，display：flex或者inline-flex 第二步：容器组件下的子元素自动成为容器成员 容器默认存在两根轴，水平的主轴和垂直的交叉轴 容器的属性
flex-direction
flex-wrap
flex-flow：direction和wrap的简写
justify-content
align-items
align-content
1、flex-direction：主轴的方向
flex-direction:row|row-reverse
colum|colum-reverse
水平（左到右）水平（右到左）
垂直（上到下）垂直（下到上）
2、align-items: 交叉轴的对齐方向
align-items: flex-start | flex-end | center
baseline | stretch;
向上对齐、向下对齐、居中对齐
项目第一行文字对齐、沾满整个容器高度
3、flex-wrap：换行方式
flex-wrap: nowrap | wrap | wrap-reverse
不换行、第一行在上方、第一行在下方
4、justify-content：项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center
space-between | space-around;
开始对齐，结束对齐，居中对齐
两端对齐、空格around对齐
5、align-content：多根轴线对齐方式
align-content：flex-start | flex-end | center
space-between | space-around | stretch
容器成员属性
1、order：整数 和index作用差不多，决定排列前后顺序，数值越小排列越前
2、align-self：允许单个项目有自己独特的排列样式
align-self: auto | flex-start | flex-end | center | baseline | stretch
七、栅格布局
bootstrap栅格布局是一套响应式布局，通过定义容器大小，平分12份，再调整内外边距，结合媒体查询，就制作出了强大的响应式网格系统。 1、创建栅格系统的容器 用div.container div.row 创建容器
<div class="container-fluid">
<div class="row">
...
</div>
</div>
bootstrap里面相应的css元素
.container{
padding-left:15px;
padding-right:15px;
margin-left:auto;
margin-right:auto;
}
//不设置媒体查询container宽度的话，则为100%宽。
@media (min-width:768px){
.container{
width:750px;
}
}
@media (min-width:992px){
.container{
width:970px;
}
}
@media (min-width:1200px){
.container{
width:1170px;
}
}
2、创建子元素
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
Bootstrap把每一行分成12等份，“col-md-数字”中的“数字”从1-12中取，数字等于几，就占几份。
3、除了.col-md类
.col-xs- 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；
.col-sm- 屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；
.col-md- 屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；
.col-lg- 屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；
####八、静态布局、自适应布局、流式布局、响应式布局、弹性布局
1、静态布局
页上的所有元素的尺寸一律使用px作为单位,如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端.
2、自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，
页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
布局特点:屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
设计方法:使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式
3、流式布局
流式布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统 网格系统
4、响应式布局
布局特点:每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变
设计方法:媒体查询+流式布局
5、弹性布局
rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素
使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示
####九、实现两栏布局、三栏布局
####十、实现水平和垂直居中
至少三个方法
一、flex 布局
父div：display：flex；justfy-content：center；aline-items：center；
二、定位布局、子元素大小固定
三、定位布局、子元素不固定的情况
父元素：position:relative;
子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);
四、table布局
div.wrapper{
display:table-cell;
text-align:center;
vertical-align:middle;
}
用translate 和 性能比较
####一、css3新特性
渐变
过渡
2D变化
3D变化
动画
####二、css中样式百分比都是相对于谁
正常文档流和浮动都是相对于父元素的content-box
绝对定位时相对于相对包含块的padding-box
####三、css中的单位px em rem vh vw % vm
px em rem vh vw %
px: 像素
em：相对长度单位、参考物是父元素的font-size
rem：相对长度单位、参考物是body的font-size
vh、vw：相对视口（viewport）的高度、宽度而定的，长度等于视口宽高度的1/100
%：一般来说就是相对于父元素
vm：
rem 、em 计算方法
假设body的font-size= 12px，1rem = 12px；
####四、CSS浏览器兼容 hack技巧
####五、浏览器的标准模式和怪异模式
在W3C标准出现之前，不同浏览器或者同一浏览器不同版本在页面渲染上没有统一规范，产生了怪异模式，标准出现以后，有了统一的标准即标准模式。 标准模式和怪异模式的区别：
1、盒模型的处理
2、行内元素的垂直对齐
浏览器如何选择模式对页面进行渲染？
一般HTML文档的头部会有文档类型声明：DOCTYPE，当遇到正确的文档类型声明时，浏览器会按照标准模式进行解析，当遇到没有文档声明的html时，浏览器会认为是一个旧的文档，使用怪异模式解析和渲染文档。