布局类型、清除浮动、垂直居中（定高、不定高）解决
基于盒模型的传统布局
1. 文档流布局：块级元素占据一行，行内元素共享一行，按顺序一个个显示。
2. 浮动布局：使用float属性使标签元素脱离文档，后面的元素占据原来的位置，并按文档流显示。
浮动带来的问题： 默认希望是子元素的高度撑起父元素的高度，但由于子元素设置了浮动，父元素没有高度，会造成
父元素的高度塌陷。
清除浮动带来的影响：
- 在父元素内部添加一个不浮动烦人空元素，并设置样式clear:both。
- 设置父元素的样式：overflow:hidden，触发BFC（Block Formatting Context)。开启BFC的元素不能被浮动元素覆盖，可以包含浮动元素。
- 父元素使用伪类清楚浮动：给父元素添加一个clearfix类。
.clearfix:after{
content:"";//伪类必须还有content，这里设置为空的content
display:block;
clear:both;
}
3. 定位布局：使用position:absolute/relative/fixed/static(默认)来实现绝对、相对布局
弹性布局(flex)
flex布局是css3里面加入的布局方式，ie9不支持。webkit内核的浏览器需要加上webkit的前缀。
父元素作为容器，需要设置display:flex样式。使用flex布局的容器内部的子元素的float、clear、vertical-align属性
都将失效。
容器（父元素）可以设置的属性：
- flex-direction: row | row-reverse | column | column-reverse;设置容器主轴的方向
- flex-wrap: nowrap | wrap | wrap-reverse;设置轴线上，当子元素拍不下，如何显示。
- flex-flow: flex-direction || flex-wrap;为flex-direction和flex-wrap的简写方式，默认为：row nowrap.
- justify-content: flex-start | flex-end | center | space-between | space-around;设置项目（子元素）在主轴上的对齐方式。
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;子元素存在多根轴线才起作用，（子元素也是用弹性布局？）
- align-items: flex-start | flex-end | center | baseline | stretch;定义项目在交叉轴上如何对齐
项目（子元素）可以设置的属性： - order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
- flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。 - flex-basis: length | auto; /* default auto */。定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
实现一个div水平垂直居中，方法一：使用定位来做。方法二：使用flex布局处理（容器主轴方向垂直，justify-content
为center)
不固定高度div垂直居中(非flex布局)
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>haorooms不固定高度div写法</title>
<style>
.center {
position: fixed;
top: 50%;
left: 50%;
background-color: #000;
width:50%;
height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="center">不兼容ie8</div>
</body>
网友评论