作为一名经常接触网站，并且写过网站的人来说，css可以说是既熟悉又陌生。熟悉是因为，基本上没有搞网站的人不知道css的，陌生是因为很多人不会去花很大的精力钻研css，基本上是大概了解。CSS看似简单直接，实则有很多细节有待回味，而这些细节和浏览器的CSS解释器逻辑紧密相关。
CSS在这个层面上，和正则表达式，对于非专业前端网络工程师是差不多的。是个工具，但是总不太愿意花很多时间在这两个技术的钻研上。我就是如此，所以以此，作为对css在使用中涉及的相关知识进行总结。
这里非常推荐这个网站学习css布局学习CSS布局
块与内联
元素分类
块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。
具体各个分类请参考 html块状元素、内联元素
块元素
块元素(block element) 通常作为其它元素的容器，它可以容纳内联元素和其它块元素。 默认情况下，块元素会顺序以每次另起一行的方式往下排，而通过CSS控制其样式，我们可以改变这种默认布局模式，把块元素摆放到你想要的位置上去。需要指出的是，table标签也是块元素的一种，基于table表格和基于CSS+DIV的布局，在使用者看来除了页面载入速度的差别（table在所有内容元素加载完成后才显示），没有其它的差别。但是从页面的源代码来看，这种差异就非常大了。基于良好结构理念设计的CSS布局源码，至少能让没有 web开发经验的用户很容易找到连续的页面内容。从这个角度来说，CSS layout code应该有更好的美学体验。 我们可以把模块化的DIV想象成一个个box，然后把它们按自己的意愿排列组成完整的内容，网页布局设计就是遵循了同样的模式
块级元素(block)特性
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素
内联元素(inline element) 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素
内联元素(inline)特性
- 和相邻的内联元素在同一行
- 高度，行高以及顶、底边距不可改变
- 宽度就是它所容纳的文字或图片的宽度，不可改变
以上是对块和inline的简单说明，这个和定位有关。同时还有inline-block，有待研究
CSS定位
静态定位
各个元素按照inline和block的自然方式排列。
此时的left和top无效
position：static
相对定位
元素基于静态定位的常规位置，进行偏移
此时
postion： relative
top和left用来控制偏移
** 注意 **：top，left这类控制偏移的属性指的是，上边和左边距离常规位置的距离。如果值为百分比，指的是相对于当前元素宽度的百分比长度。
绝对定位
postion：absolute
绝对定位是以整个网页的视区为基准的。
固定定位
postion：fixed；
固定定位是以用户的当前视区为基准的。所谓的滚动跟随就是用fixed实现的。
浮动
参考以下效果，很明显看出img被文字包围了。
正常显示应该是图片正下方是文字，而这里文字像流水一样float到了图片的空档处。
Paste_Image.png
如果设置float：left|right。那么该元素会浮动到左边界或者右边界。可以设置为none，那么则无float效果。
如果float，则在空档位置会被其他元素包围。
clear
clear属性可以用来清除元素的float效果，所谓清除是指，该元素本身，不会由于其他相邻元素设置了float之后，自身需要去float元素的空档补位。简单说，就是clear后就不去补位，呆在自己的位置上。并不是清除自身的float这个属性的值！
注意 ：float会导致元素脱离文档流，也就是说float元素本身不被算在常规位置的block体内，而是上浮了，所以叫做float呢。
这个部分很绕，但是找到了这个经验分享：CSS浮动(float,clear)通俗讲解
弄清楚float，很重要，因为很多并行的排版定位就是靠float才能得以实现哦。
网友评论