python 之 前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）

时间  2020-06-07
标签 python 前端 开发 盒子 模型 页面 布局 浮动 定位 index overflow 溢出 栏目 Python 繁體版
原文   原文链接

11.312 盒子模型

HTML文档中的每一个元素都被比喻成矩形盒子， 盒子模型经过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），若是把一个盒子比喻成一个壁挂相片，那么css

外边距margin ===== 一个相框与另一个相框之间的距离 边框border ====== 边框指的就是相框 内边距padding ===== 相片与边框的距离 宽度width/高度height ===== 指定能够存放相片的区域

一、css显示模式:块级、行内、行内块级html

在HTML中HTML将全部标签分为两类，分别是容器级和文本级,在CSS中CSS也将全部标签分为两类，分别是块级元素和行内元素前端

#一、HTML中容器级与文本级
    容器级标签：能够嵌套其余的全部标签   div、h、ul>li、ol>li、dl>dt+dd 文本级标签：只能嵌套文字、图片、超连接 span、p、buis、strong、em、ins、del
#二、CSS中块级与行内
 块级：块级元素会独占一行，全部的容器类标签都是块级，文本标签中的p标签也是块级 div、h、ul、ol、dl、li、dt、dd 还有标签p 行内：行内元素不会独占一行，全部除了p标签之外的文本标签都是行内 span、buis、strong、em、ins、del
#三、块级元素与行内元素的区别
    1、块级元素(block) 独占一行,能够设置宽高,若没有设置宽度，那么默认和父元素同样宽 2、行内元素(inline) 共享一行,不能够设置宽高，盒子宽高默认和内容同样 三、行内块级元素(inline-block)  不会独占一行,能够设置宽高 例：<img src="../imags/1.png" alt="">

二、CSS显示模式转换浏览器

#display:能够经过标签的display属性设置显示模式
none: HTML文档中元素存在，可是在浏览器中不显示。通常用于配合JavaScript代码使用 block:块级 inline:行内 inline-block:行内块级 #display:"none"与visibility:hidden的区别：
1、visibility:hidden: 能够隐藏某个元素，但隐藏的元素仍需占用与未隐藏以前同样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 二、display:none: 能够隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，并且该元素本来占用的空间也会从页面布局中消失。

三、div与spanide

布局都是用块级元素，而行内元素是控制内容显示的。工具

1、div标签 通常用于配合css完成网页的基本布局
2、span标签 通常用于配合css修改网页中的一些局部信息
3、div和span有什么区别？
  div通常用于排版，而span通常用于局部文字的样式
  1、站在HTML的角度：div是一个容器级标签，而span是一个文本级标签
  2、站在CSS的角度：div是一个块级元素、独占一行，而span是一个行内元素、不会单独占一行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div与span标签</title>
    <style> .aside { width: 250px; height: 460px; background: #cccccc; float: left; margin: 20px;
        } span {color: red;}
    </style>
</head>
<body>
    <div class="aside">
        <p> 我是 <span> EGON </span>，一个最接近 <span>神的男人</span> </p>
    </div>
</body>
</html>

四、border边框布局

border: 5px solid black; # 同时设置四条边的边框 bord-width: 5px 6px 5px 6px #连写(以三种属性分别设置四条边的边框) border-style: solid dashed solid dashed; border-color: red green blue purple; border-left: 5px solid purple; #以边框位置分别设置三种属性 border-top: 5px solid red; border-right: 5px solid green; border-bottom: 5px solid blue; none:无边框 dotted:点状虚线边框 dashed:矩形虚线边框 solid:实线边框#边框的样式 border-radius: border-top-left-radius: 20px; #单独设置一个角：数值越大，弧度越大 border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; ​ border-radius: 20px; # 缩写设置 全部角设置相同值 border-radius: 20px 10px 10px 20px; #顺时针顺序：上左 上右 下左 下右 ​ border-radius: 50%; #百分比设置（获得一个圆）

五、padding内边距(内填充)字体

内边距：边框与内容的距离网站

padding-top：20px； padding-right：20px； padding-bottom：20px； padding-left：20px； ​ padding: 70px 70px 70px 70px; #上 右 下 左 padding: 70px;

注意：ui

一、给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding以后标签内容的宽高是在原宽高的基础上加上padding值。若是不想改变实际大小，那就在用宽高减掉padding对应方向的值 二、padding是添加给父级的，改变的是父级包含的内容的位置 三、内边距也会有背景颜色

六、外边距

标签与标签之间的距离就是外边距

margin-top：20px； margin-right：20px； margin-bottom：20px； margin-left：20px； margin：上 右 下 左;

注意:

一、外边距的那一部分是没有背景颜色的 二、外边距合并现象和叠加现象 在默认布局的水平方向上，默认两个盒子的外边距会叠加，而在垂直方向上，默认状况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象 </title>
    <style> span { display: inline-block; width: 100px; height: 100px; border: 1px solid #000;
        } div { height: 100px; border: 1px solid #000;
        } .hezi1 {margin-right: 50px;} #水平方向上,外边距会叠加 .hezi2 {margin-left: 100px;} ​ .box1 {margin-bottom: 50px;} #垂直方向上，外边距会合并成一个，谁比较大就听谁的 .box2 {margin-top: 100px;}
    </style>
</head>
<body> #快捷建立span.hezi${我是span}*2 <span class="hezi1">我是span</span>
<span class="hezi2">我是span</span>                           
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
</body>
</html>

11.313 页面布局

1.标准流
标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程当中，元素会自动从左往右，从上往下的流式排列。
#1 浏览器默认的排版方式就是标准流排版方式 #2 在CSS中将元素分为三类：分别是
 块级、行内、行内块级 #3 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版
 垂直排版，若是元素是块级元素，那么就会垂直排版 水平排版，若是元素是行内元素或行内块级元素，那么就会水平排版
2.浮动流

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

1.1 什么是脱离文档流？

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style> * {margin: 0;padding: 0;} .box1 { #span和p都显示到一行：span这种行内元素也能够设置宽高 width: 100px; height: 100px; background-color: red; float: left;
        } .box2 { width: 100px; height: 100px; background-color: blue; float: left;
        }

    </style>
</head>
<body>
<span class="box1">我是span</span>
<p class="box2">我是段落</p>
</body>
</html>

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

1.2 什么是半脱离文档流？

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

1.3 浮动元素贴靠问题

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

1.4 浮动元素字围现象

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

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

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

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

2.1清除浮动

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

二、清除浮动方式二：

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 在两个盒子中间添加一个额外的块级元素 2 给这个额外添加的块级元素设置clear：both； 注意： 外墙法它可让第二个盒子使用margin-top属性 外墙法不可让第一个盒子使用margin-bottom属性，因此咱们一般用墙的高度做margin的替代品 在企业开发中能够为墙添加一个类h20，而后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法 #二、内墙法
    1 在第一个盒子中全部子元素最后添加一个额外的块级元素 2 给这个额外添加的块级元素设置clear：both； 注意： 内墙法它可让第二个盒子使用margin-top属性 内墙法可让第一个盒子使用margin-bottom属性 内墙法也能够为墙添加一个类h20，而后设置h20的高度为20实现外间距，搜狐网站大量使用了内墙法 ​

内墙法与外墙法的区别？ 一、外墙法不能够撑起第一个盒子的高度，而内墙能够 二、在企业开发中清除浮动，内墙法与外墙法都不经常使用，由于添加一个无用的墙，在前端开发中推崇结构与样式分离，而隔墙法须要添加大量的没有意义的空标签div

四、清除浮动的方式四

本质原理与内墙法同样，但咱们用的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,不然伪类选择器只能在谷歌浏览器中生效，其他没用 <div class="header"></div> #整段代码就至关于在浮动元素后面跟了个宽高为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 }

五、清除浮动的方式五

overflow:hidden

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

3.定位流
1.相对定位

相对定位就是相对于本身之前在标准流中的位置来移动,相对定位是不脱离标准流的

格式：

position：relative 须要配合如下四个属性一块儿使用 top:20px; left:30px; right:40px; bottom:50px;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style> * { margin:0; padding:0;} div { width: 100px; height: 100px;} .box1 { background-color: red;} .box2 { background-color: green; position: relative; #相对原来的位置上边让出20px,左边让出20px top: 20px; left: 20px;} .box3 { background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位

1.1 相对定位的注意点

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

top/bottom (只能用一个) left/right (只能用一个)

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

2.绝对定位

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

2.1 绝对定位的参考点

一、默认状况下全部的绝对定位的元素，不管有无祖先元素，都会以body做为参考点 二、若是一个绝对定位的元素有祖先元素，而且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素做为参考点 2.1 只要是这个绝对定位元素的祖先元素均可以 2.2 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不能够) 2.3 若是一个绝对定位的元素有祖先元素，并且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它 最近的那个定位流的祖先元素为参考点

2.2 绝对定位的注意点

一、绝对定位的元素是脱离标准流的,因此绝对定位的元素不区分块级元素/行内元素/行内块级元素 二、若是一个绝对定位的元素是以body做为参考点, 那么实际上是以网页首屏的宽度和高度做为参考点, 而不是以整个网页的宽度和高度做为参考点，会相对于body定位会随着页面的滚动而滚动 三、一个绝对定位的元素会忽略祖先元素的padding

2.3 绝对定位水平居中

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

<head>  
    <style> * {margin: 0; padding: 0;} .box1 { width: 200px; height: 50px; background-color: red; position: absolute; left: 50%; margin-left: -100px;}
    </style>
</head>
<body>
<div class="box1"></div>
</body>
3.固定定位

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style> * { margin: 0; padding: 0;} .bg { width: 600px; height: 1000px; border: 1px solid #000; background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg"); background-repeat: no-repeat; background-attachment: fixed;
        } div { width: 100px; height: 100px; } .box1 { background-color: red;
        } .box2 { border: 1px solid #000; border-radius: 50%; text-align: center; line-height: 100px; ​ background-color: green; position: fixed; right: 0; bottom: 0;
        } .box3 { background-color: blue;
        } .box4 { background-color: yellow; height: 2000px;
        }
    </style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到顶部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

注意:

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

4.静态定位

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

5.z-index

一、z-index属性：用于指定定位的元素的覆盖关系 1.一、z-index值表示谁压着谁,数值大的压盖住数值小的 1.二、只有定位了的元素，才能有z-index值,也就是说，无论相对定位、绝对定位、固定定位，均可以使用z-index值,而 浮动的东西不能用。 1.三、z-index值没有单位，就是一个正整数。默认的z-index值是0。 1.四、若是你们都没有z-index值(默认全部元素z-index值为0),或者z-index值同样，那么谁写在HTML后面，谁在上面能 压住别人。定位了的元素，永远可以压住没有定位的元素。 二、注意：从父现象 2.1父元素没有z-index值, 那么子元素谁的z-index大,谁盖住谁 2.2父元素z-index值不同, 那么父元素谁的z-index大,谁盖住谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index示例</title>
    <style> body { margin: 0;
        } .c1 { height: 1000px; width: 100%;
        } .cover { background-color: rgba(0,0,0,0.35); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999;
        } .modal { background-color: white; height: 400px; width: 600px; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000;
        }
    </style>
</head>
<body>
<div class="c1">
   <p>asasadds</p>
</div>
<div class="cover"></div>
<div class="modal">
    <form action="">
        <p>姓名<input type="text"></p>
        <p>密码<input type="password"></p>
        <p><input type="submit" value="登陆"></p>
    </form>
</div>
</body>
</html>
4. overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈如今元素框以外。
hidden 内容会被修剪，而且其他内容是不可见的。
scroll 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
auto 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程