css世界学习笔记

第三章

1. 块级元素

block
table
list-item

清除浮动影响

.clear:after {  
 content: '';   
 display: table;  // 也可以是 block，或者是 list-item   
 clear: both;
 }

float会造成父元素高度塌陷，清除浮动clear,就可以解决

1.1. width:auto

• fill-available 充分利用可利用空间,外部尺寸
• shrink-to-fit 收缩到合适，包裹性（float,absolue，inline-block)
• 收缩到最小

外部尺寸

• 流动性：类似父元素的100%（不设置宽度，否则流动性丢失）
• 格式化宽度: 若绝对定位，且有对立的方位的属性值同时存在
  如div { position: absolute; left: 20px; right: 20px; }
  则这个div的宽度会是（父元素宽度-40）px

内部尺寸

包裹性：float，absolute，inline-block,宽度由内容决定
首选最小宽度:中文可以随时换行，英文需要单词或者中划线等

1.2.height

height：100%
如果父元素的高度是auto,则设置高度%无效
解决方法1:html, body { height: 100%; }
解决方法2：div { height: 100%; position: absolute; }
绝对定位可以用%，即使父高度是auto，相对于padding box 计算，非绝对定位相对于content box计算

准则：无浮动，无宽度，无图片
改变文字流向;direction: rtl;
不换行： white-space:nowrap

1.3.min\max-width\height

min -* 0
max-* auto
权重很大，超过width，height超过!important, min超过max

---

2.内联元素

inline-block:幽灵空白节点