CSS 原理理解
2016-07-29 16:21
204 查看
网页制作最初,HTML规定了 Normal Document Stream(标准文档流)来规范元素在网页中的显示法则:
标准文档流中元素分两种:块内元素,行内元素。
块内元素的特点有两个:(div标签)
每个元素占据一个矩形区域,并且和相邻的兄弟块级元素竖直排列,不会排在同一行。
块级元素在水平方向上会自动伸展,伸展到包含它的元素的边界为止。
行内元素的特点:(span标签)
针对的是文字这一类元素,例如使字母做一个基本单位,字母之间可以横向排列,到最右端自动折行
对于
嵌套margin,子块的margin以父块的内容作为参考(实践?)。
(长度变化相对于标准流)对于标志为float的块级元素(行内元素?),块级元素的内容不再独占一行而随元素内容的宽度而变化这一特性使相邻的块级元素可以出现并排一行的情况。
(位置变化)float:left/right,元素向其父元素的左侧或右侧靠紧。
清除浮动影响(其实并不不清楚)。
relative:以标准流的排版方式作为基础,使元素盒子相对于它原本的标准位置偏移指定的距离,仍处于标准流之中。重要理解:盒子真正所占有的区域还是按照标准流的排布方式所在的位置,并不是它偏移后的位置。
absolute:以它的包含框(父框)为基准进行偏移,脱离了标准流,对处于标准流的元素不产生影响。
fixed:只以浏览器窗口为基准进行定位,拖动滚动条位置不会变,(页面缩放,被标记元素还是在原来的位置,不会跟着按比例缩小?)
标准文档流中元素分两种:块内元素,行内元素。
块内元素的特点有两个:(div标签)
每个元素占据一个矩形区域,并且和相邻的兄弟块级元素竖直排列,不会排在同一行。
块级元素在水平方向上会自动伸展,伸展到包含它的元素的边界为止。
行内元素的特点:(span标签)
针对的是文字这一类元素,例如使字母做一个基本单位,字母之间可以横向排列,到最右端自动折行
对于
<strong></strong>这类标签,并不独立占据文档流中的一块区域,而只是指出了文字所占的范围。
再就是
竖直margin中的塌陷现象,上下紧密排列的元素的外边距并不是两个元素外边距之和,而是选取那个最大的外边距作为两个元素之间的外边距。嵌套margin,子块的margin以父块的内容作为参考(实践?)。
Float
对于float,浮动,其实仍是在标准流之中的。(长度变化相对于标准流)对于标志为float的块级元素(行内元素?),块级元素的内容不再独占一行而随元素内容的宽度而变化这一特性使相邻的块级元素可以出现并排一行的情况。
(位置变化)float:left/right,元素向其父元素的左侧或右侧靠紧。
清除浮动影响(其实并不不清楚)。
Position
static:默认,就是按盒子按照标准流(包括浮动方式)进行布局。relative:以标准流的排版方式作为基础,使元素盒子相对于它原本的标准位置偏移指定的距离,仍处于标准流之中。重要理解:盒子真正所占有的区域还是按照标准流的排布方式所在的位置,并不是它偏移后的位置。
absolute:以它的包含框(父框)为基准进行偏移,脱离了标准流,对处于标准流的元素不产生影响。
fixed:只以浏览器窗口为基准进行定位,拖动滚动条位置不会变,(页面缩放,被标记元素还是在原来的位置,不会跟着按比例缩小?)
相关文章推荐
- CSS3制作的照片墙
- 纯CSS实现Tab切换 以及 CSS+JS实现Tab切换
- 原生js与css3结合的电风扇
- HTML 和 Body 在 CSS 中的区别
- Textview设置不同样式
- Html与CSS快速入门04-进阶应用
- css颜色大全
- css3动画制作扇形导航
- css中position属性(absolute|relative|static|fixed)概述及应用
- css3妙用 刷新图标
- 一张图学懂css+div 浮动分块
- jq在某个样式中删除某一条样式 强制移除样式
- css 过度
- JS 样式操作学习总结。
- css 2D 转换
- css基础
- css 导航栏
- django遇到css加载不成功的问题
- CSS-- 实用CSS样式
- [分享] 纯CSS完美实现垂直水平居中的6种方式