我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。 众所周知高度塌陷的原因是因为子元素脱离文档流所造成的父元素塌陷(所谓的高度塌陷就是子元素和父元素不在一个层级,未设置高宽的父元素里面没有子元素的支撑就会塌陷)会影响页面布局和美观性。 以下提出几点解决方案 首先我们先引出一个 ...
分类:
其他好文 时间:
2019-09-12 21:29:31
阅读次数:
92
圣杯布局的要求:随着页面宽度的变化,三栏布局中的中间盒子优先自适应渲染,两边盒子宽度固定不变; 需求: 1.两边固定,中间自适应; 2.先加载middle内容; 3.三列等高布局; 步骤:布局:有头,有尾,有内容,middle部分要放在content的最前部分,然后是left,reight;浮动让三 ...
分类:
Web程序 时间:
2019-09-11 10:06:41
阅读次数:
85
伪类: 伪元素使用: 属性选择器: 子元素选择器: 兄弟标签: 否定伪类选择器: css 优先级: 字体文本设置: 盒子模型: 内联元素和块元素的相互转换: 文档流: 浮动: 高度塌陷问题: ...
分类:
Web程序 时间:
2019-08-31 01:01:01
阅读次数:
99
div::before ,在 div 内容的前面加一个伪元素 常用于处理 相邻父子元素外边距重叠问题 div::after,在div内容的后面添加一个伪元素 常用于处理 标签浮动,高度塌陷问题 :before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好 :befo ...
分类:
其他好文 时间:
2019-08-30 13:17:09
阅读次数:
61
我们在进行页面布局的时候可以发现元素在脱离文档流后,就会出现高度塌陷问题。 一、什么是高度塌陷? 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子box,其中在嵌套一个子元素小盒子box1。box设置边框宽度,而高度不去设置(高度会由内容撑开) 但是当我们向盒子里面添加内容的时候<div c ...
分类:
其他好文 时间:
2019-08-18 23:59:07
阅读次数:
287
1. 気張る 「きばる」 发奋,振作起来,努力 2. 小まめ 「こまめ」 忠实,诚恳,勤勉 3. 目を凝らす 「めをこらす」 凝视,仔细看 4. 輪っか 「わっか」 箍,环儿,圈儿,车轮 5. 垂れ下がる 「たれさがる」 下垂,耷拉 6. 砕ける 「くだける」 破碎,粉碎,碰碎,打碎 7. へたりこ ...
分类:
其他好文 时间:
2019-06-30 14:28:58
阅读次数:
109
一、固定布局(不适应设备的浏览器的变化) 扩展:高度塌陷 在文档流中,父元素的高度默认被子元素撑开,也就是子元素多高,父元素就多高。 在浮动流中,当为子元素设置浮动以后,子元素会完全脱离文档流,此时会导致子元素无法撑起父元素的高度,即会导致父元素的塌陷。由于父元素的高度塌陷,所以 会导致父元素下边的 ...
分类:
Web程序 时间:
2019-06-25 00:02:08
阅读次数:
155
当子元素不浮动的时候,父元素的高度是由子元素撑起来的。 子元素A和B是两个div,独占一行 效果如图: 当子元素B浮动起来之后,父元素高度塌陷到只剩子元素A的高度 效果如图: 当给子元素A(div)设置CSS属性:display:inline 后,A的宽高将不起作用,宽高由内容撑开,即被字母A撑开。 ...
分类:
其他好文 时间:
2019-06-24 00:44:10
阅读次数:
93
hello 朋友们,我又来了哦!对的没错,今天的话题呢就是高度塌陷。 首先要知道什么是高度塌陷。高度塌陷其实就是指当父元素没有给确定的高度(即父元素高度靠子元素撑起来),并且子元素添加了浮动时,内容无法撑起父元素的高度,即父元素发生高度塌陷。 解决办法: 第一种,开启元素的BFC,元素将会具有如下的 ...
分类:
其他好文 时间:
2019-06-09 13:12:24
阅读次数:
127
标准文档流,又叫普通流,文档流 是什么: 文档流就是html页面 文档流的布局方式:从左到右,从上到下 特点: 拥有块元素,行内元素, margin垂直塌陷,不能移动 文字空白出现折叠现象 文本类的元素会并排 高低不齐 底边对齐 文字排到最右侧,自动换行 html文档中的元素可以分为两大类:行内元素... ...
分类:
其他好文 时间:
2019-06-06 22:53:40
阅读次数:
119