面试官：一道题看透你会不会css

今天总结了一下css的考点&＃xff0c;发现一个有趣的面试题&＃xff0c;可以衍生到很多点&＃xff0c;记录一下分享给大家

问题&＃xff1a;

什么是标签语义化

扩展&＃xff1a;

1、 都有哪些标签&＃xff1f;
2、块级标签和行内标签的区别&＃xff1f;
3、如何转化&＃xff1f;
4、display除了这个几个值还有哪些&＃xff1f;
5、既然提到了display&＃xff1a;none来说一说吧&＃xff1f;
6、让元素隐藏&＃xff0c;有几种办法&＃xff1f;
7、display&＃xff1a;none和visibility&＃xff1a;hidden的区别&＃xff1f;
8、opacity的兼容处理
9、filter是什么&＃xff0c;还是做什么事情&＃xff1f;
10、display&＃xff1a;flex
/11、 除了这种居中方式还有哪些&＃xff1f;
12、响应式布局可以怎么做&＃xff1f;
/13、 都有哪些盒子模型&＃xff1f;
14、两种标准盒子模型怎么转化&＃xff1f;

下面我们就一个个来看问题吧&＃xff1a;

什么是标签语义化&＃xff1a;

元素本身包含了一些标签内所包含的内容类型的一些信息&＃xff0c;浏览器或开发者能从标签知道其语义。

为什么要使用标签语义化&＃xff08;标签语义化的优点&＃xff09;&＃xff1a;

能够优化代码结构
有利于SEO
提升用户体验
便于团队开发和维护
方便其他设备解析

1、都有哪些元素&＃xff1f;

2、块级标签和行内标签的区别&＃xff1f;

块级元素独占一行&＃xff0c;可以设置宽高&＃xff0c;水平方向margin和padding设置有效&＃xff0c;垂直方向无效&＃xff0c;可以包含行内元素和块级元素

行内元素不独占一行&＃xff0c;宽高设置无效&＃xff0c;margin上下无效&＃xff0c;padding上下无效&＃xff0c;行内元素无法嵌套其他行内元素或者块元素

参考链接&＃xff1a;
HTML行内元素和块级元素&＃xff08;面试必考题&＃xff09;

3、如何转化&＃xff1f;

块级转行级&＃xff1a;display&＃xff1a;inline
行级转块级&＃xff1a;display&＃xff1a;block
行内块元素&＃xff1a;inline-block

4、display除了这个几个值还有哪些&＃xff1f;

display&＃xff1a;none
display&＃xff1a;blcok
display:inline
display:inline-block
display:inherit&＃xff08;从父元素处集成display属性的值&＃xff09;
display&＃xff1a;table &＃xff08;表格&＃xff09;
display&＃xff1a;flex&＃xff08;flex布局&＃xff09;
display&＃xff1a;list-item&＃xff08;列表&＃xff09;
这里看到一篇文章写了display所有的属性值&＃xff0c;一共有32中&＃xff1a;
css-display所有属性值简单介绍

5、既然提到了display&＃xff1a;none来说一说吧&＃xff1f;

1、display:none和visible:hidden都能把网页上某个元素隐藏起来。

2、但两者有区别:

●display:none —不为被隐藏的对象保留其物理空间&＃xff0c;即该对象在页面上彻底消失&＃xff0c;通俗来说就是看不见也摸不到。

●visible:hidden— 使对象在网页上不可见&＃xff0c;但该对象在网页上所占的空间没有改变&＃xff0c;通俗来说就是看不见但摸得到。

1、visibility: hidden----将元素隐藏&＃xff0c;但是在网页中该占的位置还是占着。

2、display: none----将元素的显示设为无&＃xff0c;即在网页中不占任何的位置。

3、例如有三个table&＃xff0c;将中间的一个table hidden掉&＃xff0c;你会发现在那个被hidden的table看不见了&＃xff0c;但是&＃xff0c;中间会留有很大的一空白&＃xff0c;而这个空白就是这个table没有被隐藏时所占的位置。

4、而none的作用更像是把元素从网页中“去除”&＃xff08;当然不是真的去除&＃xff0c;只是效果是如此&＃xff09;

5、例如有三个table&＃xff0c;将中间的一个table none掉&＃xff0c;你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样。

6、让元素隐藏&＃xff0c;有几种办法&＃xff1f;

1、display&＃xff1a;none
2、visibility&＃xff1a;hidden
3、opacity&＃61;0 透明度设置为0
4、position&＃xff1a;absolute脱离文档流之后设置一个很大的负值
5、transform&＃xff1a;scale&＃xff08;0&＃xff09;&＃xff0c;把一个元素色红孩子成为无限小&＃xff0c;位置还在&＃xff0c;看不见
6.HTML5 hidden attribute &＃xff0c;与display&＃xff1a;none相同
7、height&＃xff1a;0&＃xff0c;overflow&＃xff1a;hidden &＃xff0c;把元素在垂直方向上收缩为0&＃xff0c;元素消失
8.filter&＃xff1a;blur&＃xff08;0&＃xff09;&＃xff0c;把一个元素的模糊度设置为0&＃xff0c;看不见了

7、display&＃xff1a;none和visibility&＃xff1a;hidden的区别&＃xff1f;

1.display:none是彻底消失&＃xff0c;不在文档流中占位&＃xff0c;浏览器也不会解析该元素&＃xff1b;visibility:hidden是视觉上消失了&＃xff0c;可以理解为透明度为0的效果&＃xff0c;在文档流中占位&＃xff0c;浏览器会解析该元素&＃xff1b;

2.使用visibility:hidden比display:none性能上要好&＃xff0c;display:none切换显示时visibility&＃xff0c;页面产生回流&＃xff08;当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等&＃xff0c;页面重新构建&＃xff0c;此时就是回流。所有页面第一次加载时需要产生一次回流&＃xff09;&＃xff0c;而visibility切换是否显示时则不会引起回流。

8、opacity的兼容处理

使用css解决
filter:alpha(opacity&＃61;70); /IE/
-moz-opacity::0.7; /老版Mozilla/
-khtml-opacity:0.7; /老版Safari/
opacity:0.7; /支持opacity的浏览器/

使用js解决
.object.filter&＃61;“alpha(opacity&＃61;” &＃43; opacity &＃43; “)”; /IE/
.object.MozOpacity &＃61;(opacity / 100); /老版Mozilla/
object.KhtmlOpacity&＃61; (opacity / 100); /老版Safari/
object.opacity&＃61;(opacity / 100); /支持opacity的浏览器/

9、filter是什么&＃xff0c;还是做什么事情&＃xff1f;

Filter称之为过滤器&＃xff0c;是servlet中最实用的技术&＃xff0c;web开发人员通过Filter技术&＃xff0c;对web服务器所管理的资源&＃xff08;jsp,servlet,静态图片或者静态html文件&＃xff09;进行拦截&＃xff0c;从而实现一些特殊的功能。简单说就是过滤从服务端向服务器发送请求的。

实现功能&＃xff1a;

 敏感词汇的检测
 控制用户的访问权限
 统计web应用的日志处理功能

详细文章&＃xff1a;
Filter概述

10、display&＃xff1a;flex

flex布局就是弹性布局&＃xff0c;用来为盒子提供最大的灵活性&＃xff0c;基于传统的盒子模型&＃xff0c;依赖display属性&＃43;position属性&＃43;float属性&＃xff0c;用起来比较方便
学习它主要了解容器属性和元素属性就ok&＃xff1a;
容器属性&＃xff1a;

1.flex-direction设置flex容器主轴的方向
row&＃xff1a;默认&＃xff0c;水平&＃xff0c;从左到右&＃xff08;123&＃xff09;
row-reverse&＃xff1a;默认方向的首尾互换&＃xff0c;水平&＃xff0c;从右到左&＃xff08;321&＃xff09;
column&＃xff1a;垂直&＃xff0c;从上到下
column-reverse&＃xff1a;垂直&＃xff0c;从下到上

2.flex-wrap控制flex容器是单线还是多线&＃xff0c;以及新线的堆叠方向
nowrap&＃xff1a;单行
wrap&＃xff1a;多行
wrap-reverse&＃xff1a;新线上前排列
3.flex-flow&＃xff1a;flex-direction flex-wrap;
复合写法

4.justify-content项目在主轴上的对齐方式
flex-start:&＃xff08;默认&＃xff09;main-start齐平&＃xff08;123 &＃xff09;
flex-end&＃xff1a;main-end齐平&＃xff08; 123&＃xff09;
center&＃xff1a;居中&＃xff08; 123 &＃xff09;
space-between&＃xff1a;两端对齐&＃xff0c;每两个flex元素之间的空隙相等&＃xff08;1 2 3&＃xff09;
space-around&＃xff1a;每个项目左右两侧的空隙相等&＃xff08; 1 2 3 &＃xff09;1和2之间的空隙是两倍的1和main-start之间的空隙&＃xff0c;因为1和2&＃xff0c;2和1的空隙是叠加的&＃xff0c;算两份

5.align-items项目在交叉轴上的对齐方式&＃xff08;单行&＃xff09;
flex-start&＃xff1a;cross-start齐平
flex-end&＃xff1a;cross-end齐平
center&＃xff1a;居中对齐

6.align-content多线的对齐方式&＃xff0c;单线不起作用
flex-start&＃xff1a;打包cross-start齐平
flex-end&＃xff1a;打包cross-end齐平
center&＃xff1a;打包居中
stretch&＃xff1a;未设置高度时占满整个交叉轴
space-between&＃xff1a;cross两端对齐
space-around&＃xff1a;两侧空隙相等

元素属性&＃xff1a;

1.flex-basis&＃xff1a;length;定义该元素的main-size&＃xff08;主轴方向&＃xff09;
由于是元素属性&＃xff0c;应该设置在单个元素里&＃xff0c;如上述案例用的first-child&＃xff0c;nth-child&＃xff0c;last-child&＃xff1b;
如果主轴方向是水平的&＃xff0c;flex-basis默认继承width&＃xff0c;如果width和flex-basis都设置了&＃xff0c;以flex-basis为准&＃xff1b;
如果主轴方向是垂直的&＃xff0c;flex-basis默认继承height的值&＃xff0c;如果两者都设置了&＃xff0c;以flex-basis为准

2.flex-grow&＃xff1a;number;拉伸比例&＃xff0c;默认值为0&＃xff0c;不拉伸&＃xff08;主轴方向&＃xff09;
如果子div元素没有将父div充满&＃xff0c;设置此项&＃xff0c;将剩余的空间按比例分配给子div&＃xff08;主轴方向&＃xff09;
如&＃xff1a;父宽600px&＃xff0c;子宽100px&＃xff0c;如果三个子div比例是1&＃xff1a;1&＃xff1a;1&＃xff0c;原剩余300px&＃xff0c;就将这300按1&＃xff1a;1&＃xff1a;1分给子div&＃xff0c;每个子分到100px&＃xff0c;现在宽度就是100&＃xff08;原宽&＃xff09;&＃43;100&＃xff08;加宽&＃xff09; &＃61; 200&＃xff08;现宽&＃xff09;
如果父宽400px&＃xff0c;子宽100px&＃xff0c;三子比例1&＃xff1a;2&＃xff1a;1&＃xff0c;原剩余100px&＃xff0c;分给1子25px&＃xff0c;2子50px&＃xff0c;3子25px&＃xff0c;1的现宽是100&＃43;25&＃61;125px&＃xff0c;2是100&＃43;50&＃61;150px&＃xff0c;3是100&＃43;25&＃61;125px

3.flex-shrink&＃xff1a;number;压缩比例&＃xff0c;默认值为1
此属性生效的前提是nowrap
按比例计算压缩的px数&＃xff1a;

4.flex&＃xff1a;flex-grow flex-shrink flex-basis&＃xff0c;默认值&＃xff1a;0 1 auto
复合属性

5.align-self&＃xff1a;单个项目在cross轴上的对齐方式
flex-start&＃xff1a;cross-startqiping
flex-end&＃xff1a;cross-end齐平
center&＃xff1a;居中
baseline&＃xff1a;第一行文字
stretch&＃xff1a;未设置高度时&＃xff0c;该元素高度为flex容器高度
与容器属性中的align-items对应&＃xff0c;此处是对单个元素的cross轴进行设置&＃xff0c;align-items是对一行的cross轴设置
在第二个子div设置align-self: center;&＃xff0c;1子和2子不做改变

参考链接&＃xff1a;
前端提高篇&＃xff08;四十二&＃xff09;CSS进阶9&＃xff1a;Flex弹性盒子&＃xff08;二&＃xff09;容器属性和元素属性

11、 除了这种居中方式还有哪些&＃xff1f;

垂直居中的办法&＃xff1a;

1、margin&＃xff1a;auto
/2、margin负值&＃xff0c;设为宽度和高度的一半
3、display&＃xff1a;table-cell&＃xff08;未脱离文档流&＃xff09;
/4、display&＃xff1a;flex
align-items:center
justfy-content:center

12、响应式布局可以怎么做&＃xff1f;

响应式布局就是一个网站能够兼容多个终端&＃xff0c;
实现方法主要有三种&＃xff1a;

1. CSS3-Media Query&＃xff08;最简单的方式&＃xff0c;但是无法满足很多需求&＃xff09;
   2. 借助原生Javascript&＃xff08;成本高&＃xff0c;不推荐使用&＃xff09;
   3. 第三方开源框架&＃xff08;比如bootstrap,可以很好的支持浏览器的响应式布局&＃xff09;

前面两种已经基本上用不到了&＃xff0c;
参考链接&＃xff1a;
响应式布局实现方法

13、 都有哪些盒子模型&＃xff1f;

盒子简单来说就是用来装页面上的元素的矩形区域&＃xff0c;CSS盒模型包括IE盒模型和标准的W3C盒模型

box-sizing有三个值&＃xff1a;他们的主要区别是width包含的范围不一样

border-box&＃xff1a;IE盒模型{怪异模式} width包含border和padding
padding-box&＃xff1a;width包含padding&＃43;context&＃43;width
content-box&＃xff1a;width包含content

要理解两种盒子的不同&＃xff0c;本质上就是width包含的范围不同
标准盒模型&＃xff1a;

IE盒模型&＃xff1a;

总结一下&＃xff1a;

1、标准盒模型和IE盒模型区别在于width和height包含的内容不一样&＃xff1a;
标准盒模型width&＃61;content&＃xff1b; height&＃61;content
IE盒模型width&＃61;content&＃43;左右padding&＃43;左右border &＃xff1b;height也一样

2、IE盒模型盒子的宽度等于width
标准盒子模型的宽度等于width&＃43;左右padding&＃43;左右border
注&＃xff1a;这里说的宽度不是上面的width &＃xff0c;是盒子整体的宽度。

14、两种标准盒子模型怎么转化&＃xff1f;

IE盒模型转化成标准盒模型&＃xff1a;
设置box-sizing&＃xff1a;conten-box

标准盒模型转化成为IE盒模型&＃xff1a;
box-sizing&＃xff1a;border-box

根据实际情况可做出改变

整理不易&＃xff0c;点个赞在走吧