html5 css3应用6,HTML5&CSS3——让你的页面美如画（6）

4.CSS布局

(1)自动布局(默认文档流)

HTML+CSS元素配合搭建页面框架称为布局。

默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下：

元素在页面中的显示顺序与元素在代码中出现的顺序是一致的；

块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定；

行内元素与其他元素共享一行空间，宽高由其内容所决定。

通过为display属性指定值block, inline ,inline-block等可以改变元素在正常流中的表现形式，使元素在块和行内元素之间相互转化，提高布局的可操作性。

(2)浮动布局

浮动布局的主要用法是为了让块级元素在一行中显示(列级布局)，设置float属性使得元素脱离文档流浮动显示，float属性有以下取值：

left：向左浮动元素

right：向右浮动元素

none：【默认值】，不浮动

inherit：浮动方式继承父元素

脱离文档流的元素有以下特点：

宽度高度默认由内容决定

原先所在位置就会被其他块元素抢占

浮动元素在一行中依次排列，当一行无法容纳的时候会自动换行

应用：

左侧浮动，右侧不浮动(适用于两列布局)

.content > .left{

float:left;

width:220px;

}

.content > .right {

margin-left:230px;

}

全部浮动(适用于多列布局)

ul> li {

float:left;

with:计算及自定义设置;

}

ul::after {

display:block;

content:"";

clear:both;

}

(3)定位布局

定位布局分为静态定位和相对定位，常用于模态框、下拉菜单、二级菜单、固定宣传栏、网页聊天页面等。

静态定位是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中，默认设置为position: static;。

相对定位与静态定位相似。相对定位的元素我们可以通过属性top, bottom, left, right来改变元素最终的位置。元素移动的时候是相对于当前元素所在的位置进行移动的，默认设置为position: relative;。

position有以下取值：

relative：定位元素(相对定位)，没有脱离文档流，参照点为当前元素原本的位置

absolute：定位元素(绝对定位)，脱离了文档流，参照距离当前元素最近的父定位元素，如果所有的父元素都没有定位元素，参照浏览器视口

fixed：定位元素(固定定位)，脱离了文档流，参照浏览器视口

sticky：定位元素(粘滞定位)，不脱离文档流，relative 和fixed的结合，如设置元素样式为top:100px，则当前元素距离浏览器视口顶端为100px的时候，体现fixed的特点，其余情况体现relative的特点

(4)伸缩盒布局

伸缩盒布局可以理解为自适应布局，它能够使得元素的宽高随显示范围(浏览器视口)的改变而做出特定调整，一般应用于响应式布局(手机app)。

当父元素设置为伸缩盒布局(display : flex;)时：

布局形式为列布局，默认主轴为X轴(flex-direction: row;)，默认交叉轴为Y轴，元素会沿着主轴方向排列(横向排列)，元素默认高度将沿交叉轴方向占满父元素高度；

当设置flex-direction: column;时，布局形式为行布局，主轴变为Y轴，元素将沿主轴方向排列(纵向排列)，元素默认宽度将沿交叉轴方向占满父元素宽度。

flex-wrap用于设置子元素宽度之和大于父元素时是否换行，默认值为nowrap不换行，设置为wrap时换行。

flex的样式表：

flex-basis：主轴上元素的基础值(宽/高)

flex-grow：对盈余空间的分配

flex-shrink：对亏损空间的贡献

flex: grow shrink basis; 速写(且如flex:1;表示flex:1 1 0;)

应用：

等比例划分

section {

display: flex;

}

article {

flex: 1;

}

article:nth-of-type(3) {

flex: 2;

}

父元素section为一个伸缩盒子容器，article各占一份，第三个article占2份。假如共有3个article，第一个、第二个article占1/4，第三个占1/2。

剩余部分等比例划分

section {

display: flex;

}

article {

flex: 1 200px;

}

article:nth-of-type(3) {

flex: 2 200px;

}

父元素section为一个伸缩盒子容器，每个article的宽度至少200px，对于屏幕的剩余部分，article各占一份，第三个article占2份。假如共有3个article，第一个、第二个article占1/4，第三个占1/2。

原文：https://www.cnblogs.com/wodeqiyuan/p/11312039.html