网页开发学习笔记

网页开发学习笔记——css布局

这次终于搞定了全屏布局。css的全屏布局需要掌握盒子模型，因为这个是所有html元素在网页中的存在方式。
现在理一下开发时的思路：
html的所有标签都是元素
所有的html元素都是以盒子模型在网页中存在的
每个元素可以用css进行样式修正
所有的html元素是以DOM树形式组织的，所以css样式具有继承性

有以下规则：对于css的优先级
行内样式>内部样式>外部样式
对于同一元素的css样式，后写的css选择器会覆盖先写的css选择器
先写后写是看在样式表区域内的上下
在样式表属性后标注!important则会破格到最先优先级
其实总结出来就是css的原意：cascading style sheet，层叠。

首先元素也是元素，所以它也是一个盒子模型，这是我当初忽略的，然后从布局来看的子节点就是它同样也是盒子模型
我们现在设计网页都要考虑不同屏幕的适应性了，所以我们需要知道常见的长度：px，em，%
px就是像素值，这个是一固定值。em是以该元素的文本值的大小为相对衡量，1em=1 thisobject.text.font-size。%就是相对父元素的大小。
全屏布局时最好用%这样的相对单位，比如声明个200px，万一屏幕没这么大就裂开。我之前一直无法实现这个全屏是因为没有将html，body的height和width设置成100%，因为css有继承性的，根元素一定要盛满屏幕，不然底下元素从相对值去设置是不可能铺满屏幕的。
或者用position:absolute来强制脱离普通流。
要依次从根到叶子都设置个height:100%,width:100%。