Day 49 CSS和网页布局

最新推荐文章于 2024-08-01 19:47:04 发布

A1L__

最新推荐文章于 2024-08-01 19:47:04 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/A1L__/article/details/108668207

版权

Day 05 网页布局

一、网页布局方式

1、什么是网页布局

布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的

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

标准流
浮动流
定位流

二、标准流

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

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

2、CSS中元素分类：

块级
行内
行内块级

3、在标准流中有两种排版方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;  /* 设置宽度 */
            height: 100px;  /* 设置高度 */
            background-color: #f37fb7;
        }
        span{
            height: 200px;  /*设置高度，内有设置宽度自适应*/
            background-color: #cb2b83;
        }
    </style>
</head>
<body>

<div>块级别元素  <!-- 不受换行影响 -->
    <h1>块下H1</h1>
    <P>块下段落</P>  <!-- 会超出块但是还是属于块 -->
</div>

<span>行内元素
    <strong>行下强调----------</strong>
    <b>行下加粗</b>
</span>

</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZuAvsrF-1600417872798)(C:%5CUsers%5CS%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200917160348731.png)]

三、浮动流

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

1、脱离文档流

不再区分行内，块级，行内块级，无论什么级的元素都可以水平排版
无论是什么级的元素都可以设置宽高
当某一个元素浮动游走后，那么这个元素看上去就从标准流中删除了一样，这个就是浮动元素的脱标
如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素。

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

注意点：

浮动流只有一种排版方式，就是水平排版，他只能是指某个元素走对其或者右对齐，没有居中对齐，也就是没有center这个取值
一旦使用了浮动流，则margin:0 auto 失效

2、半脱离文档流

完全脱离

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

半脱离

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

同一个方向上谁先浮动，谁在前面
同方向上左浮动找又浮动，又浮动找右浮动

3、浮动元素贴靠问题

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

4、浮动元素自围

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

5、浮动元素高度问题（又称父级塌陷）

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

6、清除浮动

6.1为浮动的子元素的父级设置一个高度

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

6.2

clear:none/left/right/both

chear这个属性必须设置在块级，并且不浮动的元素中

取值

none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许两边有浮动对象

注意：

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

6.3清除浮动的方式三–隔墙法

1、外墙法
    2.1 在两个盒子中间添加一个额外的块级元素
    2.2 给这个额外添加的块级元素设置clear：both；属性
        注意：
            外墙法它可以让第二个盒子使用margin-top属性
            外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度作margin的替代品

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

2、内墙法
    3.1 在第一个盒子中所有子元素最后添加一个额外的块级元素
    3.2 给这个额外添加的块级元素设置clear：both；属性
        注意：
            内墙法它可以让第二个盒子使用margin-top属性
            内墙法可以让第一个盒子使用margin-bottom属性

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


#3、内墙法与外墙法的区别？
    1、外墙法不可以撑起第一个盒子的高度，而内墙可以

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

6.4清除浮动的方式四

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

I、详细用法

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

            .header:after {             <----在类名为“clearfix”的元素内最后面加入内容；
            content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。
            display: block;               <----加入的这个元素转换为块级元素。
            clear: both;                  <----清除左右两边浮动。
            visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。
                                               visibility:hidden;仍然占据空间，只是看不到而已；
            line-height: 0;               <----行高为0；
            height: 0;                    <----高度为0；
            font-size:0;                  <----字体大小为0；
            }
            .header { *zoom:1;}         <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用

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

            content: '.';
            display: block;
            clear: both;

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

            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;

1、复习伪元素选择器(CSS3中新增的为元素选择器)
伪元素选择器的作用就是给指定标签的内容前面添加一个子元素
或者给指定标签的内容后面添加一个子元素

2、格式：给指定标签的前面和后面添加子元素

    标签名称::before{
        属性名称：值；
    }

    标签名称::after{
        属性名称：值；
    }

通用写法
.clearfix {
    *zoom:1
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

6.5 清除浮动的方式五：

overflow:hidden，但其实它除了清除浮动还有其他方面的用途

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    text-align: center;*/
        /*    font-size: 50px;*/
        /*    padding: 75px 0 75px 0;*/
        /*    align-items: center;*/
        /*    box-sizing: border-box;*/
        /*    margin: 10px 15px 10px 15px;*/
        /*}*/

        .b1ox {
            border: 2px solid darkblue;
            padding: 2px 2px 2px 2px;
            margin: 10px 10px 10px 10px;
            overflow: auto;
        }

        [class^="box"] {
            width: 190px;
            height: 190px;
            background-color: #f7a502;
            border-radius: 50%;
            float: left;

        }

        /*.b2ox {*/
        /*    width: 190px;*/
        /*    height: 190px;*/
        /*    background-color: #c952ff;*/
        /*    border-radius: 50%;*/
        /*    clear: both;*/
        /*}*/
        /*内墙法*/
        .wall {
            clear: both;
            height:1px
        }
    </style>
</head>


<body>


<div class="b1ox">
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <div class="box6">box6</div>
    <div class="wall"></div>  <!--内墙法-->
    <div class="box7">box7</div>
<!--    <div class="b2ox">box8</div>-->
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <div class="box6">box6</div>
    <div class="box7">box7</div>
<!--    <div class="b2ox">box8</div>-->
    <div class="wall"></div>  <!--外墙法-->
</div>

</body>
</html>