奥林匹克做校服的网站,网站域名格式,做电影解析网站,企业级网站开发与部署文章目录 CSS和文档流如何证明这个流的存在呢#xff1f;流和display番外#xff1a;inline-block 碎碎念 CSS和文档流
首先什么叫流呢#xff1f;
通常来说#xff0c;我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果#xff0c;这种一个接一个输出的方式… 文章目录 CSS和文档流如何证明这个流的存在呢流和display番外inline-block 碎碎念 CSS和文档流
首先什么叫流呢
通常来说我们最终看到的网页是HTML文档中定义的各个元素挨个输出的结果这种一个接一个输出的方式就是HTML的默认文档流 如何证明这个流的存在呢
其实当你第一次使用 float 这个属性的时候你就已经接触到这个东西了来看这个例子
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idA classfloat-containerdiv idC classbox stylebackground: red/divdiv idD classbox stylebackground: green/div
/div
div idB我是B
/div
/body
/htmlstyle.float-container * {float: left;}.box {padding: 2em;}
/style我们给作为A子元素的C和D赋予padding和颜色让我们看到他接着输出了B
看似很正常其实很诡异 B是一个块状元素啊为什么看起来他跟A处在同一行呢他为什么不换行
我不打算卖关子其实B已经换行了只不过A的高度此时0
那你会说不对啊明明A的内部有C和D高度怎么可能等于0 这就是流在起作用A和B都属于HTML的文档流而C和D由于float的作用他们已经不属于文档流了他们属于浮动流这也是我们把元素设定成float的时候他会无视原有的元素的display值横向展示的原理。所以在我们计算A的高度时他会0。这一点你用F12可以证明也可以通过消除浮动让这个例子恢复正常你只需要加上这段代码就可以
#A::after{display: block;content: ;clear: both;
}这是清除元素浮动对元素的宽高值影响的标准写法 流和display
如果上面的例子改成这样又会发生神奇的事情
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idA classfloat-container我是Adiv idC classbox stylebackground: red我是C/divdiv idD classbox stylebackground: green我是D/div
/div
div idBspan我是B/span
/div
/body
/htmlstyle.float-container * {float: left;}.box {padding: 2em;}#A, #B {display: inline-block;vertical-align: bottom; /*如果不加这句你会发现A跟B对不齐*/}
/style这下B是真不换行了
先解释一下为什么会先输出C和D然后才输出 我是A 这句话
你知道float这个属性本来是用来干嘛的吗
这个属性最开始不是用来布局的他是用来实现那种类似报纸杂志上那种图片放在一侧旁边围绕文字的效果的。只不过他用来做布局太合适了所以才会被大量使用于布局。而且在那个没有流式布局、网格布局的年代浮动布局还真就是你最好的解决方案 但不是唯一的解决方案还有一些做法可以把元素用表格的方式显示。你可以说是网格布局的雏形但他其实是一种取巧的做法。在网格布局已经成熟的今天请抛弃这种写法 如果考虑到这个那就好理解了。我们float C和D那么他们肯定会被优先输出到文档流的最左侧然后输出A中的文档流也就是 我是A 这句话
接着B没有换行直接在后面输出了
没错这就是 display:inline-block 在起作用而不同的display是如何影响元素的那就要从CSS的盒模型说起了 番外inline-block 其实设定 float:left 跟 display:inlin-block 是一样的都是把元素从正常的文档流中写入到浮动流中。而且我们知道块状元素和行内元素他们是通过display这个属性来区分和获取对应的样式的display:block/inline。设定 display:inline-block 后相当于你无法使用这两种元素的样式所以最后你会得到一个 宽度由元素决定且不换行的块状元素而且他是处于浮动流的 碎碎念
HTML页面在输出元素的时候遵循一种被称之为 标准流 的顺序你可以修改display这个属性的值把元素从标准流中取出来设定float属性的时候其实他也是把display属性给修改了。所以设定了float的元素已经不在标准流中了因此标准流的元素在计算尺寸时不会考虑浮动子元素你可以通过 clear 属性来强制清除浮动流带来的影响inline-block 可以手动把元素写入浮动流最后你会得到一个宽度由元素决定且不换行的块状元素 万分感谢您看完这篇文章如果您喜欢这篇文章欢迎点赞、收藏。还可以通过专栏查看更多与【CSS笔记】有关的内容
