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

11.312 盒子模型

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

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

1、css显示模式:块级、行内、行内块级

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

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

2、CSS显示模式转换

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

3、div与span

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

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>

4、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%;                                #百分比设置（得到一个圆）

5、padding内边距(内填充)

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

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

注意：

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

6、外边距

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

margin-top：20px；
margin-right：20px；
margin-bottom：20px；
margin-left：20px；

margin：上 右 下 左;

注意:

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

<!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 什么是脱离文档流？

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

<!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>

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的替代品
            在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
#2、内墙法
    1 在第一个盒子中所有子元素最后添加一个额外的块级元素
    2 给这个额外添加的块级元素设置clear：both；
        注意：
            内墙法它可以让第二个盒子使用margin-top属性
            内墙法可以让第一个盒子使用margin-bottom属性
            内墙法也可以为墙添加一个类h20，然后设置h20的高度为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,否则伪类选择器只能在谷歌浏览器中生效，其余没用
<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
}

5、清除浮动的方式五

overflow:hidden

但它除了清除浮动还有其他方面的用途: 1、可以将超出标签范围的内容裁剪掉 2、清除浮动 3、可以通过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 绝对定位的参考点

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

2.2 绝对定位的注意点

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

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

1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）: 背景的关联方式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>

注意:

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大,谁盖住谁

<!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

原文地址：https://www.cnblogs.com/mylu/p/11360886.html

时间： 2024-11-11 16:57:20