一、解决浮动带来的影响 1.浮动带来的影响 浮动在方便了块的左右移动的同时也带来了它的副作用： 出现父标签塌陷的问题 2.几种解决方法 1.自己加一个div设置高度 在设置了浮动的div后再根据浮动的这些div标签自己在手动加一个高度和设置的浮动div一样的div来防止塌陷 ps：这个办法是最没有技 ...
分类：
Web程序 时间：
2020-05-14 19:21:28
阅读次数：
62
浮动元素的四大特性： 1.浮动的元素脱标（脱离标准文档流） 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 清除浮动的四种方法： 给父盒子设置高度 clear:both 伪元素清除法 overflow：hidden 伪元素清除法： div::after{ display: bl ...
分类：
Web程序 时间：
2020-04-21 15:29:42
阅读次数：
89
max size max width属性意味着图片会随着包含它的容器缩小而缩小，但在容器变大时，它不会大到超过自身的固有尺寸 注意：父元素不要设置高度 有时候某些设计者或内容管系统会在HTML源代码中给图片天机awidth和height属性，这里把width和height设置为auto,某种程度上可 ...
分类：
其他好文 时间：
2020-03-06 21:41:26
阅读次数：
344
高度塌陷的产生条件：父元素没有设置高度，所有的子元素都浮动 父元素在文档流中高度默认是被子元素撑开的, 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷</title> 6 <style type= ...
分类：
其他好文 时间：
2020-03-01 20:19:44
阅读次数：
68
高度塌陷产生的原因: 高度塌陷： 当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。 例如： .father{ width: 600px; /* 给父元素一个宽度 */ background-color: #008000; /* 给个背景颜色 */ } .child_1{ ...
分类：
其他好文 时间：
2020-02-23 22:20:12
阅读次数：
75
Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。 但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。 就像下面这样 <html> <head> <meta charse ...
分类：
其他好文 时间：
2020-02-23 14:48:45
阅读次数：
54
PC端宽高自适应： 宽度设置：不设置宽度或设置width：100%；（显示状态：块状元素跟随父元素宽度变化） 高度设置：1 - 不设置高度或设置height：auto；（显示状态：高度被内容撑开。弊端：内容较少时网页高度偏小） 2 - 设置最小高度：min-height：；（显示状态：当内容超出最小 ...
分类：
其他好文 时间：
2020-02-22 13:51:12
阅读次数：
63
IE浏览器兼容问题小结 li空出4px（IE6、7） 描述 li的子元素浮动而li不浮动时，在li的下方会空出4px。li的子元素绝对定位时也会产生空白。 原因：li触发了haslayout，比如设置高度 Q: 只有li标签会这样吗？ S: 是的。其他元素都不会产生，如果都替换成div来实现就没有问 ...
分类：
其他好文 时间：
2020-02-20 14:58:52
阅读次数：
91
一、浮动 float: left right 左右浮动 ①.使用float的标签 脱离当前的文档流 （好像张了小翅膀一样 飞起来） div 不设置高度 默认里面内容的高度就是这个div的高度 ②.清除浮动 clear: left right both(同时清除左右浮动) 1、告诉无辜div，给浮动那 ...
分类：
其他好文 时间：
2020-02-20 13:09:31
阅读次数：
54
清除浮动：让浮动子元素撑开父级的高度 参考案例： 解决方式： 1. 给父元素设置高度 2. 让父元素开启BFC： 或者 3.使用br标签 4.空标签清除浮动 5.伪元素： 注：浮动盒子与定位盒子的宽高均由内容撑开 ...
分类：
其他好文 时间：
2020-02-10 09:38:32
阅读次数：
61
