文档章节

CSS布局中的问题

clearloveing502
 clearloveing502
发布于 2016/06/03 17:57
字数 646
阅读 14
收藏 0

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

© 著作权归作者所有

clearloveing502
粉丝 0
博文 10
码字总数 4926
作品 0
西安
私信 提问
如何快速学习 CSS Grid 布局 - 相关资源和教程推荐

本文首发于:www.css88.com/archives/86… 这篇文章是 CSS Grid 布局有用的资源和教程,帮你快速了解相关知识。同时还比较了 CSS Grid 、 Flexbox 、 Table 布局之间的区别,及适用情况。 CS...

愚人码头
2018/10/29
0
0
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方
2018/01/04
0
0
zhangjing/quickly-css

简介 quickly-css是一个快速书写CSS样式的类库,项目采用scss,gulp构建,quickly-css方便了我们日常开发重复书写css的烦恼,它类似于bootstrap但又不同于bootstrap。 引入到项目中 克隆到本地...

zhangjing
03/28
0
0
一小时搞定DIV+CSS布局-固定页面开度布局

本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局。 转载请标明:http://www.kwstu.com/ArticleView/divcss2013929173533658 关于DIV+CSS布局中用到的CSS...

小和尚敲代码
2016/03/03
69
0
当遇到css布局,你在考虑什么?

CSS布局在前端开发中像呼吸一样——再平常不过的事。比如同事A在尝到了Flexbox布局的甜头之后,任何布局都会以打头阵,同事B因为项目得支持IE10,像避开毒蛇一样的避开Flexbox布局方法。你会...

TTtuntuntutu
04/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python学习10.04:Python list列表使用技巧及注意事项

前面章节介绍了很多关于 list 列表的操作函数,细心的读者可能会发现,有很多操作函数的功能非常相似。例如,增加元素功能的函数有 append() 和 extend(),删除元素功能的有 clear()、 remo...

太空堡垒185
11分钟前
2
0
新手插画学习的方法?教你如何自学?

插画学习的方法?教你如何自学? 从小喜欢画一些漫画头像随笔画,但是其实没有基础。个人偏好小清新手绘风的插画(如下图),每每看到都希望自己能画出这样的作品。 我其实很想说画这种美术功...

huihuajiaocheng
17分钟前
3
0
面试题

1、实现clone();

gtandsn
28分钟前
3
0
CentOS 7 部署 tesseract-ocr

官方地址 github yum-config-manager --add-repo https://download.opensuse.org/repositories/home:/Alexander_Pozdnyakov/CentOS_7/ 若提示 yum-config-manager: command not found 执行以......

阿白
28分钟前
2
0
JAVA比较器中comparator的使用

一个专用的比较器Comparator Comparator是一个专用的比较器,当一个不支持自比较或者自比较函数不能满足要求时,可写一个比较器来完成两个对象之间大小的比较。Comparator体现了一种策略模式...

daxiongdi
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部