一 网页布局方式

#1、什么是网页布局方式

布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad 等等

而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的

#2、网页布局/排版的三种方式

2.1、标准流2.2、浮动流2.3、定位流

二 标准流

标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

# 1 浏览器默认的排版方式就是标准流排版方式

# 2 在CSS中将元素分为三类：分别是

块级

行内

行内块级

# 3 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版

垂直排版，如果元素是块级元素，那么就会垂直排版

水平排版，如果元素是行内元素或行内块级元素，那么就会水平排版

代码演示：

div,h1,p {

border: 1px solid red;

}

span，strong,b {

border: 1px solid #000;

}

我是标题

我是段落

span

我是强调

我是加粗

三 浮动流

1、浮动流是一种半脱离标准流的排版方式。

那什么是脱离文档流？

什么又是半脱离文档流？

1.1 什么是脱离文档流？

### 浮动元素脱离文档流意味着

1、不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版

2、无论是什么级的元素都可以设置宽高

综上所述，浮动流中的元素和标准流总的行内块级元素很像

代码演示：

* {

margin: 0;

padding: 0;

}

/*

不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版：span和p都显示到一行

无论是什么级的元素都可以设置宽高：span这种行内元素也可以设置宽高

*/

.box1 {

width: 100px;

height: 100px;

background-color: red;

float: left;

}

.box2 {

width: 100px;

height: 100px;

background-color: blue;

float: left;

}

我是span

我是段落

### 浮动元素脱标文档流意味着

1、当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

2、如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素

代码演示：

浮动元素脱标

.box1 {

float: left;

width: 100px;

height: 100px;

background-color: red;

}

.box2 {

width: 150px;

height: 150px;

background-color: blue;

}

注意点：

1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值

2、一旦使用了浮动流，则margin:0 auto;失效

* {

margin: 0;

padding: 0;

}

.header {

width: 930px;

height: 100px;

border: 1px solid #000;

margin: 0 auto;

}

.logo {

width: 100px;

height: 50px;

background-color: yellow;

float: left;

}

.nav {

width: 300px;

height: 50px;

background-color: green;

float: left;

/*失效*/

margin: 0 auto;

方式一：修改显示方式为inline-block

.box1 {

display: inline-block;

width: 100px;

height: 100px;

background-color: red;

}

.box2 {

display: inline-block;

width: 100px;

height: 100px;

background-color: blue;

/*

当设置box2的margin-left足够大时，第二个盒子就靠右面显示了

但是当浏览器界面缩小时，box2由于左边的margin-left不够930，则必须换一个新行显示，就无法让两个盒子处于一行

*/

margin-left: 930px;

}

方式二：用浮动的方式

.box1 {

display: inline-block;

width: 100px;

height: 100px;

background-color: red;

float: left;

}

.box2 {

display: inline-block;

width: 100px;

height: 100px;

background-color: blue;

float: right;

}

1.2 那什么又是半脱离文档流？

脱离分为：半脱离与完全脱离，

其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样

而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：

(1)同一个方向上谁先浮动，谁在前面

(2)不同方向上左浮动找左浮动，右浮动找右浮动

浮动元素排序规则

.box1 {

float: left;

width: 100px;

height: 100px;

background-color: red;

}

.box2 {

width: 150px;

height: 150px;

background-color: blue;

}

.box3 {

float: left;

width: 250px;

height: 250px;

background-color: yellow;

}

.box4 {

width: 300px;

height: 300px;

background-color: rebeccapurple;

}

浮动元素排序规则

.box1 {

float: left;

width: 100px;

height: 100px;

background-color: red;

}

.box2 {

float: left;

width: 150px;

height: 150px;

background-color: blue;

}

.box3 {

float: left;

width: 250px;

height: 250px;

background-color: yellow;

}

.box4 {

float: left;

width: 300px;

height: 300px;

background-color: rebeccapurple;

}

1.3 浮动元素贴靠问题

当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示

当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素

直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

浮动元素贴靠问题

.father {

width: 400px;

height: 400px;

border: 1px solid #000;

}

.box1 {

float: left;

width: 50px;

height: 300px;

background-color: rebeccapurple;

}

.box2 {

float: left;

width: 50px;

height: 100px;

background-color: green;

}

.box3 {

float: left;

width: 250px;

/*width: 300px;*/

/*width: 310px;*/

/*width: 400px;*/

height: 100px;

background-color: red;

}

1.4 浮动元素字围现象

没有浮动文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围

浮动元素字围现象

img {

float: left;

width:300px;

}

p {

background-color: #b9950c;

}

迪丽热巴(Dilraba)，1992年6月3日出生于新疆乌鲁木齐市，中国内陆影视女演员。2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。2014年，她主演了奇幻剧《逆光之恋》。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖。2016年，其主演的现代剧《麻辣变形计》播出；同年，她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖。2017年，迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名。2018年 ...

迪丽热巴(Dilraba)，1992年6月3日出生于新疆乌鲁木齐市，中国内陆影视女演员 [1] 。

2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道 [2] 。2014年，她主演了奇幻剧《逆光之恋》 [3] 。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖 [4] 。2016年，其主演的现代剧《麻辣变形计》播出 [5] ；同年，她还凭借喜剧片《傲娇与偏见》获得中英电影节最佳新人奖 [6] 。2017年，迪丽热巴因在玄幻剧《三生三世十里桃花》中饰演青丘白凤九而获得白玉兰奖最佳女配角提名 [7] 。2018年4月20日，主演的爱情喜剧电影《21克拉》上映 [8] 。

迪丽热巴出生于新疆乌鲁木齐市，父亲是新疆歌舞团的独唱演员。因受父亲影响，迪丽热巴从小便对各种艺术类的东西颇感兴趣，并主动要求学习钢琴、舞蹈、小提琴、吉他等 [9] 。

2001年，9岁的迪丽热巴被父亲带去一所艺术学院参加考试，当时她以为是上兴趣班，结果被录取后才发现是一个专业的舞蹈院校，而迪丽热巴也开始了为期六年的民族舞、芭蕾舞专业学习。2007年，从艺术学院毕业的迪丽热巴成为了新疆歌舞团的舞蹈演员 [10] 。2009年，迪丽热巴还在东北师范大学民族学院读了一年预科，在此期间她还参加了吉林省的首届少数民族新歌大赛，并最终获得了省级三等奖的成绩 [11] 。

之后，迪丽热巴却慢慢发现这并不是自己想要的生活。于是决定继续求学，去看看外面的世界，因为有不错钢琴基础，所以本来想报考的是中央音乐学院，可报名时却看到了中戏和上戏在招生，便突然决定改学表演。而迪丽热巴会有这样的决定则是受到了她钢琴老师的指点。2010年，迪丽热巴顺利考入了上海戏剧学院表演系戏剧影视专业；同年，她参加了陆川执导的古装片《王的盛宴》女主角“虞姬”的上海站海选 [12] ，并因此获得了颇多关注 [13] 。

代码演示：

只要是行内块级元素，都会有字围效果

* {

margin: 0;

padding: 0;

}

.box1 {

width: 200px;

height: 200px;

background-color: blue;

float: left;

}

.box2 {

display: inline-block;

width: 200px;

height: 50px;

background-color: green;

}

.box3 {

width: 200px;

height: 200px;

background-color: red;

}

1.5 浮动流排版练习

注意：在企业开发中，如何对网页进行布局

1、垂直方向的布局用标准流布局，水平方向用浮动流布局

2、从上至下布局

3、从外向内布局

4、水平方向可以先划分为一左一右再对左边后者右边进一步布局

div与span标签

/*

水平方向的块级元素的宽默认是父元素的100%

而垂直方向如果想让子元素的高是父元素的100%

则必须先设置父元素的高为100%

*/

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

height: 100%;

background-color: #cccccc;

}

.header {

width: 80%;

height: 10%;

background: red;

margin: auto;

margin-bottom: 10px;

padding: 20px;

box-sizing: border-box;

}

.content {

width: 80%;

height: 70%;

background: green;

margin: auto;

margin-bottom: 10px;

padding: 20px;

box-sizing: border-box;

}

.footer {

width: 80%;

height: 10%;

background: blue;

margin: auto;

}

.logo {

width: 20%;

height: 100%;

background: pink;

float: left;

}

.nav {

width: 75%;

height: 100%;

background: yellow;

float: right;

margin-left: 5%;

}

.aside {

width: 20%;

height: 100%;

background: purple;

float: left;

}

.article {

width: 75%;

height: 100%;

background: skyblue;

float: right;

margin-left: 5%;

}

浮动流排版练习2

* {

margin: 0px;

padding: 0px;

}

.header {

height: 100px;

width: 980px;

background-color: #fefefe;

margin: 0 auto;

}

.header .logo {

width: 250px;

height: 100px;

background-color: #f6c2d2;

float: left;

}

.header .language {

width: 150px;

height: 50px;

background-color: #a0d7e9;

float: right;

}

.header .nav {

width: 630px;

height: 50px;

background-color: #7e1487;

float: right;

}

.content {

height: 400px;

width: 980px;

background-color: #fcfd00;

margin: 0 auto;

margin-top: 10px;

}

.footer {

height: 40px;

width: 980px;

background-color: #ec6357;

margin: 0 auto;

margin-top: 10px;

}

浮动流排版练习3

* {

margin: 0px;

padding: 0px;

}

.header {

height: 100px;

width: 980px;

background-color: #f6c2d2;

margin: 0 auto;

}

.content {

height: 400px;

width: 980px;

background-color: #fefefe;

margin: 0 auto;

margin-top: 10px;

}

.content .aside {

width: 320px;

height: 400px;

background-color: #fcfd00;

float: left;

}

.content .article {

width: 650px;

height: 400px;

background-color: #fefefe;

float: right;

}

.content .articleTop {

width: 650px;

height: 350px;

background-color: #fefefe;

}

.content .articleTopLeft {

width: 400px;

height: 350px;

background-color: #fefefe;

float: left;

}

.content .articleTopLeft .new1 {

width: 400px;

height: 200px;

background-color: #e9289c;

}

.content .articleTopLeft .new2 {

width: 400px;

height: 140px;

background-color: #3dd1fd;

margin-top: 10px;

}

.content .articleTopRight {

width: 240px;

height: 350px;

background-color: #acde3d;

float: right;

}

.content .articleBottom {

width: 650px;

height: 40px;

background-color: #b9950c;

margin-top: 10px;

}

.footer {

height: 40px;

width: 980px;

background-color: #ec6357;

margin: 0 auto;

margin-top: 10px;

}

1.6 浮动元素高度问题(又称父级塌陷)

1、在标准流中,内容的高度可以撑起父元素的高度

2、在浮动流中,浮动的元素是不可以撑起父元素的高度的，当子元素都浮动起来后，父亲的内容高度即height变为0，父元素就好像塌陷了一样，因而又称为父级塌陷

浮动元素高度问题

* {

margin: 0;

padding: 0;

}

div {

border: 10px solid #741a7b;

}

p {

width: 100px;

height: 100px;

background-color: red;

float: left;

}

Title

* {

margin: 0;

padding: 0;

}

.header {

border: 5px solid #000;

}

.logo {

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.nav {

width: 200px;

height: 200px;

background-color: green;

float: left;

}

.content {

width: 960px;

height: 200px;

background-color: yellow;

}

1.7 清除浮动

清除浮动方式一：

为浮动的那些子元素的父亲设置一个高度

#1、注意点：

在企业开发中，这样限定固定高度会使页面操作不灵活，不推荐！

清除浮动方式一：

Title

* {

margin: 0;

padding: 0;

}

.header {

border: 5px solid #000;

height: 200px;

}

.logo {

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.nav {

width: 200px;

height: 200px;

background-color: green;

float: left;

}

.content {

width: 960px;

height: 200px;

background-color: yellow;

}

清除浮动方式二：

clear : none | left | right | both 注意：clear这个属性必须设置在块级、并且不浮动的元素中

#1、取值：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许左右有浮动对象

#2、把握住两点：

1、元素是从上到下、从左到右依次加载的。

2、clear: left;对自身起作用，而不会影响其他元素。一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

Title

* {

margin: 0;

padding: 0;

}

.header {

border: 5px solid #000;

}

.logo {

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.nav {

width: 200px;

height: 200px;

background-color: green;

float: left;

}

.content {

width: 960px;

height: 200px;

background-color: yellow;

/*该元素的左右两边都允许有浮动元素*/

clear: both;

}