python 之 前端开发(页面布局、浮动、定位、z-index、overflow溢出)

　　11.313 页面布局

　　1.标准流

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

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

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

　　块级、行内、行内块级

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

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

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

　　2.浮动流

　　浮动流是一种半脱离文档流的排版方式 那什么是脱离文档流?什么又是半脱离文档流?

　　1.1 什么是脱离文档流?

　　1、浮动元素脱离文档流意味着: 1、不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版 2、无论是什么级的元素都可以设置宽高 综上所述，浮动流中的元素和标准流中的行内块级元素很像

　　我是span

　　我是段落

　　2、浮动元素脱标文档流意味着: 1、当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样,不再占用位置，这个就是浮动元素的脱标 2、如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素 注意点： 1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值 2、一旦使用了浮动流，则margin:0 auto;失效 让两个元素显示到一行，有两种实现方式，一种是修改元素的显示方式为inline-block，另外一种就是用浮动的方式

　　1.2 什么是半脱离文档流?

　　脱离分为半脱离与完全脱离：完全脱离:是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：(1)同一个方向上谁先浮动，谁在前面(2)不同方向上左浮动找左浮动，右浮动找右浮动

　　1.3 浮动元素贴靠问题

　　1.当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示 2.当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

　　1.4 浮动元素字围现象

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

　　注意：在企业开发中，如何对网页进行布局:1、垂直方向的布局用标准流布局，水平方向用浮动流布局2、从上至下布局3、从外向内布局4、水平方向可以先划分为一左一右再对左边后者右边进一步布局

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

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

　　2.1清除浮动

　　1、清除浮动方式一：为浮动的那些子元素的父亲设置一个高度 注意点：在企业开发中，这样限定固定高度会使页面操作不灵活，不推荐

　　2、清除浮动方式二：

　　clear : none / left / right / both

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

　　1、取值：

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

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

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

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

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

　　.content {

　　width: 960px;

　　height: 200px;

　　background-color: yellow;

　　clear: both;

　　margin-top: 500px;

　　}

　　注意： 元素是从上到下、从左到右依次加载的，在右侧元素还没有加载到时，clear：right是无用的 这种方式的弊端是：当我们给某个元素添加clear属性之后，那么这个属性的margin-top属性可能会失效，因而也不推荐直接用clear

　　3.清除浮动的方式三

　　隔墙法：

　　#1、外墙法

　　1 在两个盒子中间添加一个额外的块级元素

　　2 给这个额外添加的块级元素设置clear：both;

　　注意：

　　外墙法它可以让第二个盒子使用margin-top属性

　　外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度作margin的替代品

　　在企业开发中可以为墙添加一个类h30，然后设置h30的高度为20实现外间距，搜狐网站大量使用了外墙法

　　#2、内墙法

　　1 在第一个盒子中所有子元素最后添加一个额外的块级元素

　　2 给这个额外添加的块级元素设置clear：both;

　　注意：

　　内墙法它可以让第二个盒子使用margin-top属性

　　内墙法可以让第一个盒子使用margin-bottom属性

　　内墙法也可以为墙添加一个类h30，然后设置h30的高度为20实现外间距，搜狐网站大量使用了内墙法

　　内墙法与外墙法的区别? 1、外墙法不可以撑起第一个盒子的高度，而内墙可以 2、在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙，在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div

　　4、清除浮动的方式四

　　本质原理与内墙法一样，但我们用的css的伪元素选择器实现的，用css来控制样式，符合前端开发思想

　　I、详细用法：

　　.header:after { #在类名为“clearfix”的元素内最后面加入内容;

　　content: "."; #内容为“.”就是一个英文的句号而已,也可以不写。

　　display: block; #加入的这个元素转换为块级元素。

　　clear: both; #清除左右两边浮动。

　　visibility: hidden; #visibility:hidden;仍然占据空间，只是看不到而已 line-height: 0; #行高为0;

　　height: 0; #高度为0;

　　font-size:0; #字体大小为0;

　　}

　　.header { *zoom:1;} #兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用

　　#整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

　　II、必须要写的是下面这三句话

　　.clearfix:after {

　　content: '';

　　display: block;

　　clear: both;

　　}

　　III、新浪首页清除浮动的方法，也是采用伪元素

　　content: ".";

　　display: block;

　　height: 0;

　　clear: both;

　　visibility: hidden;

　　通用写法:定义一个清除浮动的工具样式类

　　.clearfix { #before的作用是子元素设置margin-top父元素不会一起被顶下来,after的作用是清除浮动

　　*zoom:1

　　}

　　.clearfix:before,.clearfix:after {

　　content: "";

　　display: block

　　}

　　.clearfix:after {

　　clear: both

　　}

　　5、清除浮动的方式五

　　overflow:hidden

　　但它除了清除浮动还有其他方面的用途: 1、可以将超出标签范围的内容裁剪掉 2、清除浮动 3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了

　　3.定位流

　　1.相对定位

　　相对定位就是相对于自己以前在标准流中的位置来移动,相对定位是不脱离标准流的

　　格式：

　　position：relative

　　需要配合以下四个属性一起使用

　　top:20px;

　　left:30px;

　　right:40px;

　　bottom:50px;

　　相对定位

　　1.1 相对定位的注意点

　　1 在相对定位中同一个方向上的定位属性只能使用一个

　　top/bottom (只能用一个)

　　left/right (只能用一个)

　　2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间，相对原来的位置定位，还占据原来的位置 3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的 4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局，即给相对定位的标签设置margin或padding，是以该标签原来的位置为基础来进行偏移的

　　2.绝对定位

　　绝对定位就是相对于body或者某个定位流中的祖先元素(已定位)来定位,绝对定位的元素是脱离标准流的

　　2.1 绝对定位的参考点

　　1、默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点 2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点 2.1 只要是这个绝对定位元素的祖先元素都可以 2.2 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不可以) 2.3 如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它 最近的那个定位流的祖先元素为参考点无锡比较好的妇科医院 http://www.120jlfk.com/

　　2.2 绝对定位的注意点

　　1、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素 2、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚动而滚动 3、一个绝对定位的元素会忽略祖先元素的padding

　　2.3 绝对定位水平居中

　　1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中 2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

　　3.固定定位

　　固定定位的元素是脱离标准流的

　　1、固定定位(和绝对定位高度相似，和背景的关联方式也高度相似): 背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动,而固定定位可以让某一个元素不随着滚动条的滚动而滚动

　　回到顶部

　　注意:

　　1、固定定位，就是相对浏览器窗口定位,页面如何滚动，这个盒子显示的位置不变。 2、固定定位的元素是脱离标准流的，不会占用标准流中的空间 3、固定定位和绝对定位一样不区分行内、块级、行内块级 4、E6不支持固定定位

　　4.静态定位

　　默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流

　　5.z-index

　　1、z-index属性：用于指定定位的元素的覆盖关系 1.1、z-index值表示谁压着谁,数值大的压盖住数值小的 1.2、只有定位了的元素，才能有z-index值,也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值,而 浮动的东西不能用。 1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。 1.4、如果大家都没有z-index值(默认所有元素z-index值为0),或者z-index值一样，那么谁写在HTML后面，谁在上面能 压住别人。定位了的元素，永远能够压住没有定位的元素。 2、注意：从父现象 2.1父元素没有z-index值, 那么子元素谁的z-index大,谁盖住谁 2.2父元素z-index值不一样, 那么父元素谁的z-index大,谁盖住谁

　　asasadds

　　姓名

　　密码

　　4. overflow溢出属性

　　值描述

　　visible　　默认值。内容不会被修剪，会呈现在元素框之外。

　　hidden　　内容会被修剪，并且其余内容是不可见的。

　　scroll　　内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

　　auto　　如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

　　inherit　　规定应该从父元素继承 overflow 属性的值。

　　水平和垂直均设置：overflow 设置水平方向：overflow-x 设置垂直方向：overflow-y