前端培训（二）盒式模型与页面排版

未分类

盒式模型

box-sizing: [content-box|border-box]

content-box

默认值，标准盒模型。 width 与 height 只包括内容的宽和高， 不包括边框，内边距，外边距。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

border-box

width 与 height 包括内边距与边框，不包括外边距。这是当年IE怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候内边距和边框将会包括在盒子中。比如 .box {width: 350px;padding:10px; border: 10px solid black;} 浏览器渲染出的宽度还是350px.

示例

Html元素分类

block

1. width:100%
2. height:auto
3. 可以包含其他块级元素或行内元素
4. 所有浮动元素都是width:auto的块级元素

inline

1. width，自适应，且无法调整。
2. height，自适应,且无法调整。
3. 行内元素可以有padding和margin,但是不会改变行内元素的位置。
4. 行内元素只能包含文本元素和其他行内元素
5. 行内元素可以并排显示，但存在间隙问题

inline-block

外部表现外行内元素，内部表现为块级元素。

示例

清楚浮动

http://kayosite.com/remove-floating-style-in-detail.html

position的常见属性

http://codepen.io/stkevintan/pen/MaNemm

CSS模型

http://www.w3help.org/zh-cn/kb/006/

Html元素参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

homework

http://codepen.io/stkevintan/full/PPMzOw/