CSS 常见知识点记录-flex布局、css特性、position布局、display、伪类伪元素、适配rem

一、CSS特性、块级元素、行内级元素、display

1、CSS的两大特性是什么？并解释其中含义？

• 【继承】
• 【层叠】

image.png

image.png

image.png

image.png

2、对CSS元素进行划分，块级元素有什么特征？行内级元素有什么特征？

image.png

3、CSS哪些元素不能设置宽高？

• 行内级非替换元素，无法随意设置宽高

image.png

4、为什么div、p、li等标签会在浏览器里面展示为块级元素？

• 因为浏览器默认情况会给这些元素加上 display: block 属性，所以这些元素就展示为块级元素了。

image.png

5、display常用的四个值是什么？分别代码什么意思？

• block、none、inline、inline-block

  
  
  image.png

6、CSS中隐藏元素的常见两种方式是哪两种？有什么区别？

• 【display: none】不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
• 【visibility: hidden】虽然元素看不见了，但是元素框依旧还留着，还会占着原来的位置

二、文档流、position布局、float布局

1、请描述HTML中的文档流（或者说标准流）？

image.png

2、利用CSS的position属性可以对元素进行定位，常用取值有4个，是哪四个？

• static 默认值
• relative 相对定位，相对于元素原本所在的位置进行定位
• absolute 绝对定位，相对于父元素（从父元素中找第一个非static的元素，找不到就取视口）进行布局，经典应用《子绝父相》
• fixed 固定布局，无论如何都相对于与浏览器视口进行布局
  -【relative、absolute、fixed】通常会结合 top、bottom、left、right四个值进行使用

3、position属性static、relative、absolute、fixed详解？

image.png

image.png

image.png

image.png

image.png

4、CSS哪些布局方式会脱离文档流？脱离文档流的元素，有什么特点？

• 脱离标准流的元素：position:fixed/absolute，float

image.png

5、绝对定位的一些技巧？在CSS如何通过margin让元素居中？

• 【magin: 0 auto】当margin-left和margin-right被设置成auto的时候，默认会相等，让元素居中

  
  
  image.png

6、定位元素和非定位元素的层叠关系？

image.png

image.png

7、认识float的布局

• 【float出现的初衷】用于图文环绕效果
• 【float发展】在很久以前被大量用于布局（但是float规则太多，太麻烦）
• 【float结局】被flex布局所替代

三、flex布局

1、flex布局当前地位？认识flex布局？

• 之前用float进行布局的东西，出了图文环绕效果外，全部都用flex布局代替了。

image.png

2、flex布局模型，要把图中的基本概念默写出来！

image.png

3、flex container 和 flex item上CSS属性划分？

• 【flex container】的属性全部要掌握
• 【flex item】的属性只要掌握 flex-grow、flex-shink即可

image.png

4、【container属性】flex-direction 决定主轴的方向

image.png

5、【container属性】justify-content 决定flex-item在主轴上的布局方式

image.png

6、【container属性】align-items 决定flex-item在交叉轴上的对齐方式

image.png

7、【container属性】flex-wrap 决定flex-item是否进行换行

image.png

• flex-flow 了解即可

8、【container属性】align-content 决定多行 flex items 在 cross axis 上的对齐方式，与justify-content类似。

image.png

9、【items属性，就掌握这两个即可】flex-grow 决定多余空间items如何占据，flex-shink决定空间不足如何压缩？

image.png

image.png

10、【items属性，仅供查资料用】order、align-self、flex-basic、flex

image.png

image.png

image.png

image.png

四、伪类、伪元素

1、什么是伪类？

• 【伪类】（pseudo class）是选择器的一种，它用于选择处于特定状态元素。伪类是默认生成的，不需要额外定义的。
• 【作用】浏览器自动维护标签里面的伪类状态，帮助开发者在标记文本中减少多余的类，让代码更加灵活、更加易于维护。

2、动态伪类？

• :link、:visited、:hover、:active、:focus

image.png

image.png

3、nth是什么意思？什么是结构伪类？

-【nth】：第N个，比如 fourth

image.png

4、什么是伪元素？常用的两个伪元素是哪两个？

• 【伪元素】以CSS类的方式表现，不过表现的更像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。

-【常用伪元素::before、::after】是元素+CSS样式。其中content属性一定不能省略

image.png

image.png

5、小技巧：如何在浏览器查看某个元素的hover状态下的样式？

image.png

五、SEO、line-boxes、vertical-align、移动端布局rem

1、h1元素和SEO有什么关系？

• h1元素有助于网站的SEO（Search Engine Optimization）优化，可以促进关键词排名
• 建议在网页中最多只有1个h1元素
• 乱用h1元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站

2、一个有文字内容的div，为什么会有高度？

• 因为有 line-boxes的存在，并且line-boxes有一个特性，包含每行的inline level
• line-boxes行盒一定会想办法包裹住当前行中的所有内容。

image.png

3、理解 line-boxes各种情况下的表现？

image.png

image.png

4、那么一个行盒内的元素，依靠什么进行对其呢？

• 默认 base-line 基线对其

image.png

image.png

5、rem是依靠什么计算具体值的？

html标签上的font-size === 1rem

6、移动端适配的推荐方式是什么？

• ① js代码动态获取屏幕宽度，然后设置html标签上的font-size
• ② 利用 postcss-pxtorem 第三方库来对我们打包生成的rem适配