前端开发--CSS篇(一)

本人从事一年前端开发,分享一些干货给热爱前端开发的小伙伴! 

一.CSS部分(浮动原则)

1.浮动元素会从文档正常流中删除,但它仍会影响布局

2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示

3.一旦元素具有了浮动属性,它便成为了一个块级元素。

4.浮动元素的左右外边界不能超出包含块的左右内边界

5.浮动元素永不会重叠

6.浮动元素不会超过容器的上padding

7.后浮动的元素永不会超过先浮动元素的顶端

8.浮动元素会尽可能高地放置,便这个高受限于规则6和规则7

9.浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。

但部分浏览器会采取增大容器高度以容下浮动元素,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动。

10.浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住。

11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7。

12.当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)

13.浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在浮动元素之下,而内容在浮动元素之上。

14.对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。

15.clear不能用于非块级元素,比如,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,除非改变br的display:block。

16.如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,257评论 0 6
  • 1. 居中不定高div样式 参考:http://www.haorooms.com/post/css_div_juz...
    darr250阅读 4,691评论 0 7
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,902评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,104评论 0 1