CSS中的布局方式

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
           

优点：代码简洁；缺点：无法显示溢出的部分

(3)父级添加after伪元素

方式是额外标签法的升级版

优点：没有增加标签，结构更简单；缺点：照顾低版本浏览器

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	*zoom:1;
}
           

(4)父级添加双伪元素

.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}
           

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 看看吧，只不过把主轴换成了交叉轴
           

Flex-项目的属性:

项目的属性规定的是项目在flex容器中的属性

order

flex-grow 可以设置三个值，第一个值为占比，第二个值为缩小比例(当子元素宽度和超过总宽度时可设置)，第三个值为设定的最小宽度。

flex-shrink

flex-basis

flex

align-self (1)order

作用：定义项目的排列顺序

取值：integer (2)align-self

作用：允许项目有和其他项目不一样的对齐方式，可以覆盖父元素的align-items属性

取值：和align-items多了个auto

默认值为auto，表示继承align-items属性 (3)flex-grow

作用：定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大。

取值：> 0

默认值为0，默认不会自动放大

如果都设置为1，那么所有项目会平分剩余的空间

如果有三个元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。

如果有三个元素，一个width设置为200，剩余都为1，那么剩余的会平分固定宽度200之外的空间

最终尺寸不得大于max-width和max-height (4)flex-shrink

作用：定义项目的缩小比例，和grow相反

取值：>0

默认值为1，默认会自动缩小

如果所有项目都为1，当空间不足时候，都会等比例缩小

如果有一个项目为0，其他都为1，当空间不足时候，0不变，1都缩小

最终尺寸不得小于min-width和min-height (5)flex-basis

用来设置flex items在主轴方向上的base size

auto 默认值、具体的宽度数值

决定flex items最终base size的因素、优先级从高到低

max-width|max-height|min-width|min-height

flex-basis

width|height

内容本身的size (6)flex

作用：flex-grow、flex-shrink、flex-basis的简写

默认值：0 1 auto；

单值语法：值必须为以下其中之一：

​ 1、一个无单位数：他会被当做flex-grow的值。

​ 2、一个有效的宽度值:他会被当做flex-basis的值。

​ 3、关键字none,auto或initial。

双值语法：第一个值必须为无单位数，并且它会被当做flex-grow的值

​ 第二个值必须为以下之一：

​ 1、一个无单位数：它会被当做flex-shrink的值。

​ 2、一个有效的宽度值：它会被当做flex-basis的值。

三值语法：

​ 第一个值必须为一个无单位数，并且它会被当作flex-grow的值。

​ 第二个值必须为一个无单位数，并且它会被当作flex-shrink的值。

​ 第三个值必须为一个有效的宽度值，并且它会被当作flex-basis的值。

五、栅格布局(框架)

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类

流式布局容器 百分百宽度

占全部视口的容器

适合于单独做移动开发