目录------------
一.选择器；
二、特殊性（优先级）；
三.文本相对长度单位；
四.盒子模型；
五.
利用CSS画图
一.选择器；
1.
ID选择器：以#开始，引用时使用id，如id="div1"
2.类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"
3.标签选择器：以标签名称开始，如p,span,div,*
4.伪类选择，a:hover，a:link，a:visted，a:active。
1.1、基础的选择器
其中：
p.info的意思是p元素中必须有class="info"属性将被选择，p .info是选择后代元素
1.2、组合选择器
1.3、属性选择器
1.4、伪类
1.5、伪元素
二、特殊性（优先级）；
三.文本相对长度单位；四.盒子模型；
五.
利用CSS画图
a)、同类型，同级别的样式后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
d)、具体 > 泛化的，特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式：内嵌在元素中，<span style="color:red">span</span>
内部样式表：在页面中的样式，写在<style></style>中的样式
外联样式表：单独存在一个css文件中，通过link引入或import导入的样式
f)、!important 权重最高，比 inline style 还要高
三.文本相对长度单位；四.盒子模型；
五.
利用CSS画图
em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
(相对父元素的字体大小倍数)
rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
（相对是的HTML元素的字体大，默认16px）
可以利用rem在变屏幕变宽时元素大小也随之发生变化，但这里并没有考虑高度，但为响应式布局与hack提供了思路。
四.盒子模型；
五.
利用CSS画图
盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。
content-box
： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
border-box
： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，当box-sizing: border-box时的宽度设置会包含border与padding，但不包含margin，但margin也会占用位置。
五.
利用CSS画图
1.三角形
<style type="text/css">
#box{
width: 0;
height: 0;
border: 100px solid blue;
border-color: blue transparent transparent transparent; /*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/
}
</style>
<body>
<div id="box"></div>
</body>
2.心形
<style>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:after,#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0px 0px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
<body>
<div id="heart">
</div>
</body>
（未完 待更新~~~ 前端新人，如有错误，欢迎指正！）
1104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
