css 布局的几种方式
1、 标准流布局 (现在用得少)
所谓的标准：就是标签按照规定好默认方式排列，标准流是最基本的布局方式
1.1 块级元素
块级元素会独占一行，从上向下顺序排列
常用元素：div,hr,p,h1,ul,ol,form,table
1.2 行内元素
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
常用元素：span,a,i,em等
2、 浮动布局
2.1 浮动特性
1、脱标
(1)脱离标准普通流的控制(浮)移动到指定位置(动)
(2)浮动的盒子不再保留原先的位置
2、如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是相互贴靠在一起的(不会有缝隙，对比inline-block会有缝隙),如果父元素装不下这些浮动的盒子，多出的盒子会另起一行
3、任何元素都可以浮动，不管原先是什么模式，添加浮动之后具有行内元素的相似特性。
如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接给高度和宽度；如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。
2.2 浮动布局注意点
1、浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列到左右位置
2、一个元素浮动了，理论上其余的兄弟也要浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
2.3 清除浮动
1、由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
2、清除浮动的本质：清除浮动元素造成的影响，清除之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。
3、清除浮动的方法
清除浮动本质：清除浮动元素脱离标准流造成的影响
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
(1)额外标签法(隔墙法)
实际工作中不常用
在浮动元素末尾添加一个空的标签
通俗易懂，书写方便但是添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素
如<div style="clear"></div>
(2)父级添加overflow:hidden属性
overflow:hidden/auto/scroll
- 1
优点：代码简洁；缺点：无法显示溢出的部分
(3)父级添加after伪元素
方式是额外标签法的升级版
优点：没有增加标签，结构更简单；缺点：照顾低版本浏览器
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
(4)父级添加双伪元素
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3、 定位布局
3.1 静态定位 position:static
默认的定位方式，按照标准流摆放
3.2 相对定位 position:relative
1、元素在移动位置的时候，是相对于它原来的位置来说的
2、不脱标，继续保留原来的位置
3.3 绝对定位 position:absolute
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2、如果祖先元素有定位(相对、绝对、固定)，则以最近一级的有定位的祖先元素为参考点移动位置
3、绝对定位不再占有原先的位置(脱标)
子绝父相：大多数时候因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，因此是绝对定位
3.4 固定定位 position:fixed
1、以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系，不随滚动条滚动
2、固定定位不占有原先的定位
3.5 粘性定位 position:sticky
粘性定位是相对定位和固定定位的组合，跟页面滚动搭配使用，兼容性较差，IE不支持
1、以浏览器的可视窗口为参考点移动元素(固定定位特点)
2、粘性定位占有原先的位置(相对定位特点)
3、必须添加top、left、right、bottom其中一个才有效
3.6 定位的叠放顺序
数字后面不能加单位
只有定位的盒子才有z-index属性
3.7 定位的扩展
1、绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto 水平居中
left:50%;让盒子的左侧移动到父级元素的水平中心位置
margin-left:-××px;让盒子向左移动自身宽度的一半
垂直方向上同理
2、定位的特殊性
绝对定位和固定定位也和浮动类似
行内元素添加绝对或固定定位，可以直接设置宽高
块级元素加绝对定位或固定定位，如果不给宽高，默认大小是内部的大小
3、脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题
4、绝对定位(固定定位)会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，不会压住下面标准流盒子里面的文字(图片)，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素
但绝对定位(固定定位)会完全压住下面标准流的所有内容
四、伸缩盒布局
父元素中常用的属性display:flex 设置父元素是一个弹性盒，子元素会自动水平排列
flex容器：使用display:flex就是flex容器
项目：flex容器中的子元素就是项目，不包括孙子元素
默认主轴方向排列，即横向
flex-容器的属性:
(1)display属性
作用：指定flex属性 取值：flex | inline-flex
flex：将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100%
inline-flex：将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度
(2)flex-direction
作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
取值：row | row-reverse | column | column-reverse
row：默认值，主轴横向往右排列
row-reverse：主轴横向往左反向排列
column：垂直方向排列
column-reverse：垂直方向反向排列
(3)justify-content属性
作用：属性定义了项目在主轴上的对齐方式
取值：flex-start | flex-end |center | space-between | space-around
flex-start：默认的是从主轴开始位置对齐
flex-end：默认的是从主轴结束位置对齐
center：居中对齐，项目形成的总宽度不变
space-between：两端对齐，中间间隔宽度一样
space-around：所有项目的两侧间隔相等，主轴两端会留边
space-evenly：等分空余空间给每个元素
(4)align-items属性
作用：定义元素交叉轴上的对齐方式
取值：flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的开始位置对齐
flex-end：交叉轴的结束位置堆砌
center：交叉轴居中
baseline：基线对齐，文字第一行对齐
stretch：（单词意思是弹性、拉伸）默认值！！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）如果flex-item没有设置高度，那么flex-item的高度不像以前那样他的高度由内容决定，而是他的高度会拉伸和父元素一样。
(5)flex-wrap 作用：描述如果一个轴线排列不下，如何换行
取值：nowrap | wrap | wrap-reverse
nowrap：默认不换行，会压缩子元素
wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方
(6)flex-flow
作用：是flex-direction和flex-wrap和合并缩写形式
取值：flex-direction || flex-wrap
//下方写法一和写法二效果一样：
// 写法一
.box {
flex-flow: row wrap;
}
// 写法二
.box {
flex-direction: row;
flex-wrap: wrap;
}
(7)align-content
作用：定义了交叉轴线上的排列方式
说明：如果项目只有一个轴线（一行），该属性不起作用，如果wrap换行了，那么才有作用
取值：flex-start | flex-end | center | space-between | space-around | stretch
flex-start：所有轴线都是从头开始，交叉轴开始位置开始，主轴横轴的话，就是上对齐
flex-end：从尾开始，交叉轴结束位置开始
center：所有从中间开始
space-between：多条轴线上下两端对齐
space-around：多条轴线上下两端分散对齐，上下两侧留白
space-evenly：等分空余空间给每个元素
stretch：默认!高度自动填充拉伸
这里参考justify-content 看看吧，只不过把主轴换成了交叉轴
(8)Flex-项目的属性:
六个属性定义在项目上：order、flex-grow、flex-shrink、flex-basis、flex、align-self
order属性:
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性:
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性：
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis属性：
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性：
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性：
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
五、栅格布局(框架)
5.1响应式开发原理：
1、 利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
2、响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
5.2优点：
1、标准化的html+css编码规范
2、提供了一套简洁、直观、强悍的组件
3、有自己的生态圈，不断的更新迭代
4、让开发更简单，提高了开发的效率
5.3使用Bootstrap步骤：
1、创建文件夹结构
2、创建html骨架结构
3、引入相关样式文件
4、书写内容
直接拿bootstrap预先定义好的样式来使用
修改bootstrap原来的样式，注意权重问题
学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
5.4布局容器
1、container类
响应式布局的容器 固定宽度
大屏(>=1200px)宽度为1170px
中屏(>=992px)宽度为970px
小屏(>=768px)宽度为750px
超小屏(100%)
2、container-fluid类
流式布局容器 百分百宽度
占全部视口的容器
适合于单独做移动开发