摘要：1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizin 阅读全文

摘要：BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。 重要的是要注意 阅读全文

摘要：1.使用 :not() 在菜单上应用/取消应用边框2.给body添加行高3.所有一切都垂直居中4.逗号分隔的列表5.使用负的 nth-child 选择项目6.对图标使用SVG7.优化显示文本8.对纯CSS滑块使用 max-height9.继承 box-sizing10.表格单元格等宽11.用Flex 阅读全文

摘要：人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。 box-sizing: 盒大小,盒模型. 我们经常遇到左右模块宽度为50%，加个边框会掉下去，加一个这个样式就能解决，看下栗子： box-sizing属性可以为三个值之一：content-box（de 阅读全文

摘要：表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 用td:hover,显示不全 搜索了好久，没有找到好的方法，用左右边框也不完美。 于是就在想，移上去的时候给加个伪元素after，绝对定位 阅读全文

摘要：由于一个中文是两个字符组成，在编码不一致的情况下会引发字符的“重新”组合，（半个汉字的编码字符与后面的字符组合生成新的“文字”）引发原本的结束符合“变异”，从而导致找不到结束符号，使得后面的CSS就会失效。小技巧1：CSS中出现的乱码都是由于CSS字符编码与页面的字符编码不一致所引起的，因此最直接的 阅读全文

摘要：一、渲染引擎渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型文档。 二、各种渲染引擎我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上：Firefox使用Gecko 阅读全文

摘要：我们做项目的时候，经常遇到样式层叠问题，被其他的样式覆盖，或者写的权重不高没效果，对权重没有具体的分析，做了一个总结。 如下图，css规则由选择器和声明块组成，写在选择器后面大括号里的就叫声明。 一、样式类型1、行间 2、内联 3、外部 例子汇总html： style1.css style2.css 阅读全文

摘要：记得一年前，到一家公司面试的时候，问我position有哪几个属性，我憋半天才回答出2个，大家估计都清楚，就是我们经常用到的2个（relative，absolute）。 最近又用到了好多，深入研究了下。 一、语法: position：static | relative | absolute | fi 阅读全文

摘要：颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单位 1. px像素（Pixel）。像素,与分辨率设置相关. 2. %相对于浏览器的百分之多少,可以对 阅读全文

摘要：在参与规模庞大、历时漫长且参与人数众多的项目时，所有开发者遵守如下规则极为重要： 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标，我们要采用诸多方法。 本文档第一部分将探讨语法、格式以及分析 CSS 结构；第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。 阅读全文

摘要：乱码引起的CSS失效原理： 由于一个中文是两个字符组成，在编码不一致的情况下会引发字符的“重新”组合，（半个汉字的编码字符与后面的字符组合生成新的“文字”）引发原本的结束符合“变异”，从而导致找不到结束符号，使得后面的CSS就会失效。 小技巧1：CSS中出现的乱码都是由于CSS字符编码与页面的字符编 阅读全文

摘要：一、类型选择符 什么是类型选择符？指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型，div,p,span都是。 如下： body {} div {} p {} span {} 二、群组选择符 对于XHMTL对象，可以对一组同时进行了相同的样式指派。 使用逗号对选择符进行了分隔 阅读全文

摘要：当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。1.分解你的样式对 阅读全文

摘要：乱码引起的CSS失效原理：由于一个中文是两个字符组成，在编码不一致的情况下会引发字符的“重新”组合，（半个汉字的编码字符与后面的字符组合生成新的“文字”）引发原本的结束符合“变异”，从而导致找不到结束符号，使得后面的CSS就会失效。小技巧1：CSS中出现的乱码都是由于CSS字符编码与页面的字符编码不... 阅读全文

摘要：单行形式书写风格的排版约束1. 每一条规则的大括号 { 前后加空格2. 多个selector共用一个样式集，则多个selector必须写成多行形式3. 每一条规则结束的大括号 } 前加空格4. 属性名冒号之前不加空格，冒号之后加空格5. 每一个属性值后必须添加分号; 并且分号后空格例如：div.te... 阅读全文