一、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适配
网友评论