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

  • 相关阅读:
    网站如何知道浏览器的用户在使用什么语言?
    安装 Couchbase 服务器
    windows Phone 浏览器窗口的尺寸
    【leetcode】 9. palindrome number
    Android Notification实现推送消息过程中接受到消息端有声音及震动及亮屏提示
    UVA 12487 Midnight Cowboy(LCA+大YY)(好题)
    Jenkins——应用篇——插件使用——Publish over SSH
    Linux经常使用命令(三)
    c++引用总结
    quickcocos2dx framework环境变 fatal error C1083: 无法打开源文件:“.Box2D/Dynamics/b2World.h”: No such file or d
  • 原文地址:https://www.cnblogs.com/pssp/p/5351571.html
Copyright © 2011-2022 走看看