CSS梳理

CSS梳理

学习前端一段时间后的查缺补漏式总结回顾

定义

CSS层叠样式表，让html专注于结构

使用

选择器

1. 选择器的类型

1. 标签选择
2. 类选择.

• 类名: 字母（开头）、数字、连字符、下划线
• 适用于一组相同格式的
• 一个标签可以应用多个类，便于修改

3. ID选择器#

• 选取特定部分
• 尽量不在CSS中使用ID选择器

4. 群组选择 ，
5. 通用选择 *
6. 后代选择 空格 不用列出所有直系
7. 伪类 ：link、hover、active、visited、focus
8. 伪元素：::first-letter、::first-line、::before、::after、::selection(选中文字的颜色和背景色)；子代选择符：:first-child、:last-child、:only-child、:nth-child() (巧用n的公式选择)；子代类型选择符：:first-of-type、last-of-type、nth-of-type(odd,even)；其他：target、not()
9. 属性选择：标签/类名[属性] ^= $= *=
10. 子代选择 >
11. 同辈选择 +紧邻 ~同辈所有

2. 继承层叠

1. 能够继承的样式:text-、font-、line-、color，影响位置、特定标签内部样式以及样式冲突的时候不一定会继承
2. 层叠：

• 祖辈样式中：最近的祖辈胜出；
• 直接在标签上应用的样式胜出；
• 冲突特指度：标签为1，类样式10，id样式100，行间样式1000，后代选择器叠加计分，相同的样式表后面出现的胜出，！important特指的属性胜出。伪类等同于类，伪元素等同于标签。

3. 避免浏览器的默认属性不同，一般重置默认样式（Eric的CSS reset代码）。

元素样式

1.文本装饰

1. 字体样式 font-family：系列备用字体

• 常用衬线字体（大段字体，字母间有装饰，便于阅读）Times New Roman、Times、Georgia、serif（通用）
• 常用无衬线（标题） Arial、Helvetica、sans-serif
• 等宽字体（显示代码）
• web字体，先用@font-face下载再使用

2. 字体颜色color

• #十六进制
• rgb(r,g,b),rgba()
• hsl(),hsla()

3. 字体大小 font-size

• pt 适用于打印
• px绝对值，和浏览器设置无关
• 关键字、百分比、em在浏览器基准字号上调整
• 浏览器的缩放功能时调整整个页面的尺寸
• 关键字：small、medium、large，相对于基准字号
• em、百分比会继承
• rem基于根元素，一般设定html元素为基准字号

4. 装饰文本(如何突出某段文本)

• 文本倾斜：font-style:italic/normal
• 文本加粗：font-weight:bold/normal/400/700
• 文本大写：text-transform:uppercase/lowercase/capitalize
• 文本装饰：text-decoration:underline/overline/line-through/none
• 字符间距/单词间距 ：letter-spacing/word-spacing

5. 文本投影： text-shadow
6. 行高 line-height 取值用字号的倍数数字
7. 文本对齐：text-align:left/right/center/justify
8. 首行缩进 text-indent，百分比数值时针对段落宽度，在一些logo处一般通过缩进不显示标题字体。
9. list-sytle: 列表项目符号 list-style-type符号位置list-style-position图形符号list-style-image：url()
10. 文字垂直居中：text-align只能设置左右居中 ；通过设置行高等于盒子的高度实现文字垂直居中，行高是指基线到基线的距离。行高大于高度则偏下，否则偏上。text-align可以设置文字、行内元素和行内块居中。

2. 图像

1. 背景图片background-image,控制平铺background-repeat（no-repeat,repeat,repeat-x,repeat-y,round,space）,设置位置background-position(关键字，数值（左上角点），百分比（指定位置）)，背景图像固定设置background-attachment（scroll，fixed），背景图大小设置background-size（百分比，auto，contain，cover），线性渐变linear-fradient
2. 通过html{height：100%}设置网页没有浏览器高的问题
3. 主要支持的图片格式:png,gif,jpeg,svg

3. 链接a

1. 伪类使用顺序LoVe/HAte

4. 变形动画

1. 变形transform（rotate、scale缩放横纵或对调，translate、skew），可以同时使用多种变形，transform-origin更改原点
2. 过渡 ：需要有两个样式，transition属性和触发器，加在元素本身。transition-property、transition-duration、transition-timing-function、transition-delay
3. 动画，定义多个关键帧，不需要触发。关键帧@keyframes 动画名(from, %, to),animation、animation-name、animation-duration、animation-timing-function,anmimation-delay，animation-iteration-count, animation-direction,animation-fill-mode，animation-play-state，step。动画名和持续时间一定要写

5. 表格表单

1. 单元格之间的间隔 border-spacing
2. 单元格边框叠加控制 border-collapse（separate，collapse）
3. tr：nth-of-type(odd,even)间隔设置背景
4. 表单伪类：checked，disabled
5. 对齐的表单样式，把标注放在单独的标签中，把标签的display设置为inline-block并设置宽度和对齐
6. 表格的列宽可以通过调整的样式
7. 去掉表单输入轮廓线：outline：none
8. 防止表单域拖拽：resize:none

6. 盒模型

1. "上右下左”，内外边距的em值是参考目标元素的倍数,%根据浏览器窗口变动（以外层元素的宽度为基准）。
2. margin存在上下合并问题：上下两个盒子的外边框合并取较大值；嵌套关系的父子盒子会有塌陷问题：可以通过给父盒子border或者给父盒子padding，或者通过overflow：hidden解决。
3. 外边距可以设置为负值
4. 行内盒子没有宽和高的概念，但可以通过左右内外边距添加宽度，不过不可以用上下外边距增加行内元素高度。inline/block切换块级和行内盒子，inline-block可以是元素与周围标签并排显示，且能设置上下外边距和高度
5. 背景是设置在边框下边的，可以通过background-clip:padding-box避免，或者使用background-origin
6. 元素圆角border-radius,元素投影box-shadow
7. 溢出内容控制：visible、scroll、auto、hidden
8. 宽高，width、height一般是内容区域的宽高，可以通过box-sizing: content-box/padding-box/border-box切换
9. 最大最小宽高 max-width、min-width，防止版式变样或者难于阅读，多出部分会变成滚动条
10. 指定宽度和padding，会撑开盒子；不给定宽度有padding不会撑开

布局

1. 固定宽度布局使用像素值，一般取960px宽度比较合适，式微；流式布局和响应式布局采用百分比，响应式多了媒体查询会更加灵活。
2. CSS的三种布局机制：标准流（下）、浮动（中）和定位（上），三者结合实现。实现布局一行一行上下排列就用标准流，浮动可以让多个块级元素都在一行显示，左右对齐的盒子深适合用浮动，对于用层叠或者屏幕中固定位置的元素采用定位实现
3. 把定位的元素放到div标签当中，绘制草图，找出各个盒子，顺应原本的流

1. 浮动

1. 浮动定位：float：left、right、none，要为浮动元素设置宽度,浮动元素的html代码要在包围元素之前，浮动不影响前面的元素。
2. 浮动脱离普通流，类似转换为行内块的属性但元素之间没有空白间隙，搭配标准流父级使用。用来实现多个盒子水平排成一列，实现盒子左右对齐，实现文字围绕图片效果，浮动子元素不会超过父元素的内边距或者边框，浮动元素只会影响当前和后面的元素，前面的不影响。
3. 浮动特点：漂浮，不占位置，脱标，display转换成了行内块（但是没有空隙）
4. 父盒子很情况下不方便给高度，而子盒子又浮动，通过清除浮动防止父元素高度为0

• 附加一个div设置clear：both；
• 父级添加overflow属性；
• 通过after伪元素

.clearfix:after { content：‘’；display:block; height:0; clear:both; visibility:hidden} 
.clearfix{*zoom:1;}  //IE67专用

• 双伪元素：

.clearfix:before,.clearfix.after {content:"";display:table;}
 .clearfix:after{clear:both}
 .clearfix{*zoom:1;} 

4. 由于宽度限制，一行显示不下的浮动元素会下坠，可以考虑在元素外边包一个不设边距的div或者改变box-sizing

2. 定位

1. 绝对定位是相对于已经定位的最近父元素而言，如果没有则是浏览器窗口；所以通常用relative作为“以我为定位”的上下文标识，用于方便子元素使用绝对定位，”子绝父相“。
2. 定位：定位模式+定位偏移；
3. 定位模式四种：相对、绝对、静态、固定。

• 静态定位为默认、没有边偏移，几乎不用；
• 相对定位是元素相对于其在标准流中位置而言，原来的标准流位置继续占有；
• 绝对定位需要最近的已定位父元素，完全不占位置，可以自由移动，需要和父级搭配使用，** 子绝父相**，；
• 固定定位：完全不占位置，脱标，和父元素无关，以浏览器可视窗口为参照偏移，不随滚动条滚动，特殊版的绝对定位。

4. 绝对定位和固定定位的盒子是不能通过margin：auto的方式居中对齐的，通过设置绝对定位的偏移为50%，然后margin-left负值回退自身半个宽度实现居中。
5. 定位元素堆叠在一起后来者居上，可以通过z-index调节，z-index只在绝对、相对和固定定位元素中起作用
6. 固定和绝对定位会改变display属性，相当于inline-block，可以直接设置宽高。
7. 浮动和绝对定位、固定定位可不会有垂直外边距塌陷合并问题。

3.移动端布局（flex）

1. 视口：布局视口layout viewport 视觉视口：visual viewport理想视口ideal viewport；用meta设置理想视口，标准写法：width=device-width，initial-scale=1.0，maxmum-scale=1.0，ninmum-scale=1.0，user-scalable=no
2. 移动端推荐normalize.css 初始化样式
3. 移动设备优先是指突出表达关键内容
4. 移动端一些特殊样式：点击高亮清除：-webkit-tap-highlight-color：transparent；ios开启自定义按钮输入框属性：-webkit-appearance：none；禁用长按页面时的弹出菜单：-webkit-touch-callout：none；
5. 常见的移动端布局：单独写页面 （主流）：流式布局，flex布局，less+rem+媒体查询布局，混合布局；响应式：媒体查询，bootstrap
6. 流式布局：百分比布局，把宽度设为百分比，同时一般给body最大最小宽度，最小一般320px
7. 弹性布局flex：给父盒子添加flex属性，控制子盒子的排列方式和位置。任何容器都可以指定为flex布局，子元素的float、clear和vertial-align失效。
8. 弹性布局父元素属性：flex-direction（主轴方向，默认row）、justify-content（子元素沿着主轴的排列方式，默认从头部开始）、flex-wrap（子元素是否换行，默认不换行缩小子元素宽度）、align-item(侧轴子元素排列方式，单行形式)、align-content（多行情况下的子元素排列方式、flex-flow是flex-direction和flex-wrap的缩写； ** flex重要的是区分好主侧轴 **。
9. 弹性布局子元素属性：flex（子元素占用分数，在剩余空间分配）、align-self（单独控制某一个子项在侧轴上的排列方式）、order（项目排列顺序，数值小的靠前）
10. rem布局：可以实现文字随着屏幕大小变化、设置高度的变化、宽度高度随着屏幕等比缩放。rem可以使得元素根据html字体大小进行变化
11. rem布局配合媒体查询：@media， 针对不同媒体类型定义不同的样式。@media screen and (条件)，从小到大或从大到小，min-width和max-width包含等于。一般把屏幕宽度分为15份作为html字体的大小
12. rem布局可以通过flexible.js辅助媒体查询
13. 响应式布局：通过媒体查询改变布局容器的大小，bootstrap是响应式的框架，其中container适用于响应式（大屏下会有外边距），container-fluid适用于单独开发移动端（不同尺寸下宽度都为百分百）

一些技巧

1. 元素显示隐藏：1.设置display：none/block，先隐藏元素不保留位置，比较常用，鼠标经过显示菜单栏等。2.visibility：visible/hidden，隐藏之后保留位置。3. overflow：hidden/visible 溢出隐藏显示
2. 盒子居中设置：设置宽度，左右外边距auto
3. 垂直居中vertical-aign只对行内块和行内元素有作用，通常用来控制表单/图片与文字的对齐。图片默认是与文字的基线对齐，所以下方常有一点空白，也可以通过vertical-align去掉
4. 插入图片一般用作文件展示类，移动通过盒模型；背景图用于小图标背景或者大背景，通过back-position移动
5. 选择器和{中间有空格；属性值和：没有空格，：和值之间有空格，属性后面有分号；并集选择器换行；选择器一般不大于三级；所有属性另起一行
6. CSS属性书写顺序：1.布局定位属性：display/position/float/clear/visibility/overflow 2.自身属性： weight/height/margin/padding/border/background 3.文本属性
   color/font/text-decoration/text-align/vertical-align/white-space/break-word4.其他CSS3属性
7. 通过增加特指度控制层叠（也不要太长），避免用ID时特指度高，不好覆盖
8. 避免浏览器默认样式的不一致，用重置代码统一基准（常用标签边距字体设置，H5新标签block设置，body、ol、ul设置）
9. 字体种类避免过多，可以使用常用的基本字体集也可以使用web字体（@font-face设置）
10. 调整列表符号和数字之间的距离，可以把list-style-position设为outside，然后改变padding-left
11. 把html的字号设置为62.5%，刚好是10px
12. 文本高度一般不设置，防止溢出
13. 浮动的元素都要设置宽度，围绕浮动的元素有边框和背景可以通过overflow：hidden 截断
14. 图片添加最好使用background-img而不是img标签，控制repeat、position
15. 给链接添加下划线、下边框或者背景图片突出样式
16. 按钮亮边变暗，暗边变亮实现不同状态的效果
17. 指向外部资源的链接可以用小图标标记，选择器可以是a[href^=‘http’]或者a[href^’: //’]
18. transform属性需要添加厂商前缀，-webkit-、-ms-
19. 命名类名根据用途命名，不要用位置或者外观。
20. 避免写重复的代码，可以一个元素用多个类表示
21. 把相关的样式放在一起，比如同一区域的放在一起，或者把同为用于布局的样式放在一起，用注释区分不同分组
22. 避免浏览器干扰：去掉内外边距，使用一致的字号、设置一致的行高、改进表格边框和单元格、去掉图像链接边框、流标设置缩进和项目符号、去掉引用内容两侧的引号
23. 多使用后代选择器
24. 更改鼠标样式：cursor：default/pointer/move/text/not-allowed
25. 显示不完的文字用省略号代替：white-space：nowrap强制一行显示，overflow：hidden隐藏溢出，text-overflow：ellipsis，省略号替代
26. 精灵技术：减少服务器接受和发送请求的次数，提高页面加载能力。多个图片聚集在一张图上，通过背景位置调节显示
27. 滑动门技术：给a设置背景左侧，span设置背景右侧，用padding撑开文字部分
28. margin设置负值： 1.实现水平居中对齐。2.压住两个盒子的边框
29. CSS模拟三角：盒子宽高为0，用带宽度的border模拟出来的，四个边框都写，三个为透明色即可
30. CSS模拟箭头：一个盒子只有两边border，然后旋转

CSS3新增特性

1. 新增选择器：属性选择器[]、结构伪类选择器（first-child\last-child\nth-child(n)\first-of-type\last-of-type\nth-of-type
   n可以是从0开始的公式，n+5是五个之后）、伪元素选择器（::after::before，必须有content属性、是创建行内元素，权重是1，适用于图标字体场景）（类选择器、属性选择器、和伪类选择器权重都是10）
2. 2D转换：transform:移动translate（定位移动盒子会脱标，外边距也会影响其他元素，移动不会影响其他元素位置，可以通过设置50%设置居中，对行内标签无用）、旋转rotate(顺时针为正，逆时针为负)、缩放scale；更改转换远点transform-origin，通常转换和过渡一起使用有动画效果；可以综合多个转换效果，但是转换顺序有影响，最好位移放在其他的前面。
3. 动画:一打开就可以有动画，不用触发。 animation-name：动画名； animation-duration: 2s;
   @keyframes 动画名 {0%{} 100%{} }；
4. 3D转换：transform：translate3d，一般z轴是px单位的。z周的效果需要加透视才能看出来，透视加在被观察元素的父盒子上perspective：500px。3D旋转：rotate3d。tranform-style：preserve-3d子元素开启3D空间
5. css3通过设置box-sizing改变盒子模型
6. 线性渐变背景颜色，要加浏览器前缀

其他

• 推荐外部样式表，加载速度快
• CSS验证在线工具http://jigsaw.w3.org/css-validator
• CSS浏览器支持：http://caniuse.com/
• CSS选择符翻译：http://gallery.theopalgroup.com/selectoracle
• link标签必须设定rel=“stylesheet”、href
• hsl取色器http://hslpicker.com
• 按钮样式生成网站http：//www.bestcssbuttongenerator.com
• 链接a是行内标签，设置上下边距不好用，可以通过把display设置成block或者inline-block
• 使用拼接图片移动位置可以减少加载，在线工具：SpritePad,SpriteCow
• transform效果查看http://westciv.com/tools/transform/index.html
• 动画时序辅助http://matthewlein.com/ceaser/
• 多添加注释，去掉注释的在线工具
• 图工具http://developer.yahoo.com/ypatterns/wireframes
• 免费布局模板：http://blog.html.it/layoutgala/index.html,http://templated.co
• 自动添加厂商前缀： Autopreflixer(http://github.com/postcss/autoprefixer)