为了让自己做的页面不那么难看，最近学了点 css。
一些重要的知识点与技巧汇总如下：
1、location属性：fixed、absolute、relative
position:absolute 脱离原来位置进行定位；相对于最近的有定位的父级进行定位，没有最近，相对于文档进行定位
position:relative 保留原来位置；相对于原来的位置进行定位。一般用 relative 作为参照物；用 absolute 进行定位
position:fixed 显示在浏览器屏幕的固定位置
单行文本垂直居中的实现方法：文本高度 line-height 等于容器高度 height、使用 padding
2、基础点
px：像素，相对单位，pixel 的缩写，垂直屏幕方向最小的点
font-size 指的是字体的高
1em = 1 * font-size，可用于解决动态缩进和居中
3、盒子模型
盒子模型的四大组成部分：外边距(marging)、盒子壁(border)、内边距(padding)、盒子内容(width * height)
4、颜色
颜色属性的表示：颜色英文名称、颜色代码、颜色函数。光学三原色：红绿蓝 rgb、美术三原色：红黄蓝。
5、html 引入 css
html 引入样式的方式：行间样式、页级样式、外部 css 样式
6、css 选择器与权重
css 选择器种类：id 选择器、class 选择器、标签选择器、通配符选择器、属性选择器、伪类选择器、伪元素选择器
css 属性作用的优先级：!important > 行间样式 > id选择器 > class选择器 | 属性选择器 | 伪类选择器 > 标签选择器 > 通配符选择器
css 权重：!important(Infinity)、行间样式(1000)、id选择器(100)、class | 属性 | 伪类选择器(10)、标签 | 伪元素选择器(1)、通配符选择器(0)，括号内的数值是 256 进制数，选择器的组合的优先级计算，依赖于选择器的权重累加值的大小
css 组合选择器：派生选择器( div span{} )、直接子元素选择器( div > span {} )、并列选择器( div.demo {} )、分组选择器( div,span {} )、伪类选择器( a:hover {} )
7、display 属性特性
行级元素 | 内联元素：display:inline，内容决定所占位置，不可以通过 css 改变宽高。如标签 span、a、strong、em、del、input
块级元素：display:block，独占一行，可以通过 css 改变宽高。如标签 div、p、ul、li、ol、form、address
行级块元素：display:inline-block，内容决定大小，可以通过 css 改变宽高，未独占一行。如标签 img
凡是带有 inline 属性的元素都有文字特性，会被分割符号(如空格、回车等)分割
8、浮动模型
float:left/right，浮动元素产生了浮动流，块级元素看不到他们，产生了 bfc 的元素和文本类属性(inline-block)的元素以及文本都能看到浮动元素
父级包住浮动元素的处理办法：子元素加块级元素 clear 清除浮动流；父级的伪元素 after 变块级元素，clear 浮动流
clear 必须作用于块级元素
伪元素天生是行级元素
设置 position:absolute、float:left/right，把元素转换为 inline-block
float 早期是为了解决文字环绕图片问题而产生
9、主流浏览器
浏览器是由 shell 和 内核 组成。主流浏览器包括：IE(Trident)、Firefox(Geoko)、Chrome(Webkit/Blink)、Safari(Webkit)、Opera(Presto)
10、margin 塌陷、margin 合并问题
magin 塌陷问题：父子嵌套的元素，垂直方向的 magin，会取最大的值，作用于父元素
margin 塌陷问题解决方法：加 border-top、使用 bfc(block format context) 解决
如何触发 bfc：position:absolute、display:inline-block、float:left/right、overflow:hidden
margin 合并问题：垂直方向两个相邻元素的 margin-bottom 和 margin-top 重叠，显示效果以大的为准
margin 合并问题的解决办法：加一个 wrapper 元素、通过计算 margin 值达到希望的显示效果
实践：
两栏布局
<!DOCTYPE html><html><head> <title>test-2col</title> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } .right { position: absolute; right: 0; width: 100px; height: 100px; background-color: black; opacity: 0.5; } .left { height: 100px; background-color: green; margin-right: 100px; }</style></head><body> <div class="right"></div> <div class="left"></div></body></html>
菜单栏
<!DOCTYPE html><html><head> <title>test-nav</title> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } .nav { list-style: none; } .nav::after { content: ""; display: block; clear: both; } .nav .nav-item { float: left; } .nav .nav-item a { display: inline-block; text-decoration: none; color: #f40; font-weight: bold; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 15px; } .nav .nav-item a:hover { color: #fff; background-color: #f40; } </style></head><body> <div class="nav"> <div class="nav-item"> <a href="#">菜单</a> </div> <div class="nav-item"> <a href="#">菜单</a> </div> <div class="nav-item"> <a href="#">菜单</a> </div> </div></body></html>
五环，固定显示在屏幕正中间
<!DOCTYPE html><html><head> <title>5circle</title> <meta charset="utf-8"> <style type="text/css"> * { margin: 0; padding: 0; } .wrapper { height: 186px; width: 380px; position: fixed; left: 50%; top: 50%; margin-top: -93px; margin-left: -190px; } .c { width: 100px; height:100px; border-style: solid; border-width: 10px; border-radius: 50%; position: absolute; } .c1 { border-color: red; } .c2 { border-color: green; margin-left: 130px; } .c3 { border-color: yellow; margin-left: 260px; } .c4 { border-color: blue; margin-left: 65px; margin-top: 65px; } .c5 { border-color: orange; margin-left: 195px; margin-top: 65px; }</style></head><body> <div class="wrapper"> <div class="c c1"></div> <div class="c c2"></div> <div class="c c3"></div> <div class="c c4"></div> <div class="c c5"></div> </div></body></html>
再写这三个实例，还是有所收获的。
全栈了，就更好玩了。
静静地写写博文，撸撸代码，赚杯咖啡钱...
