建站记录3——边距自适应布局Tip总结

Width属性只指定内容区的宽度。一般高度height默认auto。

默认宽度：auto，会延伸占满可用空间。

%：使用百分数，宽度会计算为所在容器宽度的百分比（容器可以是body，div等）。

Em呢？在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系。em 指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em特点：1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。CSS代码html { font-size: 62.5%; }这样，1em = 10px。我们常用的1.2em理论上就是12px。但是，这个换算在IE浏览器下不成立，1.2em会比12px稍大一些，解决办法是把html标签样式中的62.5%改成63%，即：CSS代码   html { font-size: 63%; }

在中文的文章中，一般会在段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通 用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了： CSS代码  p { text-indent: 2em; }

rem（root em，根em）：是CSS3新增的一个相对单位，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

Text-align会对块元素中所有的内联内容起作用，并且只能对块元素起作用，对内联元素不起作用。

h具有默认外边距。

<blockquote> 标签定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。属性：cite，定义引用的URL

Div为块级别内容创建逻辑划分，没有默认样式。

Span负责内联内容的逻辑分组，没有默认样式。

<li><span class=”cd”>Bugddha Bar</span>,<span class=”artist”>CC</span></li>

内联元素的外边距和内边距。内联元素的四周都增加外边距，只能看到左右的外边距。

可以对内联元素的上下增加内边距，但是内边距不会影响包围它的其他内联元素的间距，所以内边距会与其他内联元素重叠。

图像与其他的内联元素稍有不同，宽度/外边距/内边距属性更像块元素的相应属性。

Margin：CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

l 如果缺少左外边距的值，则使用右外边距的值。

l 如果缺少下外边距的值，则使用上外边距的值。

l 如果缺少右外边距的值，则使用上外边距的值。

new？？？

margin - padding - height - font-size