常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。  1.像素（px）  是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，  像素分为两种类型：CSS像素和物理像素  CSS 像素：为 web 开发者提供，在 CSS 中使用的一个抽象单位； 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的  2.百分比（%），  当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。  3.em 和 rem 相对于 px 更具灵活性...

CSS 工程化是为了解决以下问题：1.宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？2.编码优化：怎样写出更好的 CSS？3.构建：如何处理我的 CSS，才能让它的打包结果最优？4.可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：预处理器：Less、 Sass 等；重要的工程化插件： PostCss；Webpack loader 等 。基于这三个方向，可以衍生出一些具有典型意义的子问题，这里我们逐个来看：（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？ 预处理器...

如果想要改变一个DOM元素的字体颜色，如何不在她本身上进行操作？可以更改父元素的color。

1.css选择器选择器格式优先级权重id选择器#id100类选择器#classname10属性选择器a[ref=“eee”]10伪类选择器li:last-child10标签选择器div1伪元素选择器li:after1相邻兄弟选择器h1+p0子选择器ul>li0后代选择器li a0通配符选择器*02.选择器的优先级：标签选择器、伪元素选择器：1类选择器、伪类选择器、属性选择器：10id 选择器：100内联样式：1000注意事项：!important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所...

1.css3中溢出的处理：用到text-overflow属性 text-overflow属性值为：clip：修剪文本；ellipsis：显示省略符号来表示被修剪得文本；string：使用给定的字符串来代表被修剪的文本。initial：设置为属性默认值inherit：从父元素继承该属性值。2.单行、多行文本溢出隐藏下面的例子就是出现文本溢出的问题： <style> p { width: 250px; height: 150px; background-color: bisque; } </style>  <p> 甘肃公路博物馆是全国首家以公路为主题的专题博物馆...

块元素： 独占一行，并且有自动填满父元素，可以设置margin和padding以及高度和宽度。 标签：div、ul、ol、li、dl、dt、dd、h1-h6、p、hr、table、form等标签行元素： 不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。 标签：a、b、span、img、input、textarea、select、strong，br、em等标签

display:none; visibility:hidden; opacity: 0; position移到外部；z-index图层遮盖等等1.display: none： 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 即把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样2.visibility: hidden： 元素在页面中仍占据空间，但是不会响应绑定的监听事件。 该元素隐藏起来了，但不会改变页面布局3.opacity: 0： 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事...

1.垂直居中实现：法一：父元素 display:flex,align-items:center; 弹性布局 display: flex。设置 align-items: center; justify-content: center;css： <style> .container { width: 300px; height: 200px; border: 3px solid #546461; /* display: -webkit-flex; */ display: flex; /* -webkit-align-items: center; */ align-items: cent...

两者都是外部引用CSS的方式。 link标签和@import标签的区别：1.link属于xhtml标签，除了加载css外，还可以支持RSS等其它事务， 而@import是属于css范畴，只能加载css，@import是css提供的。2.link引入css时，在页面载入（即被加载）时，link会同时被加载， 而@import引入的css会等到页面网页全部载入（即加载结束）后加载。3.link是xhtml标签，因此没有兼容性， 而@import是css2.1提出的，只有IE5以上才能识别，低版本的浏览器不支持。4.link方式样式的权重高于@import的。5.link支持使用javascript...

1.css盒模型： 用来装页面上的元素的矩形区域。 本质是一个盒子，封装周围的HTML元素，他包括：边距margin、边框border、填充padding和实际内容content。 标准盒模型： 一个块（元素）的总宽度=width+margin（左右）+padding（左右）+border（左右） 怪异盒模型： 一个块（元素）的总宽度=width+margin（左右）（即width已经包含了padding和border值）margin -  清除边框外的区域，外边距是透明的。border - 围绕在内边距和内容外的边框。padding - 清除内容周围的区域，内边距是透明的。content -...

1.css预处理器有什么 less、sass等2.为什么使用它们？ 他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。  例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

1.BFC概念： BFC(box formatting context块级格式化上下文，用于清除浮动，防止margin重叠等。)： box：box是CSS布局的对象和基本单位，一个页面是有很多个box组成的，这个box就是我们所说的盒模型。 formatting context：块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，他决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 块格式化上下文（Block Formatting Context，BFC）是一个独立的渲染区域，是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他...

CSRF 攻击可以使用以下方法来防护： 1.进行同源检测， 服务器根据 http 请求头中 origin 或者 referer信息来判断请求是否为允许访问的站点，从而对请求进行过滤。 当origin 或者 referer 信息都不存在的时候，直接阻止请求。 这种方式的缺点是有些情况下 referer 可以被伪造，同时还会把搜索引擎的链接也给屏蔽了。 所以一般网站会允许搜索引擎的页面请求，但是相应的页面请求这种请求方式也可能被攻击者给利用。（Referer 字段会告诉服务器该网页是从哪个页面链接过来的） 2.使用 CSRF Token 进行验证， 服务器向用户返回一个随机数 Token ， 当网...

可以看到 XSS 危害如此之大，那么在开发网站时就要做好防御措施， 具体措施如下： 可以从浏览器的执行来进行预防， 一种是使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。 另一种是对需要插入到HTML 中的代码做好充分的转义。 对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。 使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。1.CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。 我们只需要配置规...