ID选择器：#id { } ID是独一无二的，不可重复
类选择器： .class { }
标签选择器 h p input...
子选择器：.food>li 大于符号(>),仅用于选择指定标签元素的第一代子元素
后代选择器：.food li
通用选择器：*{ } 匹配html中所有标签元素
分组选择符：h1,span,li { }
伪类选择符：例：
a:hover{color:red;}->鼠标滑过状态设置字体颜色变红;
:link /*没有访问过的链接*/
:visited /*已经访问过的链接*/
input:focus{ } 选取获得焦点（光标）的表单
标签的权值为1，类选择符的权值为10，ID选择符的权值为100；行内样式style权值1000；
继承或者 * 权值0
改变样式权重：!important >> p{ color:red!important; }
权重叠加：
复合选择器会权重叠加；权重会叠加，不会有进位
(相同权重值时)：
层叠就是在html文件中对于同一个元素可以有多个css样式存在，
当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，
处于最后面的css样式会被应用。
继承性：子标签会继承父标签的某些样式，text- font- line- color
标题标签不会继承父元素文字大小；
a标签不会继承父元素的文字颜色；
优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
文字：
font-family:" "; /*设置字体*/
font-size:6px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/400 700
font-style:italic/*斜体*/
文字属性连写，文字大小字体必写；其余不写取默认
复合写法：font: style weight size/height family
文本：
text-decoration:underline;/*设置文字下划线*/ ；none/*没有装饰线*/
text-indent:2em;/*缩进*/
line-height:2em;20px/*行间距(行高)*/
letter-spacing:10px;/*文字间隔*/
word-spacing:10px;/*字母间隔*/
text-align:centen;/*块状元素中文本，图片居中*/
.oldPrice{text-decoration:line-through;}删除线
例：<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p>
原价：300元 现价：230 元
背景：
background-color （transparent透明）元素设置背景色 |
background-image 图像放入背景 背景图片撑不开盒子的宽高 |
background-repeat no-repeat 不平铺；repeat 平铺； 背景图像平铺
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺 |
background-position: 方位名词(left;right;center;top) x y 只写一个参数，第二参数默认垂直
改变图像在背景中的位置；
精确坐标 x y 只写一个参数，参数为x坐标，第二参数默认垂直；可混合使用 |
background-attachment: scroll(滚动) ；fixed(固定，背景定位背景图片偏移位置参考非盒子大小，以浏览器大小为基准) 背景图像是否固定或者随着页面的其余部分滚动。
复合写法：background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
半透明背景 background: rgba(0,0,0, .3);最后参数是alpha(透明度)，取值0~1之间，可以 .3代替0.3
轮廓：
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
元素分类：
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有： display:inline;块转内联
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有： display:block内联转块状
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有： display:inline-block设置为内联块状
<img>、<input>
块级元素： display:block内联转块状
1、从新的一行开始，并且其后的元素也另起一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
4.是一个容器及盒子，里面可以放行内或者块级元素
内联元素：display:inline 块转内联
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变
4.只能容纳文本或其他行内元素
内联块状元素： display:inline-block设置为内联块状
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型：
Margin(外边距) - 清除边框外的区域，外边距是透明的(可让块级盒子水平居中)。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
border: 边框
每个边框有 3 个方面：宽度、样式，以及颜色
例：p{ border:2px dotted #ccc;}
border-width:2px; 边框宽度
border-style:solid; dashed（虚线）| dotted（点线）| solid（实线）
border-color:red; 颜色--边框颜色值 transparent。这个值用于创建有宽度的不可见边框
复合写法：border: width style color
border-collapse:collapse 合并相邻边框（仅用在表格上）
一个块元素，不设置宽度，这个块元素设置左右padding值，不会撑开盒子。
padding: 填充
例：div{ padding:20px 10px 15px 30px; } 上top-右right-下botton-左left；
5px 10px 上下5，左右10；
5px 10px 20px 上5 左右10 下20
margin: 边界
padding在边框里，margin在边框外。
设置外边距的最简单的方法就是使用 margin 属性。
相邻块元素垂直外边距的合并：
尽量只给一个盒子添加margin值
嵌套块级元素垂直外边距塌陷：
1.给父元素设置边框。
2.给父元素设置内边距。
3. overflow:hidden;
圆角边框：
border-radius:length(数值或百分比);
border-top-left-radius、border-top-right-radius、
border-bottom-right-radius 和 border-bottom-left-radius
盒子阴影：
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
color rgbs(半透明)
文字阴影：
text-shadow: h-shadow v-shadow blur color
布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
a.流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2.内联元素都会在所处的包含元素内从左到右水平分布显示。
b.浮动(float) 可以让块状元素并排显示
任何元素都可以浮动，浮动后具有行内块元素相似的特性
块级元素没有设置宽度，默认父级，添加浮动后，大小根据内容
设置浮动，漂浮在普通块元素上面(脱标)，浮动盒子不在保留原先位置
只影响浮动盒子后面的标准流，不影响前面的
标准流父元素排列上下位置，内部子元素采取浮动排列左右位置
清除浮动：（父级盒子没高度；子盒子浮动了；影响下面布局）
选择器{clear:属性值;} left ; right ; both(同时左右两侧)
额外标签法：浮动元素末尾添加一个空标签(要求为块级元素)
例如添加<div style="clear:both"></div>，或者其他标签（如<br />等）
父级添加 overflow属性，hidden（隐藏溢出） ; auto ; scroll
.clearfix:after 伪元素清除(父级类名添加clearfix)
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、 7 专有 */
*zoom: 1;
}
双伪元素清除浮动(父级类名添加clearfix)
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
父盒子有高度，不需要清除；清除浮动，父级根据子盒子自动检测高度；
父级有高度，不会影响下面的标准流
c.层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，
但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
定位 = 定位模式 + 边偏移
定位模式：
浮动脱标 ：绝对定位，固定定位
脱标元素特点：行内元素可直接设置宽高；块级不会默认父元素宽，默认宽高0，内容会撑开宽高
1、绝对定位(position: absolute)
没有父元素或者父元素无定位，以浏览器为基准。
父元素有定位，以最近一级有定位父（祖级）元素为基准
绝对定位，脱标，不占有原来的位置
子绝父相
2、相对定位(position: relative)
参照于自己原来的位置来移动；继续保留原来的位置（不脱标）
例：position: relative;
top: 100px;.......
3、固定定位(position: fixed)
以浏览器的可视窗口（）为基准
脱标，不占位置
固定在版心右侧位置：
浏览器宽度一半--left50%，margin-left:(版心盒子宽度一半)
4、静态定位 : static; 默认定位方式
偏移：
上 下 左 右
居中：
行内元素(文本，图片等)，行内块元素水平居中给其父元素添加 -> 居中 text-align:center
块状元素
-> 定宽(设置固定宽度)块状居中 左右margin”值为“auto”
->不定宽块状居中
1.加入 table 标签：
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法
加入table标签，设置左右margin值为auto
2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )
当文字内容的长度大于块的宽时，会有内容脱离块
日常记录，勤加练习。