实例：居中五环，两栏布局，两个经典bug,BFC,包裹浮动元素，开发实例，经验

最新推荐文章于 2024-07-18 20:18:47 发布

Nawkham

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量188

点赞数

分类专栏：前端文章标签： html css html5 css3

本文链接：https://blog.csdn.net/Nawkham/article/details/105442840

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实例：居中五环，两栏布局，两个经典bug,BFC,包裹浮动元素，开发实例，经验

让五环居中
两栏布局
两个bug
- margin塌陷
  垂直方向的margin父子元素是结合在一起的,它们俩会取最大的一个值
  解决方法: bfc; 改变父级的渲染规则，让父级变成bfc
  触发一个盒子的bfc的方法:
1. position: absolute; 设置定位之后，这个盒子自然就成为bfc元素
2. display: inline-block; 行级块
3. float: left/right;
4. overflow: hidden; 溢出盒子的部分要隐藏展示
- margin合并问题(在开发中不解决)
  开发中的禁忌: 不能因为改bug而增加无意义的html结构。
float: 浮动模型
- 浮动元素产生了浮动流
  所有产生了浮动流的元素，块级元素看不到他们，所有会出现分层的效果。产生了bfc的元素和文本类属性的元素(带有inline属性,例如img是inline-block)以及文本都能看到浮动元素
父级包住浮动元素的解决办法
使用p标签，clear: both; 清除周边的浮动流。这种方法会破坏html结构，在开发中是不允许的。
- 伪元素
  任何元素中都有两个最特殊的伪元素，before和after。必须写content，才能看到伪元素。用content修改伪元素的内容，而且content只有在伪元素里面才有效。伪元素是行级元素，即display:inline,加宽高无效。想设置宽高必须改成inline-block或者是block。
- 能清除浮动的必须是块级元素
- 块级元素看不到浮动流，而触发了bfc的元素、浮动元素、文本类元素(inline)都能看到浮动元素。
- 设置了position: absolute; float:left/right;之后，系统会将元素转换成inline-block，行级块元素的宽高由内容决定。
报纸效果: 图片环绕文字
一个标准的导航栏

内容详解

让五环居中

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson6</title>
        <link rel="stylesheet" href="css/lesson6.css">
    </head>
    <body>
        <div class="plat">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            <div class="circle5"></div>
        </div>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
    /* 父级要有定位。否则以浏览器为参照物 */
    position: absolute;
    width: 100px;
    height: 100px;
    border: 10px solid black;
    border-radius: 50%;
}

.circle1{
    border-color: blue;
    left: 0;
    top: 0;
}

.circle2{
    border-color: black;
    left: 130px;
    top: 0;
    z-index: 1;
}

.circle3{
    border-color: red;
    left: 260px;
    top: 0;
}

.circle4{
    border-color: yellow;
    left: 65px;
    top: 65px;
}

.circle5{
    border-color: green;
    left: 195px;
    top: 65px;
}


.plat{
    /* border: 5px solid black; */
    width: 380px;
    height: 180px;
    /* 因为里面的5个子元素都是绝对定位，已经脱离原来的层面。所以在原来层面的位置没有任何的东西，父容器也就无法被撑开。 */
    /* relative:相对于自身进行定位，没有办法居中到浏览器中间 */
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -90px;
}

两栏布局
要求: 一个固定，一个自适应。

        <!-- 必须是这个顺序，div是块级元素，如果是黑色区域先出生，即left在前，粉色区域出生就在第二行。即时是绝对定位也不行。 -->
        <div class="right"></div>
        <div class="left"></div>

*{
    margin: 0;
    padding: 0;
}

.right{
    width: 100px;
    height: 100px;
    background-color: #fcc;
    position: absolute;
    right: 0;
    opacity: 0.5;
}

.left{
    height: 100px;
    background-color: #123;
    margin-right: 100px;
}

两个bug

margin塌陷
垂直方向的margin父子元素是结合在一起的,它们俩会取最大的一个值。

解决方法: bfc: block format context 块级格式化上下文
css是把html中的每一个元素都当成一个盒子，而且它认为每一个盒子里面都有一套渲染规则。渲染规则就是你写完代码，它能按照代码进行绘制。每一个盒子里面都有一套一模一样的语法规则，就像每一个细胞中都有一套完整的DNA。bfc是一种手段，触发bfc能够让其中的一些盒子的渲染规则发生改变，语法规则和原来不一样。bfc设置完以后，特定的盒子会遵守另一套语法规则。bfc是margin塌陷的专门解决方案。

如何触发一个盒子的bfc:

position: absolute;设置定位之后，这个盒子自然就成为bfc元素。
display: inline-block;行级块
float: left/right;
overflow: hidden;溢出部分隐藏: 溢出盒子的部分要隐藏展示

改变父级渲染规则，让父级变成bfc。margin塌陷问题解决了。

overflow: hidden; 溢出盒子的部分要隐藏展示。

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson6</title>
        <link rel="stylesheet" href="css/lesson6.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="content"></div>
        </div>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
    /* 不是很好的方法: 给父级元素加上一个顶棚，子元素就相对于父级的顶棚向下窜了。 */
    /* border-top: 1px solid red; */
    /* 溢出隐藏: 溢出盒子的部分要隐藏展示 */
    overflow: hidden;
    /* display: inline-block; */
    /* position: absolute; */
    /* float: left; */
    /* float: right; */
}

/* margin塌陷: 垂直方向的margin父子元素是结合在一起的,它们俩会取最大的一个值 */
.content{
    margin-left: 50px;
    margin-top: 50px;
    width: 50px;
    height: 50px;
    background-color: pink;
}

margin合并问题(开发中不解决)
margin塌陷解决，在父级上加css。margin合并问题解决，加一层父级html是不行的。html最重要，每一个html都是一块结构，改了结构后对其它的css,javascript影响是非常大的。

开发中的禁忌：不能因为改bug而加无意义的html结构。
这个margin合并问题，我们不去解决它。比如说，我们需要两个元素之间垂直margin为300px,直接给上边的元素加margin-bottom=300px;就可以了。

下面是段错误的代码：

        <span class="box1">123</span>
        <span class="box2">456</span>
        <!-- 必须让两个兄弟元素中至少一个处于bfc语法规则中 -->
        <div class="wrapper">
            <div class="demo1">1</div>
        </div>
        
        <div class="wrapper">
            <div class="demo2">2</div>
        </div>

*{
    margin: 0;
    padding: 0;
}

/* 正常模式，区域不能共用 */
.box1{
    background-color: tomato;
    margin-right: 100px;
}

.box2{
    background-color: seagreen;
    margin-left: 100px;
}

/* 兄弟结构元素垂直方向的margin是合并的 */
.demo1{
    background-color: black;
    margin-bottom: 50px;
}

.demo2{
    background-color: pink;
    margin-top: 100px;
}

.wrapper{
    overflow: hidden;
}

float: 浮动模型
float: left/right;

        <div class="wrapper">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
            <div class="content">4</div>
            <div class="content">5</div>
            <div class="content">6</div>
            <div class="content">7</div>
            <div class="content">8</div>
            <div class="content">9</div>
        </div>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    width: 350px;
    height: 300px;
    border: 1px solid black;
}

.content{
    float: left;
    /* margin-left: 10px;
    margin-bottom: 10px; */
    color: #fff;
    background-color: black;
    width: 100px;
    height: 100px;
}

浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们，出现了分层的效果。产生了bfc的元素和文本类属性的元素(带有inline属性的元素，例如img)以及文本都能看到浮动元素。

        <div class="box"></div>
        <!-- <img src="images/summer.jpg" alt="spring"> -->
        <div class="demo"></div>

*{
    margin: 0;
    padding: 0;
}

.box{
    float: left;
    width: 100px;
    height: 100px;
    background-color: black;
    opacity: 0.5;
}

.demo{
    /* 触发bfc,浮动元素站队能看到自己 */
    /* float: left; */
    /* 文本元素，触发bfc */
    display: inline-block;
    
    width: 150px;
    height: 150px;
    background-color: chartreuse;
}

父级包住浮动元素的解决办法
使用p标签，clear: both;清除周边的浮动流。但是这个方法会破坏html结构，是开发中的禁忌。

        <div class="wrapper">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
            <div class="content">4</div>
            <div class="content">5</div>
            <div class="content">6</div>
            <div class="content">7</div>
            <div class="content">8</div>
            <div class="content">9</div>
            <p></p>
        </div>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    border: 1px solid black;
}

.content{
    /* 此时它的父级包不住它了，因为它的父级div是块级元素，块级元素看不到产生了浮动流的元素*/
    /* 因为里面的元素产生了浮动流，浮动流对块级元素有影响，让块级元素看不到它，只要把浮动流清楚，它的父级就恢复正常了 */
    float: left;
    color: #fff;
    background-color: black;
    width: 100px;
    height: 100px;
}

p{
    border-top: 0 solid palegreen;
    /* clear清除周边的浮动流 */
    clear: both;
}

复习

<html>
    <head>
        <meta charset="UTF-8">
        <title>lesson6</title>
        <link rel="stylesheet" href="css/lesson6.css">
    </head>
    <body>
        <div class="wrapper">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
            <p class="clear"></p>
        </div>

    </body>
</html>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    border: 1px solid black;
}

.content{
    float: left;
    width: 100px;
    height: 100px;
    background-color: black;
    color: #ffffff;
}

/* 让最后一个逻辑元素清除浮动 */
.clear{
    /* 清除左右浮动 */
    clear: both;
}

权重

名称	css权重
!important	Infinity
行间样式	1000
id	100
class/伪类/属性	10
标签/伪元素	1
通配符	0

伪元素
伪元素存在于任意一个元素里面，任意一个元素里面有两个最特殊的伪元素，一个是before,另一个是after。伪元素可以和正常元素一起使用，但是它没有正常元素结构。伪元素天生存在于每个标签中，我们可以用css把伪元素选择出来。
伪元素可以用css来选中，修改样式结构都可以。为什么叫伪元素？因为它的元素结构是存在的，但是它又没写在html里面。就是它可以被css正常操作，但是它没有html结构。可以当成元素来操作，但是没有元素的结构。伪元素天生就存在，我们只不过用css选中它进行修改。如果不写content,伪元素就看不着，但仍然存在于标签里面。我们写css选择器，不是创造了伪元素，而是选中了伪元素，用content修改里面的内容。content只能用在伪元素里面。因为伪元素没有确切的结构，不能通过html形式往里面加内容，只能通过css的content属性往里边加内容。
伪元素是行级元素，天生是display: inline，加宽高无效。想设置宽高必须改成inline-block或者是block。

        <!-- 一个标签诞生时，它逻辑最前边的位置和逻辑最后边的位置就已经有两个伪元素了 -->
        <span>

            很帅

        </span>

*{
    margin: 0;
    padding: 0;
}

/* 把这个标签中最前边的伪元素选出来 */

span::before{
    /* 伪元素必须有的属性content,即时什么也不写*/
    content: "黄勇";
    /* 伪元素是行级元素，是inline,加宽高无效。想设置宽高必须改成inline-block或者是block */
    display: inline-block;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: red;
}

/* 把这个标签中最后面的伪元素选出来 */
span::after{
    content: "cool";
}

想要让clear生效，你加的元素，必须是块级元素。能清除浮动的必须是块级元素。

        <div class="wrapper">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>

*{
    margin: 0;
    padding: 0;
}

.wrapper::after{
    content: "";
    /* 想要让clear生效，你加的元素，必须是块级元素。能清除浮动的必须是块级元素*/
    clear: both;
    display: block;
}

.wrapper{
    border: 1px solid black;
}

.content{
    float: left;
    width: 100px;
    height: 100px;
    background-color: black;
    color: #ffffff;
}

浮动元素有浮动流，它的父级是块级元素，看不到浮动流。所以我们可以把父级元素变成其它可以看到浮动流的元素。

所有产生了浮动流的元素，块级元素看不到他们，出现了分层的效果。产生了bfc的元素和文本类属性的元素(带有inline属性的元素，例如img)以及文本都能看到浮动元素。

如何触发一个盒子的bfc:

position: absolute; 设置定位之后，这个盒子自然就成为bfc元素。
display: inline-block; 行级块
float: left/right;
overflow: hidden; 溢出部分隐藏: 溢出盒子的部分要隐藏展示

触发了bfc的元素、浮动元素、文本类元素都能看到浮动元素

为什么设置了float: left; display: inline-block; position: absolute;之后，父级就紧紧的包裹住子元素，不像原来那么宽了呢？

凡是设置了position: absolute; float:left/right;之后，系统内部会把元素转换成inline-block;，行级块元素的宽高由内容决定。

        <div class="wrapper">
            <div class="content">1</div>
            <div class="content">2</div>
            <div class="content">3</div>
        </div>

*{
    margin: 0;
    padding: 0;
}


.wrapper{
    border: 10px solid pink;
    /* 触发了bfc的元素、浮动元素、文本类元素 都能看到浮动元素*/
    float: left;
    /* display: inline-block; */
    /* position: absolute; */
}

.content{
    float: left;
    width: 100px;
    height: 100px;
    background-color: black;
    color: #ffffff;
}

<span>123</span>

*{
    margin: 0;
    padding: 0;
}


span{
    /* 成为bfc元素，系统内部把元素转换成了inline-block */
    /* position: absolute; */
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
}

报纸效果，图片环绕文字

        <img class="img1" src="images/spring.jpeg" alt="spring">
        四川省女子监狱，地处沱江中游简阳市养马镇。相传刘备取西川时，张飞带兵于此，曾饮马于江，故称养马。养马镇距成都50公里，简阳20公里，紧邻成渝铁路、成渝高速、成安渝高速。监狱始建于1963年，1964年2月由资阳县迁至此地，先后为四川省简阳劳动改造管教大队、劳动改造支队、四川省简阳少年管教所，1998年4月改建为“四川省女子监狱”。
        <img class="img2" src="images/autumn.jpeg" alt="autumn">
        前不久，七监区民警收到罪犯一份特殊的申请——“想在监区饭厅为陈警官举办一个退休仪式”。写这份申请的罪犯名叫易欢（化名），而她申请中提到的“陈警官”是她的主管警官陈素珍。有着38年警龄的陈素珍3月份就要退休了。易欢在申请中写道：……我看到陈警官很辛苦，每天守着我们开饭、学习、打扫卫生、定时消毒；我看到陈警官一边走路一边捶腰，她最近很累所以腰又疼了，每当这个时候我都很想去关心她一下，但又没勇气上前。我知道陈警官要退休了，我真的很想为她做点什么，如果再不做就没机会了……25岁的易欢是一名杀亲罪犯，刚来监区那会儿她性格自卑、孤僻，时常发呆、半夜哭泣，改造状态一直很消极，跟她现在阳光的样子判若两人。而这一切的转变，离不开一个人的功劳，这个人就是陈素珍。
        <img class="img1" src="images/winter.jpg" alt="winter">
        面对“蜷缩在自己世界中”的易欢，陈素珍给予足够的耐心和细心。每次上班，陈素珍第一件事就是找易欢谈话，关心她的生活和改造。天冷了让她注意加衣、天热了让她小心感冒、关心她的睡眠……尽管每次的关心得到的只是易欢一两个字的回答，“嗯”、“好”、“谢谢”……一次，监舍搬来了新犯，晚上因为梦魇而大声喊叫，这让本就睡眠不好的易欢一夜未眠。了解到情况的陈素珍一上班就找到易欢谈心，询问她与新同改相处得可好。易欢依旧沉默。陈素珍却并不在意，伸手帮她理了理卷在里面的衣领、衣角，帮她把囚服整理好。沉默着的易欢却因为陈素珍的这一举动突然哭了起来。
        <img class="img2" src="images/summer.jpg" alt="summer">
        您好，我是易欢（化名）。
        记得在我下队时就听说您还有一年多就要退休了，在这一年里，我总觉得离您退休的时间还很遥远，您会陪我很久。您常说，我是个挺乖的孩子，但我知道其实我需要学的东西还很多。您对我们监舍每一个人都很关心，天气冷了您会提醒大家记得增添衣物；每次您一上班就会安排我们给家人打电话；每次上班都会和我们聊天、谈心；每次我们有任何事情您都会尽力尽快的帮助我们解决，这确实让您操了不少心。
        在这14天里我多希望时间过的慢一点，和您相处的时间太少，有时看到您要去吃饭了，我就会想今天您的饭菜可口吗?饭菜冷没冷？早上起床后看到您，我会想晚上您有没有睡好？腰有没有疼？每次想起您要走了，鼻子会感觉酸酸的。希望您退休后，身体健康，一切平安。有空时，出去散散步，活动下身体，感受大自然的青山绿水。走路慢点，不要慌，不能急。特别是鞋子要穿好一点的那种，平滑的鞋底子就不要穿出门了。天冷的时候，穿暖和点，饮食上要营养均衡、注重健康，少吃冰冻过的食物、少吃含凉性的食物。陈警官，您放心，我会在这里好好改造，我会与所有同改一起努力、踏实改造，争取早日回归社会。您的爱一直在我们身边，永远都不会消失。最后祝陈警官：万事如意，家庭幸福。

*{
    margin: 0;
    padding: 0;
}


.img1{
    margin-right: 10px;
    /* 文字环绕图片 */
    float: left;
    width: 100px;
}

.img2{
    float: right;
    width: 150px;
    margin-left: 10px;
}

一个标准结构的导航栏

        <ul class="nav">
            <li class="list-item">
                <a href="#">天猫</a>
            </li>
            <li class="list-item">
                <a href="#">淘宝</a>
            </li>
            <li class="list-item">
                <a href="#">聚划算</a>
            </li>
        </ul>
        <!-- 没有消除浮动流，就会排列在导航栏的后面。消除了浮动流，就会排列在导航栏的下面。 -->
        asdfg

*{
    margin: 0;
    padding: 0;
    color: #424242;
    font-family: Arial, Helvetica, sans-serif;
}

a{
    text-decoration: none;
}

/* 消除浮动流，避免对后续产生影响 */
.nav::after{
    content: "";
    display: block;
    clear: both;
}


.nav{
    list-style: none;
}

.nav .list-item{
    float: left;
    margin: 0 10px;
    height: 30px;
    line-height: 30px;
    /* border: 1px solid black; */
}

/* 父子选择器 */
.nav .list-item a{
    padding: 0 5px;
    color: #f40;
    font-weight: bold;
    display: inline-block;
    border-radius: 15px;
}

.nav .list-item a:hover{
    background-color: #f40;
    color: #fff;
}

Nawkham

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实例：居中五环，两栏布局，两个经典bug,BFC,包裹浮动元素，开发实例，经验

实例：居中五环，两栏布局，两个经典bug,BFC,包裹浮动元素，开发实例，经验目录让五环居中两栏布局两个bugmargin塌陷垂直方向的margin父子元素是结合在一起的,它们俩会取最大的一个值解决方法: bfc; 改变父级的渲染规则，让父级变成bfc触发一个盒子的bfc的方法:position: absolute; 设置定位之后，这个盒子自然就成为bfc元素...
复制链接

扫一扫