css详细解释3

推荐学习链接：css盒子模型

1。盒模型的常用属性

1.1，填充

"en">

<元字符集="UTF-8">



"box">恶魔风暴

内容显示在左上角

如果我想让这个词移到右边。

#box{
宽度：200px；
高度：200px；
背景-颜色：红色；
 填充-左：20px；
}

在框的左侧添加填充，将框的内容移动到右侧。盒子变大了，从蓝色盒子里面写下

在一行中，因为你的padding增加，盒子变大，这会导致整个页面布局混乱。为了保持box的大小不变，增加的padding量会使box相应减小

垫如果使用得当，可以达到很多效果。以下是填充挤出的内容：

1.2，边框

"en">

<元字符集="UTF-8">



"盒子">

添加了一个带有黑色边框的div块

边框的三个元素，边框：1pxsolid#000；粗细、线型、颜色，也可单独设置

边框可以代表上、下、左、右，左右加宽：两个值分别代表上下、左、右

可以在边框上添加四个值，分别代表上、右、下、左

还可以修改线条样式，有四种：

实点虚线双；实线 点划线 双线

去掉背景颜色，只剩下边框

背景-颜色：红色；去除背景色

仅一侧：边框-上边框-右边框-下边框-左

添加背景颜色：

使用场景 border-top

1.3 制作三角形

"en">

<元字符集="UTF-8">



"盒子">

添加下边框：

添加图片以创建相框。

盒子的宽度和高度变小：

宽度：50px；
高度：50px；

盒子的宽度和高度变小：

宽度：10px；
高度：10px；

又变小了：

宽度：0px；
高度：0px；

不要降低边框：

左右设为透明色

#box{
宽度：0 像素；
高度：0 像素；
背景-颜色：#000；
边框-顶部：15px 纯黄色；
边框-左：15px实心透明；
边框-右：15px实心透明；
/*边框底部：15px纯紫色；*/
}

去掉背景色：

"en">

<元字符集="UTF-8">



"盒子">

三角应用场景：

使用删除线：

两个渲染方式不同的span标签

1.3，mag详细解释

"en">

<元字符集="UTF-8">



魔鬼来了小马过河

选择第一个

选择第二个

nth-child是css3的选择器

margin 是边距，即一个盒子模型与另一个盒子模型之间的距离。不仅网页上的div是盒子模型，网页上的任何标签都是盒子模型。任何带有填充边框的东西都称为盒子模型

设置右边距

方框 2 向右移动 20px

设置左边距，盒子向右移动100px，总共120px

margin在水平方向上和我们想象的一样，margin是叠加的。

我们来看看垂直边距

"en">

<元字符集="UTF-8">

将两个div的公共div{width: 200px;height: 200px}写在一起，将特有的写在特有的里面，节省代码，更简洁
两个div占一行

现在给第一个框一个 margin-bottom

第二个盒子向下移动30px，两者相交30px

我将在第二个盒子上添加一个顶部边距

结果是两者加在一起是100px，而不是130px。这种现象就是边际合并。可以理解为，三十口一张，百口一张，三十口的小口掉进一百口的大口，被埋了。换句话说，边距将在垂直方向合并。边距的距离以最大边距为准。以后编写网页时需要避免这个问题。边距合并也称为折叠。

也就是说像下面这样的地方，要么设置了bottom，要么设置了top，只设置了margin。这也避免了边距崩溃的问题。

如下：

"en">

<元字符集="UTF-8">



"box1">
"box2">
"box3">

当box没有p标签时，box2和box3在垂直方向上没有距离

当有p标签并且有距离时会发生什么？

"box1">
"box2">
"box3">
毫米

添加 p 选择器

我想把mm下移，紫色框可以使用margin-top

这也是一个崩溃的问题。保证金现象存在诸多陷阱

如果使用这种方法，也可以使用margin来调整距离，但是调整起来比较困难。这里使用浮动布局更方便

2。浮动属性的使用

2.1 浮动的初步认识

　　垂直方向折叠，给子框设置边距，全部在某些文档下面流动，（文档流式布局，从上到下，从左到右如流水般书写。不可能先写下面的写法再次上面。流体布局中有一个标准的文档流程，就是在浏览器页面中，你设置一个div之类的框，它总是从左上角开始）

例如下面的导航栏有一整个大div。中间有一个div框，然后是三个子div，分别包含导航、登录和购物车部分。这种方式最好采用浮动布局。浮动布局最初是为了解决文本换行问题而设计的。如果使用浮动，很容易出现文字换行。由于浮动可以实现并排显示，所以用于布局。在浮动布局之前，使用的是table。将整个表格的宽度设置为整个正文的宽度。桌子太麻烦了。使用浮动布局要简单得多。除了浮动布局之外，还有很多布局，比如定位布局、flash布局

"en">

<元字符集="UTF-8">




 

我喜欢去。
你到达的每一个地方都属于昨天。不管山有多绿，水有多美，风有多温柔。缠绵太深，就成了一种枷锁，束缚的不仅是你的脚，更是束缚着未来。
怎能不爱出发呢？可惜没有亲眼目睹山的雄伟；遗憾见识了山的雄伟，却没有见识过大海的博大；遗憾的是，看过大海的浩瀚，却没有看到沙漠的浩瀚；我还是很遗憾没有亲眼目睹沙漠的浩瀚。经历了森林的神秘，还是很可惜的。世间有无尽的风景，我有永恒的心情。
我自然知道山里有坎坷，大海里有波浪，沙漠里有风沙，森林里有猛兽。即便如此，我还是喜欢它。
打破生活的平静，是另一番景象，是属于青春的景象。我很庆幸我还没有老。如果你真的老了怎么办？不是有句话说老了让人更坚强吗？
所以，我还是想向山学习深邃，向大海学习勇敢，向沙漠学习冷静，向森林学习敏捷。我要学会品味多彩的生活。

现在看到的效果是图片和文字上下排列。

为p标签设置浮动属性。 float float 有三个值，一是none（标准流文档下所有元素都不浮动，标准文档流是网页上所有之前写的标签的布局），

这里有问题。修改代码，将图片放入div内部，并设置div向左浮动：

"en">

<元字符集="UTF-8">





我喜欢去。
你到达的每一个地方都属于昨天。不管山有多绿，水有多美，风有多温柔。缠绵太深，就成了一种枷锁，束缚的不仅是你的脚，更是束缚着未来。
怎能不爱出发呢？可惜没有亲眼目睹山的雄伟；遗憾见识了山的雄伟，却没有见识过大海的博大；遗憾的是，看过大海的浩瀚，却没有看到沙漠的浩瀚；我还是很遗憾没有亲眼目睹沙漠的浩瀚。经历了森林的神秘，还是很可惜的。世间有无尽的风景，我有永恒的心情。
我自然知道山里有坎坷，大海里有波浪，沙漠里有风沙，森林里有猛兽。即便如此，我还是喜欢它。
打破生活的平静，是另一番景象，是属于青春的景象。我很庆幸我还没有老。如果你真的老了怎么办？不是有句话说老了让人更坚强吗？
所以，我还是想向山学习深邃，向大海学习勇敢，向沙漠学习冷静，向森林学习敏捷。我要学会品味多彩的生活。

向左浮动后，p标签会移动到图像的左侧。这是文字换行

如果给p标签添加边框：

一旦设置了浮动，这些标签就不再是标准文档流的一部分。就会出现一个现象，浮动。该文档不再附加到该页面。这个 p 标签是从文档向下流动的第一个标签。将其向上推。虽然p框被向上挤压并占据了框的位置，但文本不会被挤压，仍然围绕着它。文本不会被覆盖。盒子盒子设置为浮动。当盒子浮动时，p会粘在父元素的一侧。如果两个盒子大小相同，那么p标签将被覆盖并且不可见。

如果给盒子设置了左浮动，它会寻找浮动盒子的边缘，边缘不会有可以折叠的空白。

嗯，这里我们为p标签设置一个浮点数，并开始一个新行。不知道原因：

看下面的例子：

"en">

<元字符集="UTF-8">



    

设置两个标准文档流下的盒子，块级标签，div标签，独占一行，上下排版

现在想让盒子在一行内显示，让红色盒子浮动

红色盒子浮动了，黑色盒子上去了。红色盒子浮动了，就不是标准文档流下的盒子了。黑色盒子浏览器认为是标准文档流下的第一个盒子。

黑色盒子实际上是被盖住了，

将黑色盒子的宽度改一改：

给黑色盒子加个左浮动：

黑色盒子浮动起来后出来了，贴的是红色浮动盒子的边，

浮动它有一种现象，一是：浮动脱离了标准文档流，脱标了，不在文档上占有位置了。下面标准文档流下的盒子就往上挤。

给红色盒子设置了浮动，它有种现象就是贴边，就是它会去找浮动盒子的边，它找不到浮动盒子的边就去找父元素的边，它的父元素是body。给黑色盒子设置浮动，它就去找浮动元素的边，即红色盒子的边

 2.2浮动在顶部栏的使用案例

这些地方都有container

如果写的没有渲染上，首先看看选择器是不是忘记写#.这些东西了。

先写一下top。

"en">

"UTF-8">



    

去掉所有自带的pading和margin。设置一个黑色的盒子。黑盒子里面设置一个红色的盒子。红色盒子设置margin-right: auto; 红色盒子默认从左边排列

将红色盒子设置成margin-left: auto;

红色盒子就往右边去靠了。

如果margin-left: auto;margin-ringt: auto;都使用，那么红色盒子就跑到中间去了。实现了子盒子在父盒子中的居中。给子盒子左右margin都设置成自动

        .container{
width:1226px;
height: 40px;
     margin-right: auto;
margin-left: auto;
background-color: red;
}

实现子盒子在父盒子中的水平居中，还可以简写：

        .container{
width:1226px;
height: 40px;
 margin: 0 auto;
background-color: red;
}

给子盒子的margin 上下设置成0，左右设置成auto。（黑色变少了，我调整浏览器100%正常显示了）

在上面基础上添加top_l类盒子的选择器，后面的几个盒子都是红色盒子的子盒子，排列从红色盒子开头开始：

现在添加另外两个红色盒子中的子盒子：

查看异常，不是想象中的，竟然把我得第一个黄绿色盒子变没了。原因是我第三个盒子的命名写错了，复制过来忘记修改名字 #top .top_l

改掉选择器名字

选择正确的这三个div将块变成行内块：

  #top .container div{display: inline-block}

结果存在空白折叠。如果想把后两个盒子放在右边，还需要测量尺寸。

现在去掉行内块的设置，回到之前的操作：

现在给绿色盒子设置成左浮动：

        #top .top_l{
width: 300px;
height: 40px;
background-color: greenyellow;
float: left;
}

蓝色盒子成为了红色盒子中的第一个标准流的盒子。被浮动飘起来的绿色盒子压盖了。

再给蓝色盒子设置左浮动，蓝色盒子贴着绿色左浮动的盒子，黄色盒子成了红色盒子中标准文档流的第一个盒子，并且被覆盖住了。

        .container{
width:1226px;
height: 40px;
margin: 0 auto;
background-color: red;
}
#top .top_l{
width: 300px;
height: 40px;
background-color: greenyellow;
float: left;
}
#top .shop{
width: 100px;
height: 40px;
background-color: blue;
float: left;
}

现在给红色盒子内的三个盒子选择器都设置float: left;  实现了多个子元素盒子排在同一行，而不是按照块元素独占一行来显示了。

现在将蓝色盒子和黄色盒子设置成右浮动。

        #top .shop{
width: 100px;
height: 40px;
background-color: blue;
float: right;
}
#top .login{
width: 130px;
height: 40px;
background-color: gold;
float: right;

这样就实现了这两个盒子在右边

下面来看顶部元素的大致的布局：

"en">

"UTF-8">



"top">
class="container">
class="top_l">导航
class="shop">登录注册
class="login">购物车

这样就实现了顶部的布局：

原网页的顶部栏样子：

2.3分析网页的元素组成

分析下面的这行：

 这一栏跟上面类似，有个一样的container。1处包着一个div,div里面包着一个图片。2里面有ul，ul里面有li，li里面有a。3里面有个form表单，form里面有两个input

背景色rgba background-color: rgba(255,255,255,1);
将登录注册的改为rgba，RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间，也就是透明度/不透明度。

        #top .login{
width: 130px;
height: 40px;
background-color: rgba(255,255,255,1);
float: right;
}

盒子也是有先后的，两个盒子一起右浮，先定义的盒子先浮动，在右边，后定义的盒子在从右数随后。

将登录设置成.2增加了透明色，父标签的底色都显现了。background-color: rgba(0,0,0,.2); 最后一个数可以调整透明度的吧？

三个div都浮动了。第三个div里面form的两个input再浮动就与外面浮动没有任何关系，因为一个也是一个逻辑区，不一定非得是div，只要是把它包裹的东西就行了。比如ul里面所有的li也是逻辑区，鼠标悬浮在电视这个li里面的时候，下面出现的东西也是包裹着li里面的。li标签里的也需要浮动。搜索图标和搜索框间没有空白折叠，这里可以用浮动，也可以用写在一行实现呀。 

这里面有个div，div里面有个ul,ul是红框大小，上左下都有pading。首先看它的内容是在哪里显示的，应该是从左上角开始的。一行就是一个li标签，箭头那里就是一个span标签

先想一个大的结构，再想单块，四块div，再想想怎么在一行内显示。大的结构写好了再写里面细的内容。这里应该也有大的div，里面有个容器div,然后才是四个小div的吧？再思考一下，左边那个和右边三个似乎没有关系。左边那个是独立的，右边三个是独立的整体。那么可不可以认为左边是个div，右边是个ul，这个是不是叫图片列表。那么用div可以么，可以。但是列表列表，指的是相同的内容列表。这里右边三个都是一样的。然后左边黑色的左浮，右边的右浮。左边的黑色左浮，右边的左浮也可以，然后里面的三个小元素也左浮。

  思考这里应该是一张图，上下有margin

2处是左浮，3处是个图片列表，一个ul里面8个li。第5个li放不下了就换行显示。即浮动元素放不下了，就换行贴着父元素的边。然后再做每个li里面的内容。如果光写大的盒子用颜色来表示的话，那么网页的结构，架构啊就写出来了。如果你能把结构画出来，那么就用标签给它表现出来。
https://www.sychzs.cn/web/3/63 的34,35有两个对网页的整体架构分析。推荐看看。

3、浮动的知识

3.1、浮动带来的问题 

浮动带来的问题：浮动脱标不占位置，那么所有的盒子都设置固定高度么？如果我不知道这个盒子内容有多少，需要多少高度，那么如何让它去适应适合的高度。一个父盒子，怎么知道自己需要多少高度呢？靠内容。内容5000就5000的高度，内容一万就一万的高度，让父元素适应高度。如果一个父盒子，往里面添加了内容，需要的高度变了，那么应该让它自己适应这个高度，不能一直手动计算并修改这个高度。子盒子设置高度，希望它撑起父元素的高度。但是父盒子下有多个子盒子都是浮动的脱离标准文档流的。怎么能撑起父盒子的高度呢？浮动带来的问题：撑不起父盒子的高度

 浮动能实现块元素并排。能实现一行两列三列的布局。上面就是三列布局，可以把它看做table的一行，多列单元格，分列布局。网页其实就是一个表格，行和列的存在。 

浮动的作用： 实现元素并排

3.2、浮动的现象

1.脱离标准文档流，不在页面上占位置 “脱标”

"en">

"UTF-8">



class="father">
class="child1">
class="child2">

现在父盒子802*802px，宽高800,800，作为body的第一个元素，排列方式是始终在左上角，这是标准流文档排列下的方式。红色盒子是作为父盒子黑框的第一个元素在左上角，绿色黑子作为黑框的第二个子标签。因为独占父元素的一行，上下排列。

现在给第一个红色盒子设置一个左浮动属性，它就脱离标准文档流了，不充当标准文档流下的黑框的第一个元素了。红色盒子飘起来了 ，绿色盒子还是标准文档流下的盒子，它会认为绿色盒子是标准文档流中的第一个盒子。就会往左上角去挤。此时同时也出现了压盖现象，红色盒子压盖在了绿色盒子上面。

        .child1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}

绿色盒子不想被红色压盖就需要做层级优先显示，下面地方就用了层级，压盖了原来的内容，上面的优先级要大：

包括这里也层级，存在优先级显示：

 外面的div是标准流下的盒子，1处就是一个浮动的盒子，只要给它设置浮动就会压盖掉父的

 1跟2是有关系的，点击1浮现2,。1是li标签里的,包着一个子盒子2，hover

那么这里隐藏了内容了。比如过节优惠活动的时候这里就出现了。这是预留的位置

一般是张动态图

上面就是浮动的第一个现象，脱离标准文档流，不在页面上占位置

现在不给父盒子设置高度，父盒子是200

/*height: 800px;*/

取消红色第一个盒子的左浮动之后，父盒子高度被内容填充到了200+200=400：

继续给红色盒子设置左浮动属性，那么红色盒子不占位置了，父元素的盒子变成了200.

这就是浮动之后脱离标准文档流，不在页面上占位置

下面给父元素添加一个属性：

        .father{
width: 800px;
/*height: 800px;*/
border: 1px solid #000;
    margin: 100px auto;
}

上下100px，左右居中，贴着父元素的边

红色盒子贴着父元素的边，绿色盒子设置左浮之后会贴着红色盒子的边，贴边现象。

浮动的现象之一：贴边现象

这时，让绿色盒子设置左浮动，出现一个问题：

这两个盒子都不占位置，父元素的盒子没有设置位置，现在父元素的高度就是边框2px。

 这时假如我在下面有个导航栏，导航栏应该放在哪里？就会放在2px边框下面，这样就全乱了。

这时我将红色盒子200px的宽度注释掉，绿色盒子的宽度也注释掉，这两个div放入内容。

"en">

"UTF-8">



class="father">
class="child1">魔降风云变
class="child2">小马过河

View Code

这两个盒子去掉宽度之后，盒子的宽度就是里面内容的宽度，高度还是有的。这是浮动的现象之一：收缩现象

"en">

"UTF-8">



class="father">
class="child1">魔降风云变
class="child2">小马过河

View Code

此时，再把红色盒子和绿色盒子的浮动属性去掉，两个div各占一行：

给红色盒子设置浮动之后：

再给绿色盒子设置浮动之后：

给绿色盒子设置右浮:

上面栗子明显看出，浮动元素有收缩效果发生，并且父元素没有高度时是撑不起父盒子的。撑不起父盒子，如果父盒子下面有盒子的话，就会占领红色和绿色盒子所在的区域。这样页面就混乱了。

4、清除浮动

清除浮动作用，我的理解是：在父盒子不设高度，需要用内容来撑起父盒子的高度的情况下，清除浮动带来的不能支撑起父盒子的问题（影响）。

什么时候清除浮动？我的理解满足两个条件是：1、div这类的浮动实现并排 2、父盒子没设置高度。

4.1、给父元素添加固定高度

        .father{
width: 800px;
height: 200px;
border: 1px solid #000;
margin: 50px auto;
}

给父元素添加和子盒子一样的高度，父元素撑起了的，但不是子盒子撑起来的：

这时红色盒子突然有添加高度的需求了，又出现问题了。

        .child1{
/*width: 200px;*/
height: 400px;
background-color: red;
float: left;
}

，子元素在父元素高度外，父盒子相当于是没有撑起来，页面又会出现混乱

将父盒子高度再次修改成最高的子盒子高度，又不会影响页面了。

一个网页有特别多几百上千的浮动，那么每次都要手动去改父盒子的高度吗？显然不可能的。

所以给父元素添加固定高度，不灵活。后期不易 维护。但是如果是万年不变导航栏是可以使用这种方法的。

 比如这里，没有变化的需要，将父盒子高度固定了。

 4.2内墙法

给浮动盒子的最后放一堵墙，这堵墙设置一个属性，这个属性解决这个问题。这堵墙一般是clear both。这样就不用自己去计算浮动元素的高度了。

内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both;
问题：冗余

"en">

"UTF-8">



class="father">
class="child1">魔降风云变
class="child2">小马过河

View Code

现在去掉父盒子的高度：

添加clear both；

     .clear{clear: both}
class="father">
class="child1">魔降风云变
class="child2">小马过河

解决了浮动元素撑不起父盒子的问题：

但是内墙法有缺陷，一个网页有很多个浮动，每次都要在所有子盒子后面添加

4.3伪元素清除法

        .clearfix::after{
content: '&';
}


class="father clearfix">
class="child1">魔降风云变
class="child2">小马过河

添加一个伪元素选择器，在父盒子内容的最后添加一个内容。给需要添加的父盒子添加这个类

下面出现了文字环绕现象

内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both;

现在，给给最后一个浮动元素的后面添加一个空的块级标签。转块级标签，并且使用clear: both;

这样就撑起了父盒子，但是现在不想要&符，去掉它

        .clearfix::after{
content: '';
display: block;
clear: both;
}

如果我想用&，怎样去掉它？display: none;？会把前面的覆盖掉，又没有撑起来了。

但是可以这样：

        .clearfix::after{
content: '&';
display: block;
clear: both;
visibility: hidden;
}

这个属性将可以看见的隐藏，但是空行还在，占位置

那么把这个位置去掉：

        .clearfix::after{
content: '&';
display: block;
clear: both;
visibility: hidden;
    height: 0;
}

这样清除会多出几行代码。不如直接用空格的:

        .clearfix::after{
content: '';
display: block;
clear: both;
}

4.4 overflow：hidden；

 overflow的功能演示：

"en">

"UTF-8">



class="box">
燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他 们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？
我不知道他们给了我多少日子，但我的手确乎（1）是渐渐空虚（2）了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔（3）而泪潸潸（4）了。
去的尽管去了，来的尽管来着；去来的中间，又怎样地匆匆呢？早上我起来的时候，小屋里射进两三方斜斜的太阳。太阳他有脚啊，轻轻悄悄地挪移了；我也茫茫然跟着旋转。于是——洗手的时候，日子从水盆里过去；吃饭的时候，日子从饭碗里过去；默默时，便从凝然的双眼前过去。我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐（5）地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。 
在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊（6）罢了（7），只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝（8）样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸的回去罢？但不能平的，为什么偏要白白走这一遭啊？ 
你聪明的，告诉我，我们的日子为什么一去不复返呢？

文字太多超出了设定的高度，

其实里面使用默认属性

overflow: visible

 现在设置超出部分隐藏：

  .box{width: 200px;height: 200px;border: 1px solid #000;overflow: hidden}

隐藏看不见了，但是超出的我还需要：

     .box{width: 200px;height: 200px;border: 1px solid #000;overflow: scroll}

下面没有滚动栏的属性值；

       .box{width: 200px;height: 200px;border: 1px solid #000;overflow: auto}

还可以继承父的超出部分的怎么做：

使用这个属性之前：

"en">

"UTF-8">



class="father">
class="child1">魔降风云变
class="child2">小马过河

View Code

使用这个属性之后，

        .father{
width: 800px;
margin: 50px auto;
border: 1px solid #000;
overflow: hidden;
}

给父盒子使用overflow: hidden;之后，父盒子被撑起来了。

实现的原因：使用overflow: hidden;之后，在CSS2.1版本中会撑起一个BFC 块级格式化上下文

5.BFC详解

 https://www.sychzs.cn/details/355/

BFC布局规则

1. 1.内部的Box会在垂直方向，一个接一个地放置。
3. www.sychzs.cn垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
5. 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
7. 4.BFC的区域不会与float 元素重叠。
9. 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
11. 6.计算BFC的高度时，浮动元素也参与计算

那些元素会生成BFC

1. 1.根元素
3. 2.float属性不为none
5. 3.position为absolute或fixed
7. 4.display为inline-block
9. 5.overflow不为visible

.overflow不为visible时会产生BFC。BFC会自动让内部浮动元素计算高度。浮动带来的影响就是子元素不会计算高度，父元素不知道用哪个高度，撑不起父元素。BFC以最高的元素为基准撑起父元素。

"en">

"UTF-8">



class="father">
class="child1">魔降风云变
class="child2">小马过河

View Code

取消红色和绿色盒子的浮动，给父盒子添加属性overflow: hidden;  这样就形成了BFC（可查看形成的条件在上）：

验证了第一句话：1.内部的Box会在垂直方向，一个接一个地放置。

由以前博客（塌陷问题）可知：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

根元素也是实现了BFC的。

 将红色盒子设为左浮动（出现了收缩现象），浮动和不浮动的盒子都是贴着父元素左边。

由此证明：3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

 哪些会形成BFC   2.float属性不为none

 红色盒子左浮的时候，float属性不为none形成BFC，绿色盒子宽度800px

将绿色盒子设置成overflow:hidden的时候绿盒子形成BFC：。4.BFC的区域不会与float 元素重叠。

两个都是左浮的的子盒子一般都是形成BFC  。 4.BFC的区域不会与float 元素重叠。 所以两个左浮的盒子一个贴父元素的边。一个被挤出第一个浮动元素的BFC，贴着第一个浮动元素，实现并排。

1. .BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
3. 6.计算BFC的高度时，浮动元素也参与计算

像下面这些元素：

这些可以显现出来的不能用overflow:hidden；否则超出部分隐藏，那么就显示不出来这些内容了。如果这行没有需要显现出来的这种效果，那么可以用overflow:hidden。上面的那个都是用的固定高度。

清除浮动 给父元素添加固定高度，内墙法，伪元素清除法，overflow:hidden    伪元素清除法不会出现问题，overflow:hidden 需要注意超出部分也会隐藏的问题。

6、绝对定位和相对定位

 6.1技术使用到的地方举例

鼠标悬浮时，form表单颜色加深

鼠标悬浮小米9，也有改变。 悬浮  伪类选择器   hover

鼠标悬浮搜索图标，改变：

小米9和小米9 SE 怎么实现在搜索框里呢？定位实现的。并且这两个是压盖在了input上面。

下面购物车这里下拉下来了，下拉下来是js操作，一个动画，卷帘门效果下拉的。下拉下来的这块内容优先级是大于下面那块内容的。

下面红框是定位效果：

看下面：1是2定位过去的

还用了清除浮动，在下边的div里。

6.2相对定位：

 (子盒子设置相对定位后)相对于原来的位置，移动方向与属性(上下左右)反，移动属性值个单位

"en">

"UTF-8">



class="box">
class="a">
class="b">
class="c">

三个标准文档流下的盒子：

给b绿色盒子设置相对定位：

        .box .b{
width: 200px;
height: 200px;
background-color: green;
 position: relative;
}

给b设置相对定位后刷新没有效果，说明设置相对定位后与我们的标准文档流的盒子没有区别，也米有像浮动一样脱标

设置相对定位后，可以使用上下左右四个属性的英文做设置。那么我用top试试：

        .box .b{
width: 200px;
height: 200px;
background-color: green;
        position: relative;
top :30px;
}

结果是在父盒子中，设置了相对定位的绿盒子相对于原来它在标准文档流下当前盒子所在的位置下移30px，top 30px 顶部距离原位置30px，移动方向与属性相反。并且原来的位置不像浮动那样，它还是占有原来的位置。移动后显示的位置如果存在其它元素，会存在压盖现象。这里是绿色压盖了蓝色

如果我再给第二个盒子设置一个left

        .box .b{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top :30px;
left: 50px;
}

 (子盒子设置相对定位后)相对于原来的位置，移动方向与属性(上下左右)反，移动属性值个单位

虽然这样可以实现压盖，但是原来的位置还保留在那里，会影响整个布局的。

那么这种相对定位的使用场景一般是做子绝父相的布局。子元素设置绝对定位，父元素设置相对定位。

特征：

• 与标准文档流下的盒子没有任何区别

• 留“坑”，会影响页面布局

作用：

做“子绝父相”布局方案的参考

参考点：

 　　以原来的盒子为参考点

6.3绝对定位

"en">

"UTF-8">



class="box">
class="a">
class="b">
class="c">

View Code

回到之前的状态

给b绿盒子设置绝对定位

        .box .b{
width: 200px;
height: 200px;
background-color: green;
 position: absolute;
}

c蓝色盒子不见了

给蓝色盒子宽度加100，改成300。发现绿色盒子是脱标了。

给一个标准流文档下的盒子设置了绝对定位，第一种现象是它脱标了，不在页面上占位置

购物车这里也是脱标了，不在页面上占位置。如果它在页面上占位置，那么整个导航就会被拖下去的。所以说这里肯定也是绝对定位的。所以做压盖的时候我们一般使用的是绝对定位

压盖

压盖

绝对定位也有四个属性：上下左右

这里给b绿色盒子设置绝对定位top 20px

        .box .b{
width: 200px;
height: 200px;
background-color: green;
            position: absolute;
top:20px;
}

那么b绿色盒子距离顶部20px，是以body为参考呢还是以父盒子为参考呢？给父盒子上下设置margin，左右居中

 .box{width: 500px;height: 600px;border: 1px solid #000;margin: 100px auto}

我再给b绿盒子设置一个left值

我将b绿盒子绝对定位的属性上左设置为0px：

        .box .b{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top:0px;
left: 0px;
}

当我将b绿盒子设置下左0px的时候，它以浏览器显示的左下角为目标，即使改变左下角的位置它还是跟着移动

设置绝对定位的子盒子右下0px

我把滚动条下移：它动了

我将它放到右上角，移动滚动条，它最终会变没的。

 1、不针对于祖先元素的参考点
有top参与的情况：参考点是页面的左上角或者右上角。
有bottom参与的情况：参考点是首屏的左下角或者右下角。

所以绝对定位是：子盒子设置了绝对定位，上下左右的属性值是距离上下左右的距离。它脱离标准文档流不占位置了。一个属性时就还有一边跟父盒子对应。

"en">

"UTF-8">



class="box">
class="a">
class="b">
class="c">

View Code

现在让b绿色盒子绝对定位且下20px，左20px。绿色盒子脱离了标准文档流不占位置。

6.4、子绝父相的布局

子绝父相总结：

绝对定位的子盒子以离它最近的相对定位的祖辈盒子的对应角为原点。(跟margin无关，跟相对定位的祖辈盒子的border有关)。如果祖辈没有设置相对定位的，那么以浏览器显示框的四个对应角为原点。子盒子用上下左右属性来定位自己对应边距离对应原点上下左右属性值个位置。属性值可以为负，负为在父盒子或浏览器显示框的外部区域；正为父盒子或浏览器显示框的内部区域。

再让父盒子设置相对定位

 .box{width: 500px;height: 600px;border: 1px solid #000;position:relative}

绝对定位的子盒子以相对定位的父盒子的四个边为参考做绝对定位。

给设置了相对定位的父盒子设置右浮，父盒子在body下往右靠，绝对定位的子盒子也跟着走，相对于父盒子的位置不变。

加相对定位的绿盒子下属性改为top属性，

子绝父相。父正常改变位置，子相对父位置不变，子以父的四个顶点为原点，在父内绝对定位且父内空间为正坐标，超出父则为负坐标。

 子绝父相。父正常改变位置，子相对父位置不变，子以父的四个顶点为原点，在父内绝对定位且父内空间为正坐标，超出父则为负坐标。

下图父相对对定位且右浮。子（绿色）绝对定位left: 20px;bottom: -50px;   在父内绝对定位且父内空间为正坐标，超出父则为负坐标。左20子左在父内距父左20。下-50子下距父下50且子下在父外，父外为负，父内为正，父边为0。

 现在如下：

 子绝对定位，左20，下-50。

        body{margin: 100px;border: 4px solid yellow;}
#father-of-box{border: 4px solid purple;width: 800px;height: 800px;}
.box{width: 500px;height: 600px;border: 1px solid #000}

"en">

"UTF-8">



"father-of-box">
class="box">
class="a">
class="b">
class="c">

View Code

box，father,body没有设置相对定位。box内第二个盒子绿盒子绝对定位左20下-50结果以浏览器显示出来的对应角为原点，参考点不是body的边界，在body的margin内的角。

 现在给father-of-box设置相对定位。

 #father-of-box{border: 4px solid purple;width: 800px;height: 800px;position: relative}

 现在绿盒子以father-of-box的左下角为原点。

给father-of-box左margin20，下margin60，绝对定位的子盒子以离它最近的相对定位的祖辈盒子的对应角为原点。(跟margin无关，跟相对定位的祖辈盒子的border有关)

将box设置为相对定位：

 .box{width: 500px;height: 600px;border: 1px solid #000;position: relative}

 将box设置为相对定位后，因为绝对定位的子盒子以离它最近的相对定位的祖辈盒子的对应角为原点。(跟margin无关，跟相对定位的祖辈盒子的border有关)，所以以box的左下角为原点

子绝父相总结：

绝对定位的子盒子不占标准文档流的空间，但是会压盖别人的位置。绝对定位的子盒子以离它最近的相对定位的祖辈盒子的对应角为原点。(跟margin无关，跟相对定位的祖辈盒子的border有关)。如果祖辈没有设置相对定位的，那么以浏览器显示框的四个对应角为原点。子盒子用上下左右属性来定位自己对应边距离对应原点上下左右属性值个位置。属性值可以为负，负为在父盒子或浏览器显示框的外部区域；正为父盒子或浏览器显示框的内部区域。

 6.5浮动和绝对定位的特征：

"en">

"UTF-8">



魔降风云变

给它span设置一个左浮动：

span{background-color: red;float: left}

去掉浮动，再添加一个span，

"en">

"UTF-8">



魔降风云变
我是小马过河

View Code

有空白折叠

将两个设置左浮动

span{background-color: red;float: left}

去掉了空白折叠

 span{background-color: red;float: left;width: 200px;height: 60px}

添加左浮动之后，行内标签span不用转行内块也可以设置宽高了。这时浮动元素带来的特征

"en">

"UTF-8">



魔降风云变
我是小马过河

给span行内标签设置绝对定位也可以添加宽高，但是相对定位是不可以的。一旦给一个元素设置了浮动，它的宽高就不受限制了。

比如下面这个logo，设置了margin-top不好使了。会拽着父元素往下走

"en">

"UTF-8">



class="container">
class="logo">

想要将黄色盒子在褐色盒子中垂直居中，

给log添加一个margin-top,父盒子容器被拉下来了，但是log还是没有动

        .logo{width: 55px;height: 55px;background-color: #ff6700;margin-top:30px}

给log再加个浮动：

.logo{width: 55px;height: 55px;background-color: #ff6700;margin-top:30px;float: left}

让子盒子垂直居中，需要让子盒子在父元素中设置浮动，才能使用margin-top的方法将子盒子在父盒子中垂直移动位置

7、iconfont使用方法

小图标使用的是iconfont

像这种小图标，如果东西多了占用自己的带宽，请求自己的也多了。如果是用的别人服务器里写好的图标，自己服务器压力也能减小一点。

 网址：https://www.sychzs.cn/

它们其实就是ttf字体文件

可简单搜索,下载调色:

添加入库：

添加至项目->没有项目就新建->添加到项目中可以查看到刚才添加的图标。如果用链接的方式有三种用法 unicode 、font class 、symbol。

不会使用的话查看这里

解压之后目录修改为fonts目录，demo里面有使用方法。删了就行，没用。

 在css目录下创建myIconfon.css样式，将使用方法里的内容复制到样式文件中。url改为正确的fonts目录这个路径下。

样式和字体配置好后就可以在html中引入这个css样式

第三步：挑选相应图标并获取字体编码，应用于页面class="iconfont">3i>

 

 使用案例：

"en">

"UTF-8">
"stylesheet" href="css/myIconfont.css">



class="iconfont active">
"submit" value="" class="iconfont">

通过font-size: 30px控制图标大小。

如果我把fontface的字体文件路径注释掉，就成了小方框

css配置的代码：css和fonts同目录下。

@font-face {font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

这样几个小图标也是iconfont

 

 还有另一种方法使用，使用网上的字体样式而不是本地下载下来的。

将本地的字体文件地址改成网络上的地址链接，一样可以使用：

 

8、子绝父相的应用案例之一

大框是个div，1和2是个div。2里面有个图片。1里面有个3是列表ul，4这里隐藏了一个li，类名从下面的元素审查里看出和其它li标签有区别，这里隐藏了。

这个隐藏的li里面有个子标签div。

li父元素设置相对定位

子元素设置绝对定位。子绝父相的结构：

 子元素top  88, 向下移了88；left -92  负的  向左移了92，到了现在的位置。子绝父相，绝对定位不占位置。这个div覆盖了下面的图片，但是透明度高，能看到一点压盖的图片。它的优先级z-index是21，比下面图片优先级高，压盖了下面的图片。

 

"en">

"UTF-8">



"box">

class="active">魔降风云变1
class="active">魔降风云变2
class="active">魔降风云变3
class="active">魔降风云变4
class="active">魔降风云变5
class="active">魔降风云变6
class="active">魔降风云变7
class="active">魔降风云变8
class="active">魔降风云变9

一个居中div，里面有ul，很多个li。

 清除浮动

        #box ul{
    overflow: hidden;
}

9个li要浮动，overflow: hidden;要做清除浮动

ul大小，宽高用内容来填充。ul上右设置padding

 

默认margin和padding没有取消，取消默认：

ul中默认有黑圆圈这些，取消默认 

 ul{list-style: none}

把两个背景色去掉，内容从这里开始显示：

ul大小这样的：

让url下的每个li浮动，第一个li单独设置一下，设置宽度100px吧。，高度和ul高度一样就可以。将ul宽度取消，给li设置宽度，有几个li就计算出来，然后在加上第一个li设置的100宽度。

 

ul宽度不够，li少了一个

去掉ul的宽度：

让li里的文字居中，可以padding-top去挤，

        #box ul li{
float: left;
width: 60px;
height: 88px;
 padding-top: 30px;
}

"en">

"UTF-8">



"box">

class="active">
魔降1
魔降2
魔降3
魔降4
魔降5
魔降6
魔降7

View Code

加上背景色，有个盒子想调整到这个位置上：

#box ul{
    overflow: hidden;
    padding: 12px 0 0 30px;
    /*width: 500px;*/
    height: 88px;
    background-color: red;
}

 #box ul li{
float: left;
width: 60px;
height: 88px;
padding-top: 30px;
}
#box ul www.sychzs.cn{
width: 100px;
height: 88px;
background-color: green;
       position: relative;
}
#box ul www.sychzs.cn .box{
       position: absolute;
width: 234px;
height: 600px;
             background-color: rgba(0,0,0,.2);
top: 0;
left: 0;
}

加个绿色盒子的子盒子（透明色的盒子），子盒子绝对定位，绿盒子相对定位。子盒子上左为o。因为设了超出部分隐藏属性，所以没显示。

 

我希望透明盒子下移再右移，那么就不能用overflow: hidden;。去掉overflow:hidden ,使用伪元素清除法。

        .clearfix{
          content: '';
clear: both;
display: block;
}
class="clearfix">

去掉overflow:hidden ,之前使用它的目的是ul

取消掉ul属性padding-top

 

        ul{list-style: none}
#box ul{
/*overflow: hidden;*/
padding: 12px 0 0 30px;
/*width: 500px;*/
height: 88px;
background-color: red;
}
#box ul li{
float: left;
width: 60px;
height: 88px;
background-color: yellow;
}
#box ul www.sychzs.cn{
width: 100px;
height: 88px;
background-color: green;
position: relative;
}
#box ul www.sychzs.cn .box{
position: absolute;
width: 234px;
height: 600px;
background-color: rgba(0,0,0,.2);
  top: 88px;
left: -30px;
}

top是下移绿盒子高度值个单位，left是子盒子左远离父盒子左的单位数，是负值。因为子盒子要和红盒子左竖直方向对齐，所以左移ul在红盒子的左padding值。

 

这个也是定位：

 

图片src，文本都是数据：图片放在某个目录下，数据库存这些图片的信息及图片的地址。看这些联想表的结构是什么样的。

 

 看图片想象数据库表的结构：一条数据，可以是表的一行。字段有 id ，推荐，文章标题，内容，发布时间，阅读等等。如果自己建立表的话，存储字段是怎样的。