CSS 布局

CSS布局

首先 当你看到效果图先想想怎么布局 个个元素之间的关系 还有不同设备下面要怎么显示。

1. 尺寸

A) 百分比  会适合自适应布局 根据根节点html的长度改变 可以用%来讲浏览器尺寸和元素尺寸联系起来 做到自适应

B) auto 是很多尺寸的默认值 也就是有浏览器自动计算 首先块级元素水平方向的auto 块级元素的margin border padding 以及conent宽度之和等于父元素的width。使用auto属性在父元素宽度变化的时候 该元素的宽度会随之变化。但是当该元素被设置为浮动时,该元素的width 就变了内容的宽度了由内容撑开就是所谓的包裹性 overflowe| absolute float:left/right 都可以产生包裹性。替换元素也同样具有包裹性。在具有包裹性的元素上想利用width:auto是不行的。

替换元素 就是浏览器根据元素的标签和属性，来决定元素的具体内容，替换元素是其内容不受css视觉格式化模型控制的元素。

img input textarea slect object.

margin:auto; 垂直方向是可以内无限扩展的。内容越多 就 会产生滚动条。无法计算。

2. 浮动

A) 浮动布局的核心就是让元素脱离普通流 然后使用width/height margin/padding 进行定位。就像脱离地心引力一样 与普通流不在一个高度上 这个跟图层的概念类似，高度不同所以可以叠在元素上面产生重叠或者使用负边距跑到父元素外 理解这一点浮动布局就很好理解了。

 

B) 父元素的高度会因为 浮动会坍塌 因为浮动元素已经脱离了文档流 父对象所在的普通流比喻成地表 那浮动元素就会上去。但是父对象还在地表。撑开父对象有两个办法。

1> 让父元素上去 。

2> 把浮动元素边框拉下来。

 

3. 普通流布局

display：inline-block;但是会有一点小的障碍 会有4px左右的空隙 ，只要将父元素的样式设置font-size:0px;然后设置inline-block的所有兄弟元素font-size值。还有就是 inline-block默认是基线对齐的 而inline-block的基线跟文本基线一致。所以在内容不同的时候不能水平对齐。只需要将vertical-align显示声明一下top/bottom/middle对齐就可以。

关于基线的内容。

A) 无文字：容器margin-bottom下边缘 与容器内部的元素没有一毛钱的关系

B) 有文字 最后一行文字的下边缘 跟文字块()margin padding 没有关系。无论文字在什么子对象容器内在什么位置都没有关系 浏览器会知道最后一行文字对齐底部。

inline-block基线是最后一行文字的底部 flex是第一行的文字底部。

4. 绝对定位

 

父元素 relative  子元素absolute。父对象高度坍塌 子元素不能撑起来 原因也跟浮动一样。解决办法给父元素制定明确的height。

5. 弹性盒子

Css3的弹性盒子布局。弹性布局的优势

A) 独立的高度控制与对齐

B) 独立的元素顺序

C) 制定元素之间的关系

D) 灵活的尺寸与对齐方式