码迷,mamicode.com
首页 > Web开发 > 详细

CSS布局中的问题

时间:2016-04-04 11:39:44      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

1. 高度自适应的问题
  1. 一个元素是否可以使用百分比显示,取决于它的父级元素,所以如果需要给此元素设置100%,那么需要先给父元素设置高100%。
  2. 一级元素的父元素是body,所以如果我们想让高度100%的话,那就给body设置高100%,但是又因为body的父元素是html,所以我们同时也要给html高设置成100%。

 

2. 什么是盒模型
  就是每个盒子都由内容(content)、填充(padding)、边框(border)、边界(margin)

 

3. 上下margin叠加的由来
  css设计者考虑到我们要对段落进行控制,比如多个p标签,如果这些p标签都具备margin属性的话,那么它们中的第一个段落距离顶部的外边距是10px,而后面的其他p标签具离顶部都是20px,这样的话排版就不一致,所以设计出这种空白边距叠加规则。

 

4. 解决margin上下叠加问题
  设置:float

追梦子博客。

5. IE6左右margin加倍问题以及解决
  单我们将一个盒模型设置成float以后如果有左右margin那么这个margin会是双倍的,解决方法:设置display:inline;

 

6. 文档流
  元素的排列方式

 

7. 文字围绕浮动之谜
  现象1、为什么IE6下非浮动元素不会被浮动元素覆盖?
    在IE中有特有的hasLayout规则,当一个元素拥有了布局,那么它忽略浮动元素应该占有的空间,所以它不会被覆盖,而是排列在浮动元素的右侧。布局就是给元素添加了宽,高等。解决方法就是不去触发IE的hasLayout。

  现象2、为什么在IE8等浏览器下,虽然非浮动元素按照我们的理解,它是被浮动元素覆盖了,但是它包含的文字为什么不会被覆盖,而是围绕浮动元素呢?
    浮动只会占据文本的,而不会占据块级元素。可以这样理解,但是从原理是不是这样,技术有限请自行查资料。

 

8. z-index的由来
  由于当我们使用了定位属性position以后,那么这个元素将脱离了文档流,并且这个定位的元素总是会覆盖前面的元素,所以设计者设计了z-index用来自由的改变覆盖的顺序。

CSS布局中的问题

标签:

原文地址:http://www.cnblogs.com/pssp/p/5351571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!