Div+CSS布局常见问题
来源:互联网 发布:php 的加密方式 编辑:程序博客网 时间:2024/05/21 20:12
1.父元素不设置高度,子元素应用float属性,会造成父元素高度坍塌的问题,不能实现高度自适应
分析:浮动float属性会使得元素脱离当前HTML文档流,那么会使得:当前HTML文档会当作设置float属性的元素不存在一样。那么,由于这5个子元素都设置了float,所以可以看作父元素#container内根本没有内容,div在没内容的时候表现正好是高度=0.
解决办法:
a.设置父元素float
例如:
#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
float: right;
} 这样,父元素也是脱离当前文档流,子元素和父元素一起脱离,并且子元素仍在父元素内,父元素内容不空了,所以高度会适应子元素高度。
此方法有个缺陷是,父元素的宽度需要设置。
b.在最后一个设置浮动的子元素后加一个空div ,并且让这个div清除浮动。ps:在元素遍历的时候会出现问题
c.父元素设置overflow:hidden;zoom:1;
2.多个div嵌套时,子Div的margin-top不起作用
原因:盒子没有获得 haslayout 造成 margin-top无效
解决办法:
1、在父层div加上:overflow:hidden;
2、把margin-top外边距改成padding-top内边距 ;
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层div加: padding-top: 1px;
4、让父元素生成一个 block formating context,以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层div加:position: absolute;
- Div+CSS布局常见问题
- css+div标准布局常见问题及解决办法
- div+css 布局下兼容IE6 IE7 FF常见问题
- div+css 布局下兼容IE6 IE7 FF常见问题
- Div CSS布局常见问题:两个层之间的间隙
- div+css 布局下兼容IE6 IE7 FF常见问题
- div+css 布局下兼容IE6 IE7 FF常见问题
- css+div常见问题整理
- DIV+CSS DIV居中布局
- div+css布局入门
- div+css布局漫谈
- div+css布局漫谈
- Div+CSS布局入门教程
- div+css布局
- Div+Css布局漫谈
- div+css布局漫谈
- div+css布局实例
- div+css布局漫谈
- Andriod传递数据方式(老罗视频整理)
- 软考-系统开发与软件工程
- 软考-网络与多媒体
- 软考-数据库与标准化和知识产权
- LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- Div+CSS布局常见问题
- *(leetcode) Construct Binary Tree from Preorder and Inorder Traversal (tree)
- 网址备忘与分享
- 让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
- 你是山西煤老板-火车运煤
- Intersection of Two Linked Lists
- 第14周项目2(3)
- 黑马程序员——JAVA基础之List集合
- 图结构练习——判断给定图是否存在合法拓扑序列