css 相关知识点汇总

css样式（选择器）的优先级

• 计算权重确定
• !important
• 内联样式
• 后写的优先级高

自定义字体的使用场景

• 宣传/品牌/banner等固定文案
• 字体图标

如何美化CheckBox

• <label> 属性 for 和 id
• 隐藏原生的 <input>
• :checked + <label>

base64的使用

• 用于减少 HTTP 请求
• 适用于小图片
• base64的体积约为原图的4/3

自适应布局

思路：

• 左侧浮动或者绝对定位，然后右侧margin撑开
• 使用<div>包含，然后靠负margin形成bfc
• 使用flex

css3的animation

• css3的animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义
• 每一帧动画元素的状态，通过animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式，
• 这些相关的动画子属性有：animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function
• 定义播放的方式，如恒速播放、艰涩播放等。

如何实现小于12px的字体效果

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;

transform: scale(0.7);

css的属性，可以缩放大小

外边距折叠(collapsing margins)

• 毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。规则如下：
  • 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
  • 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
  • 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
  • 元素自身的margin-bottom和margin-top相邻时也会折

CSS选择符有哪些？哪些属性可以继承

• id选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = "external"]）
• 伪类选择器（a:hover, li:nth-child）

CSS哪些属性可以继承？哪些属性不可以继承

• 可继承的样式： font-size font-family color, UL LI DL DD DT
• 不可继承的样式：border padding margin width height

CSS3新增伪类有那些

• :root 选择文档的根元素，等同于 html 元素
• :empty 选择没有子元素的元素
• :target 选取当前活动的目标元素
• :not(selector) 选择除 selector 元素意外的元素
• :enabled 选择可用的表单元素
• :disabled 选择禁用的表单元素
• :checked 选择被选中的表单元素
• :after 在元素内部最前添加内容
• :before 在元素内部最后添加内容
• :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
• :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
• :nth-child(odd)
• :nth-child(even)
• :nth-child(3n+1)
• :first-child
• :last-child
• :only-child
• :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
• :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
• :nth-of-type(odd)
• :nth-of-type(even)
• :nth-of-type(3n+1)
• :first-of-type
• :last-of-type
• :only-of-type
• ::selection 选择被用户选取的元素部分
• :first-line 选择元素中的第一行
• :first-letter 选择元素中的第一个字符

rgba() 和 opacity 的透明效果有什么不同

• opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
• rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

css 属性 content 有什么作用

• content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景

1Flexbox1 用于不同尺寸屏幕中创建可自动扩展和收缩布局

浏览器是怎样解析CSS选择器的

• 浏览器解析 CSS 选择器的方式是从右到左

在网页中的应该使用奇数还是偶数的字体

• 在网页中的应该使用“偶数”字体：
  • 偶数字号相对更容易和 web 设计的其他部分构成比例关系
  • 使用奇数号字体时文本段落无法对齐
  • 宋体的中文网页排布中使用最多的就是 12 和 14

margin和padding分别适合什么场景使用

• 需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin
• 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding

抽离样式模块怎么写，说出思路

• CSS可以拆分成2部分：公共CSS 和 业务CSS：
  • 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
  • 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

元素竖向的百分比设定是相对于容器的高度吗

元素竖向的百分比设定是相对于容器的宽度，而不是高度

全屏滚动的原理是什么？ 用到了CSS的那些属性

• 原理类似图片轮播原理，超出隐藏部分，滚动时显示
• 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

a标签上四个伪类的执行顺序是怎么样的

link > visited > hover > active

• L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆

网站图片文件，如何点击下载？而非点击预览

<a href="logo.jpg" download>下载</a> <a href="logo.jpg" download="网站LOGO" >下载</a>

设置元素浮动后，该元素的 display 值会如何变化

设置元素浮动后，该元素的 display 值自动变成 block

让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）

  -webkit-font-smoothing: antialiased;

font-style 属性 oblique 是什么意思

font-style: oblique; 使没有 italic 属性的文字实现倾斜

display:inline-block 什么时候会显示间隙

• 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
• 非 inline-block 水平元素设置为 inline-block 也会有水平间距
• 可以借助 vertical-align:top; 消除垂直间隙
• 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
• 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差