重拾CSS基础 - 1

1、行内元素的特点？哪些属于行内元素？

行内元素（inline）
行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素的特点：

• 总是和相邻的行内元素在同一行上（物以类聚）
• 设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
• 默认宽度是他自身内容的宽度。
• 行内元素只能容纳其他行内元素或者文本。
• 特殊：a比较特殊，可以放块级元素，但是链接里面不能再放链接。

行内块元素（inline-block）
行内块元素结合了块元素和行内元素的不同特点，这样特殊的一类标签称为行内块元素。像<img>/<input>/<td>这些元素，可以给他们设置宽高、对齐属性，

行内块元素的特点：

• 和相邻行内元素在同一行，但是之间会有空白缝隙。
• 默认宽度是他本身内容的宽度。
• 宽度、高度、行高、外边距以及内边距都可以手动设置。

2、块级元素的特点？哪些属于块级元素？

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

块级元素有以下几个特点：

• 总是另起一行（特立独行）
• 可以设置其宽度、高度，内外边距
• 在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
• 可以容纳行内元素和其他块元素。
• 常见的块级元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素。
• 特殊：文字类的块级元素不能放块元素，例如<p>/<h1>~<h6>/<dt>

3、绝对定位元素absolute，如果不设置left,right,top，bottom,它的宽度由谁决定？如果同时设置了left和right，或者top和bottom,它的宽高又由谁决定？

• 不设置left,right,top，bottom，宽度由内容决定；
• 同时设置了left right 或者 top bottom，宽/高由父级relative的宽度减去left right/top bottom的值决定。如果设置了宽高，则不受影响。

4、 元素垂直水平居中，且宽高动态相等，且宽度占body宽度的50%？

宽高动态相等，主要考个知识点： 当margin/padding取值为百分比时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的。

1
2
3
4
5
6
7
8
9

.box{
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

5、line-height取值为数字、百分比，像素，em时表现差异?

1
2
3
4
5
6

/* 以父元素字体为30px，子元素字体为20px为例，*/
/* 给父元素设置以下行高时，父元素与子元素的行高差异 */
line-height: 1.5;   /* 父元素：30px*1.5=45px；子元素20px*1.5=30px */
line-height: 30px;  /* 父子元素都为 30px */
line-height: 150%;  /* 父子元素都为 30px*150% = 45px */
line-height: 1.5em; /* 父子元素都为 30px*1.5 = 45px */

总结： 行高是有继承性的，带单位的行高(px,%,em)，其子元素继承的行高是父元素计算后的值，不带单位的(数字)，其子元素继承的是比例值