CSS
1、
在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可 以英文分号“;”分隔
2、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
3、/*注释语句*/
4、内联式css样式表就是把css代码直接写在现有的HTML标签中，并且css样式代码要写在style="" 双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
<pstyle="color:red;font-size:12px">这里文字是红色。</p>
5、嵌入式css样式写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head> 之间。
6、外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css” 为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文 件内 <linkhref="base.css"rel="stylesheet" type="text/css" />
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
7、 标签选择器p{font-size:12px;line-height:1.6em;}
ID选择器 #类选器名称{css样式代码;}只能在文档中使用一次。
类选择器词 .类选器名称{css样式代码;}可以使用列表方法为一个元素同时设置多个样式。
<p>到了<span class="stressid bigsizeid">三年级
子选择器 .food>li{border:1px solid red;}样式只作用于子选择器，不作用孙选择器}
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。.first span{color:red};
通用选择器 是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html 中所有标签元素。* {color:red;
伪类选择符a:hover{color:red;} 鼠标经过时， a标签内容变红a为作用的标签，hover：盘旋，悬 停。 （因为虽然设置了字体样式为红色，但是平时不显示，只有某种特定情况下才有效果，所以叫 伪类选择符）
分组选择符 .first,#secondspan{color:red;}
8、可继承的属性：文本相关属性，列表相关属性，颜色相关属性，font相关属性
不可继承的属性：边框属性
9、权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
#footer .notep{color:yellow;} /*权值为100+10+1=111*/
继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
有些特殊的情况需要为某些样式设置具有最高权值，用!important如p{color:red!important;}
10、font-family:“字体”；
font-weight:文字样式； bold粗体
font-style:italic; 斜体
text-decoration:underline;下划线
text-decoration:line-through; 删除线
text-indent:2em;段落首行缩进
line-height:1.5em; 行间距（行高）属性（line-height）
letter-spacing:50 px; 字母与字母之间的间距。
word-spacing:50px; 英文单词之间的间距
div{text-align:center/left/right;} 文本居中/靠左/靠右 不能直接在IMG标签使用， 要对所在的外面一层的块使用
11、常用的块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、 <blockquote> 、<form>
a{display:block;}内联元素a转换为块状元素
特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
4、块级元素在设置float属性后，宽度会根据内容多少改变。
常用的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、 <cite>、<code>
display:inline 将元素设置为内联元素
内联元素特点：1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
4、行内元素之间会产生间隙bug问题的场景：
1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。
如下代码：
<div>
<a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>
解决方法：
1、写在一行，之间不要有空格之类的符号。
2、使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}
内联块状元素：<img>、<input>
display:inline-block将元素设置为内联块状元素
inline-block元素特点：1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
12、盒子模型的边框有粗细、样式和颜色三个属性
p{border:2px dotted #ccc;}
dashed（虚线）|dotted（点线）| solid（实线）。
div{border-bottom:1pxsolid red;} 单独为某边框设置属性
13、布局模型1、流动模型（Flow） 默认样式，无需专门设置
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块 状元素的宽度都为100%。
内联元素都会在所处的包含元素内从左到右水平分布显示。
2、浮动模型(float) float:left;
3、层模型（Layer）
层模型有三种形式： 1、绝对定位(position:absolute)
对于其最接近的一个具有定位属性的父包含块进行绝对定位。
position:absolute;
top:20px;
right:100px;
2、相对定位(position:relative)
相对于以前的位置移动,偏移前的位置保留不动。即，以前的位置仍 然被占据着。
3、固定定位(position: fixed)
它的相对移动的坐标是视图（屏幕内的网页窗口）本身，永远固定于 视窗的某个位置（类似于右下角小广告）。
4、relative和absolute组合使用 子绝父相，可以根据父元 素进行定位
14、字体样式设置缩写：1、至少要指定font-size 和 font-family 属性且顺序固定
2、在缩写时font-size 与 line-height 中间要加入“/”斜扛。
15、水平居中： 1、如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设 置 text-align:center 来实现的。行内元素的父元素就是包裹着行内元素的元素。
2、定宽块状元素居中：通过设置“左右margin”值为“auto”来实现居中的。
3、不定宽块状元素居中：1、加入table标签
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽块状元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
例如：
table{
margin:0 auto;
}
.wrap{
display:table;
margin:0 auto;
}
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<div class="wrap">
设置我所在的div容器水平居中
</div>
2、改变块级元素的 display 为 inline 类型（设置为 行内元素 显 示），然后使用 text-align:center 来实现居中效果。
16、1、父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一 致来实现的。
2、父元素高度确定的多行文本、图片等的竖直居中
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地 设置了
方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell （设置为表格单元显示），激活 vertical-align 属性，但是会破坏原有的块状元素的 性质。
17、只要html代码中出现1. position : absolute或者2. float : left 或 float:right ，元素的display显 示类型就会自动变为以 display:inline-block（块状元素）的方式，就可以设置元素 的 width 和 height 了，且默认宽度不占满父元素。
1343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
