面试笔记（三）【CSS】篇
关注
分享
扫一扫
前端面试题的整合，尽量写全又简洁易懂的风格。
此篇为【CSS】相关知识的整理。
面试笔记系列专栏共7个篇章，会不定期更新。
敲起来blingbling
挺秃然的
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css伪类
css伪类伪类作用:active激活（比如选点击a标签时）:focus选中（比如选中input框）:hover悬停:first-child第一个子元素:before/:after元素前/后画三角形一般使用伪类 content 内容为空，追加在div前/后==方做一个小三角方向键.a:after { content: ""; /*如果不是伪类，直接在div上的话，设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/原创 2021-09-09 22:29:58 · 208 阅读 · 0 评论 -
响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，移动端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。响应式布局的实现方案1 媒体查询 @media@media 可以针对不同的屏幕尺寸设置不同的样式/* 如果文档宽度小于 300px 则修改背景颜色 */@media screen and (max-width: 300px) { body { background: lightblue; }}2 百分比布局通过百分比原创 2021-09-09 22:28:54 · 236 阅读 · 0 评论 -
rgba和opacity的透明效果的区别
rgba() 和opacity [oʊˈpæsəti] 都能实现透明效果；opacity作用于元素以及元素内所有内容的透明度；而rgba() 只作用于元素的颜色或其背景色，不会影响到里面内容，也就是说设置rgba透明元素的子元素不会继承透明效果。...原创 2021-09-09 22:27:27 · 229 阅读 · 0 评论 -
css预处理器 Sass和Less
什么是Sass、LessSass和Less都属于Css预处理器，定义了一种新的语言，其基本思想是用一种专门的编程语言，为Css增加一些编程的特性。为什么要使用Sass、Lesscss只是单纯的属性描述，它并不具有变量、条件语句等，这就导致了它难组织和维护。Less与Sass的特性（1）混合：将一个定义好的classA引入到另一个classB中，从而简单实现classB继承了classA的所有属性（2）嵌套：class中嵌套class，从而减少重复的代码（3）运算：可以在css中使用数学计算（原创 2021-09-09 22:26:44 · 337 阅读 · 0 评论 -
HTML5和CSS3部分新特性
目录HTML5新特性CSS3新特性HTML5新特性HTML5 是最新的 HTML 标准。使用HTML5只需要用<!DOCTYPE html>，DOCTYPE告诉浏览器使用哪个版本的HTML规范来渲染文档。1 新增语义化标签：<article> <aside> <nav> <header> <footer>2 input新增的type属性 button checkbox radio reset原创 2021-09-09 22:23:34 · 79 阅读 · 0 评论 -
css hack
CSS hack是在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的。（hack主要针对IE浏览器）比如IE6能识别下划线 _ 和星号 *，IE7只能识别星号 * ，而其它浏览器则会当做错误忽略。例如：margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说 margin-left:20px; 在ie6中距左侧对象的实际显示距离是40px，解决方法：{ margin-left:20px; _margin-left:20px; } 注意原创 2021-09-08 21:58:40 · 85 阅读 · 0 评论 -
css容器长宽比（用padding-top来控制高度）
div上设置一个自定义属性，值为长宽比，假设为4:3。容器宽度width设为100%，高度height先设为0；（因为是用padding-top来控制高度的）接着通过属性选择器，当自定义属性值为比如4:3的时候，padding-top就是 100% × 3/4 = 75% <div class="aa" data-ratio="4:3"></div>..aa { position: relative; /*因为容器所有子元素需要绝对定位*/ height:原创 2021-09-08 21:57:58 · 993 阅读 · 0 评论 -
css元素居中
1 水平居中margin: 0 auto;2 水平垂直居中（1）方法一 （定位，top和left偏移量50%，再各进行本身的负向偏移50%）position: relative; /* 如果定位为绝对定位，那么父元素设置相对定位*/width: 400px;height: 200px;top: 50%;left: 50%;margin: -100px 0 0 -200px; /* ① 需要知道div的宽高*//* transform: translate(-50%, -50%); *原创 2021-09-08 21:56:30 · 89 阅读 · 0 评论 -
BFC（块级格式化上下文)
BFC（Block formatting context）：块级格式化上下文。BFC是一个独立的布局环境。可以利用BFC解决两个相邻元素的上下margin重叠问题。BFC的特性：属于同一个BFC的两个相邻容器的上下margin会重叠<div> <div class="a"></div> <div class="b"></div></div>a设置margin-bottom为20px，b设置margin-top原创 2021-09-08 21:55:39 · 94 阅读 · 0 评论 -
css元素塌陷
内部元素设置了浮动（float）导致外部父元素无法被撑开，从而就坍塌了。<div class="d"> <div class="a"></div> <div class="b"></div> <!-- <div class="c"></div> --></div>.d { border: 1px solid red; }.a,.b { width: 100px; he原创 2021-09-08 21:54:49 · 213 阅读 · 0 评论 -
css盒子模型
所有HTML元素可以看作盒子。CSS盒模型包括外边距，边框，内边距，和内容box-sizing 属性标准模型 box-sizing: content-box; （宽高就是 content 的宽高）IE模型 box-sizing: border-box; （宽高包含了padding和border）...原创 2021-09-08 21:54:11 · 85 阅读 · 0 评论