从零开始玩转HTML5前端 学习笔记2

CSS 盒子模型

1、所有标签都属于盒子,都可以设置 宽高 内外边距 边框

2、内容的宽度高度：width height

3、元素的宽度：左边框+左内边距+width+右内边距+右边框

    高度：上边框+上内边距+height+下内边距+下边框

4、元素空间的高度宽度：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距

5、增加padding后元素的宽高也会有变化，如果要保持元素宽高 就要减去内容的宽高。

6、增加border后元素的宽高也会有变化，如果要保持元素宽高 就要减去内容的宽高。

7、box-sizing这个属性可以保证给盒子增加padding和border后 盒子宽度高度不变  原理：如果要保持元素宽高 就要减去内容的宽高。

8、box-sizing：lcontent-box 元素的宽高=边框+内边框+内容宽高

border-box 元素的宽高-width/height

9、两个盒子是嵌套关系的话 设置里面盒子的顶部外边距(margin)后 外面的盒子也会被顶下来。可以给外边的盒子添加一个边框属性解决。

控制嵌套关系盒子之间的距离 先考虑padding属性。

margin：0 auto; 可以让里面的盒子在大盒子中水平居中。水平有效 垂直方向需要用像素控制。

text-align:center 和 margin:0 auto 的区别：text-align:center 设置盒子中存储文字/图片的水平居中。margin:0 auto 让盒子自己居中。

10、清空默认内外边距 更好的控制盒子的宽高，编写代码第一件事最好马上清空默认边距。

通配符清空 *{margin:0

padding:0}

借鉴：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

11、行高 line-height：所有的行都有行高。行高不同于盒子的高(height)

文字在行高中默认是垂直居中。

一行文字的行高设置跟盒子一样的高就可以使文字垂直居中。多行文字需要用 padding和box-sizing:border-box。

12、盒子存储的是文字 一般以盒子左边的内边距为基准，右边内边距有误差，因为右边放不下一个文字 那么文字就会换行显示 所以距离会有误差

网页布局方式

常见排版方式：1.标准流（文档/普通流） --默认排版

 垂直排版-块级元素   水平排版-行内元素/行内块级元素

2.浮动流

浮动流只能设置某个元素的左对齐或者右对齐  没有居中对齐 center, 不可使用 margin:0px auto; 

浮动流不区分 块级元素/行内元素/行内块级元素 都可以水平排版

在浮动流中 块级元素/行内元素/行内块级元素 都可以设置宽高

浮动元素的脱标：脱离标准流。元素1浮动 元素2没有浮动 这时元素1会盖住元素2

浮动元素规则：

同方向浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面。

不同方向浮动元素 左找左 右找右

浮动元素浮动之后的位置，由浮动之前的标准流中的位置来确定。

3. 定位流