CSS面试题

 1.HTML5新增了哪些内容

• 语义化更好的内容标签(header,footer,main,nav,aside,article,section)
• 音频 ,视频标签(audio, video)
• 画布(canvas)
• 表单控件 calendar , date , time , email , url , search , tel , file , number
• 地理位置API(geolocation)
• 拖拽释放API(Drap and drop)
• WebAPI：localStorage、sessionStorage、webworker、websocket

2.CSS3新增了哪些内容

• 颜色: 新增 RGBA , HSLA 模式
• 文字阴影(text-shadow)
• 边框: 圆角(border-radius) 边框阴影 : box-shadow
• 盒子模型: box-sizing
• 背景:background-size background-origin background-clip
• 渐变: linear-gradient , radial-gradient
• 过渡 : transition 可实现属性的渐变
• 自定义动画 animate @keyfrom
• 媒体查询 多栏布局 @media screen and (width:800px) {…}
• border-image 图片边框
• 2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
• 字体图标 iconfont/icomoon
• 弹性布局 flex

3.什么是HTML语义化

• HTML语义化是指使用合适的HTML标签做合适的事，既是不使用css属性也可以将网页内容以文档的形式展现出来。
• 有助于提高网站的可访问性和搜索引擎优化(SEO)，便于浏览器、搜索引擎以及其他设备（如屏幕阅读器）解析和理解网站内容。

4.常见的布局方式

• 表格布局：由 <table> 标签定义。每个表格均有若干行（ <tr>），每行被分割为若干单元格（<td>）。
• 浮动布局：通过float属性创建浮动元素，实现浮动布局。浮动布局会脱离文档流，容易造成父元素高度塌陷问题。
• 定位布局：通过postion属性创建定位元素，以精确控制网页对象的显示位置，布局精准，不会出现错行和误差问题；缺点是缺乏灵活性，栏目之间不能够协同变化，还会存在叠加等风险。
• 流动布局：流动布局是HTML默认的布局方式，通过百分比控制元素尺寸，随文档流自上而下按顺序动态分布。
• 弹性布局：和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单
• 栅格布局：与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可

5.弹性布局和栅格布局

• Flex布局： Flexible Box的缩写，也称为弹性布局。W3C于2009年提出。是一种以轴线为标准的一种布局方式。
• Grid布局：Grid 布局又称为网格布局，微软于 2010 年提出。是一种将容器划分为单元格的布局形式。
• 总结：布局的操作性和复杂度上来看，Grid布局要比Flex布局强大，但是Grid会有一些浏览器兼容性、响应式设计、性能优化等问题

6.圣杯布局和双飞翼布局

• 最终效果相同，两侧宽度固定，中间宽度自适应（三栏布局）
• 圣杯布局代码结构上更加自然和直观，在平时的开发中更容易形成这样的布局结构；
• 双飞翼布局由于不使用定位，所以代码更加简洁，允许页面的最小宽度小于圣杯布局。

7.px、em、rem、vwwh、%

• px：表示计算机的像素单位，1像素就是1px
• em：相对于元素font-size大小的单位
• rem：相对于根元素font-size大小的单位
• vwvh：相对于浏览器可视窗口尺寸的单位
• %：相对于父元素尺寸的单位
• calc()方法可以进行不同单位之间的运算

8.媒体查询

• 媒体查询允许根据不同的设备或屏幕尺寸和分辨率应用不同的样式。是创建响应式页面的关键。
• 媒体查询的组成：
  • @media：创建媒体查询
  • 媒体类型：定义了媒体查询适用的设备类型。例如，all适用于所有设备，print用于打印机和打印预览模式，screen用于电脑屏幕、平板和智能手机等，speech适用于基于语音识别的设备。
  • 媒体特性：在媒体查询中使用的条件，如宽度（width）、高度（height）和颜色等，用于限制样式的应用条件。

9.css盒模型

• 盒子模型分为两种: 
  • W3C 标准的盒子模型（标准盒模型）可以通过box-sizing:content-box来设置;
  • IE 标准的盒子模型（怪异盒模型）可以通过box-sizing:border-box来设置;
• 标准盒模型与怪异盒模型的表现效果的区别之处:
  • 标准盒模型下盒子的大小 = content + border + padding + margin
  • 怪异盒模型下盒子的大小=width（content + border + padding） + margin

10.css选择器权重

        !Important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

11.如何实现一个元素水平居中

• 块级元素
  • postion:abslute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  • display:flex;
    justify-content:center;
    align-items:center;
  • display: grid;
    place-items: center;
• 行内元素
  • text-align:center;
    line-height:20px;

12.css中哪些属性是可以继承的、哪些是不可以继承的

• 能继承的属性
  • 字体系列属性:font、font-size、font-weight、font-family、font-style; 
  • 文本系列属性: 
    • 内联元素：color、line-height、text-align
    • 块级元素：text-align、text-indent; 
    • 元素可见性：visibility
• 不能继承的属性
  • 盒子模型的属性：display、overflow、width、height、min-width、min-height、max-width、max-height、margin、padding、border; 
  • 背景属性：background、background-color、background-image; 
  • 定位属性：float、clear、position、top、right、bottom、left;

13.Input元素type属性值

• text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符;
• password 定义密码字段。字段中的字符会被遮蔽;
• search 定义用于搜索的文本字段;
• number 定义带有 spinner 控件的数字字段;
• email 定义用于 e-mail 地址的文本字段;
• url 定义用于 URL 的文本字段;
• radio 定义单选按钮。
• checkbox 定义复选框。
• button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
• reset 重置按钮，用于重置表单数据。
• submit 定义提交按钮。提交按钮向服务器发送数据。
• range 滑动条，用于选择一个范围内的值
• color 定义拾色器。
• image 定义图像作为提交按钮;
• file 定义输入字段和 "浏览..." 按钮，供文件上传
• date 定义日期字段（带有 calendar 控件）
• month 定义日期字段的月（带有 calendar 控件）
• time 定义日期字段的时、分、秒（带有 time 控件）

14.display和visibility的区别

• dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失；visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置
• visibility 具有继承性，其子元素也会继承此属性。
• display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘。

15.BFC模式

• BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域 外部毫不相干。
• 哪些元素会生成 BFC：
  • 元素变为浮动元素，即加float样式（非none）
  • 元素变为定位元素，即加position样式（值为absolute或fixed）
  • 元素变为弹性元素，即加display:flex
  • 给父级元素设置 overflow：hidden 或 overflow：auto
  • 元素变为行内块显示模式

16.如何清除浮动

• 方案1 BFC模式：让标准流中父容器变为BFC模式，这样就可以保证父容器中子元素渲染不会影响外界了（即：不会引起父容器高度变化）
• 方案2 clear：利用clear样式来清除浮动引起的父容器高度塌陷。在浮动元素后添加一个元素,并设置其clear属性为both。这会使得该元素下移,直到其顶部在所有前面的左浮动和右浮动元素下面。
• 方案3 伪元素：在父元素中添加一个伪元素(::before,::after),并设置其clear属性为both。这种方法的优点是不需要添加额外的HTML元素。

17.如何解决margin塌陷问题

• **第一种情况：**两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。
  • 解决方法：两个外边距不同时出现
• **第二种情况：**两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。解决方案:
  • 为父盒子设置 border
  • 为父盒子设定 padding 值
  • 为父盒子添加 overflow：hidden；
  • 为父盒子添加 position：fixed；
  • 为父盒子添加 display：table；

18.伪类和伪元素

• 伪类
  • :target 选择器可用于选取当前活动的目标元素。
  • :checked 选中 单选框或复选框被选中 的元素
  • :disabled 选中禁用状态下的表单控件
  • :hover 鼠标悬浮状态下
  • :first-child 匹配第一个子元素。
  • :last-child 匹配最后一个子元素。
  • :nth-child(n) 选择属于其父元素的第 n 个子元素并且必须是<p>元素
  • :nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素并且必须是<p>元素
  • :nth-of-type(n) 选择属于其父元素第 n 个<p>元素
  • :nth-last-of-type(n) 选择属于其父元素倒数第 n 个<p>元素
• 伪元素
  • ::before 在元素前插入一个伪元素
  • ::after 在元素后面插入一个伪元素
  • ::first-letter匹配元素中文本的首字母。
  • ::first-line匹配元素中第一行的文本(只能在块元素中使用)。
  • ::selection匹配被用户选中的部分。

19.伪类和伪元素的区别

• 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。伪元素可以创建一些文档语言无法创建的虚拟元素。
• 伪类用单冒号:表示；而伪元素用双冒号::表示。
• 一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

20.使用css如何让浏览器支持比12px小的字体，比如10px

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale()这个属性进行缩放！
p span{
    display:block;
    font-size:10px;
    -webkit-transform:scale(0.8); //缩放
} 

21.为什么要使用less、sass

• 嵌套：允许子选择器嵌套在父选择器内，提高样式的可读性，缓解css命名冲突问题；
• 变量：允许定义和重复使用样式中的值，轻松管理颜色、字体大小等属性；
• 混合(Minxins)：可以创建样式块，实现样式的重用；
• 继承：允许选择器继承另一个选择器的样式，以提高代码的复用性；
• 函数：允许自定义函数，以便执行各种操作。

22.less和sass的区别

	less	sass
实现方式	基于JavaScript，是在客户端进行处理的	基于Ruby，是在服务器端进行处理的
语法	大括号	缩进
定义变量	@	$
变量作用域	全局、局部	全局(可以通过在变量后跟!default改变变量的属性值)
混合(Mixins)	直接命名、直接通过命名调用	通过@mixin定义、通过@include引入
继承	.a { &:extend(.b) }	.a { @extend .b }
解析方式	Less可以向上/向下解析	Sass只能向上解析
引用外部css	LESS引用外部文件的方式与CSS中的@import相似	在SASS中，引用外部文件时必须以下划线“_”开头，如文件名以下划线命名，Sass会将其视为部分文件，不会编译为CSS文件
输出	LESS没有内置的输出设置选项	SASS提供四种输出选项——nested（嵌套缩进的CSS代码）、expanded（展开的多行CSS代码）、compact（简洁格式的CSS代码）、compressed（压缩后的CSS代码）
其他	无	@if、@else、@for、@while、@each、@function、扩展scss