zoukankan      html  css  js  c++  java
  • CSS布局中的问题

    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用来自由的改变覆盖的顺序。

  • 相关阅读:
    【转】c#基础系列1---深入理解值类型和引用类型
    【转】Aspnet Core为什么支持跨平台
    [翻译svg教程]svg学习系列 开篇
    使用docker 解决一个小问题,你也可能用的到
    增加软链接
    漫长的表白
    被社会抽了一巴掌
    杂乱五章的2015年终总结
    [资源分享]yslow 与firebug 修复版本Firefox35【绿色版本下载】
    Web前端性能测试-性能测试知多少---深入分析前端站点的性能
  • 原文地址:https://www.cnblogs.com/pssp/p/5351571.html
Copyright © 2011-2022 走看看