1.电脑中的 1个像素的大小，相当于手机的4个像素的大小。也就是说，电脑中12px的长度，在手机中默认乘以4，为48像素
1em = 1font-size , 1em 是相对于自身的字体大小来计算的。
颜色 rbg(255,255,255) rgb(100%,100%,100%) 值在 0-255之间，用十六进制表示： #红色绿色蓝色 #00FF00 #0F0
浏览器 中默认的字体大小 是 16px
字体分类（指一类字体的集合）： font-family: arial, "微软雅黑", serif;
font-style: normal; 以及斜体 font-style: italic;
font-weight: normal; 以及 font-weight: bold;
小写字母变成 小型的大写字母 font-variant: small-caps;
使用 （倒数第一是font-family，倒数第二是 font-size， 这里两个不可少），可以一次性解析，不用解析5次。
font: small-caps italic bold 24px "微软雅黑";2. line-height: 20px; 字体大小font-size: 10px; 则上下各留了 5px 的距离，所以行高为10px。
可以得出结论： 行高 = line-height 减去 font-size
font-size: 20px;
line-height: 100%; /*相对于font-size, 值为20 * 100% = 20px;*/
line-height: 1.5; /*相对于font-size, 值为 20 * 1.5 = 30p;*/注意：如果使用 font: 30px "微软雅黑"; 时 line-height会被重置为默认值，所以line-height不能写在 font前面
line-height: 40px; /**此句将不起作用*/
font: 30px "微软雅黑"; /**此处line-height 被重置了*/应该这样写：
font: 30px "微软雅黑"; /**此处line-height 被重置了*/
line-height: 40px; /**写在后面，起作用*/
或者直接：
font: 30px/40px "微软雅黑";3. text-transform: capitalize; 每个单词的首字母都大写
a 标签的 text-decoration 的默认值是 underline, 可以使用 text-decoration: none; 去除下划线
word-spacing 其实就是延长空格的长度
一个字默认16px, 缩进2个汉字就是 text-indent: 32px; 但如果font-size 不是16px就不是两个汉字，于是用
text-indent: 2em;负值 表示首行向左移动 text-indent: -2em;
用处： text-intent: -99999px; 将这段话隐藏起来（不想让用户看到，但又想让搜索引擎可以搜到）
4. 盒子模型（框模型）box model ， 一直把 padding 和 margin 搞混( • ̀ω•́ )✧
边框 3个属性缺一不可：
border-width: 10px;
border-color: red;
border-style: solid;其中 border-width: 10px 20px 30px 40px; 4个值： 上 右 下 左
border-width: 10px 20px 30px; 3个值： 上 右/左 下
border-width: 10px 20px; 2个值： 上/下 右/左 （可以使用 border-xxx-width 来分别设置）
border-color, border-style 也遵循上面的规律，也有 border-xxx-color; border-xxx-style.
浏览器默认的 border-color为black, border-width: 3px; 但 border-style为none，也就是如果仅仅只设置 border-style: solid; 也是能够看到边框的。
同时指定（没有顺序规定）： border: 10px red solid; 可以 使用 border-xxx: 10px red solid; 分别指定。
假如我只要三边，不要右边：
border: 10px yellow dashed;
border-right: none;
5. 外边距 margin
现在都是相对于 左，上 ，设置 margin-top , margin-left 会改变元素自身的位置
但设置 margin-right, margin-bottom 不会改变自身位置，但会改变相邻的元素的位置。
margin 一般只给水平方向设置 auto , 左右方向设置为auto会将外边距设置为最大值， 上下方向设置为auto,则外边距为0
若 margin-right 和 margin-left 同时设置为auto，则会将两侧外边距设置为相同的值。
兄弟元素外边距重叠（选最大的），例如上一个元素的margin-bottom:100px; 下一个相邻的元素的margin-top: 200px; 则这两个元素之间的距离为 200px;而不是 300px;
父子元素垂直外边距 相邻 ，子元素的外边距会赋值给 父元素(垂直方向)。例如子元素的 margin-top: 100px; 但未给父元素设置margin-top，但此时父元素的 margin-top也变成了100px;
6. 浏览器 默认 的 <body></body> 有一个 8px 的 外边距
去除浏览器默认样式
*{
margin: 0;
padding: 0;
}
7. 对于内联元素 来说： <span>我是内容我是内容</span>, 设置 width 和 height 是不起作用的
内联元素支持 水平方向的 外边距 margin-left 和 margin-right , 不支持垂直方向的外边距 margin-top，margin-bottom
display: inline; /*内联元素，不可设置width和height*/
display：block; /*块级元素，独占一行*/
display: inline-block; /*既有内联元素特点又有块级元素特点，即支持width和height，但不独占一行*/
display: none; /*隐藏， 并且不占位置*/
visibility: hidden; /*隐藏，但占位置*/
visibility: visible; /*默认值，显示*/例如 <img src="" alt=""/> 就是 inline-block ，既可以设置 宽高，又不独占一行。
8. 如果子元素 的 高度 超出了 父元素的高度， 则 子元素会 溢出。 这里的 overflow: visible; 默认值，表示不对溢出部分处理，元素会在父元素以外的位置显示。 overflow: hidden; 会把溢出部分会被修剪，不会显示
overflow: scroll; 为父元素添加滚动条，拖动来查看完整内容。但这个存在缺点，不管子元素有没有超出，水平和竖直方向都会有滚动条，所以可以使用 overflow: auto; 根据需求来添加滚动条，需要水平就添加水平，需要竖直就添加竖直，不需要就不加。
9. 文档流 ， 是网页最底层的， 块元素：默认宽度是父元素宽度的100%
float: none; float: left; float: right;
导航条 小练习：（这是我的一小步，更是人类的一大步(◕ᴗ◕✿)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 1000px;
background-color: rgb(95,145,243);
margin: 50px auto;
overflow: hidden;
}
.nav li{
float: left;
width: 25%;
}
.nav a{
display: block;
width: 100%;
text-align: center;
padding: 5px 0;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">地址</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">榜单</a></li>
</ul>
</body>
</html>真的是很神奇啊，从
变成 ：
内联元素 设置 width 和 height是没有效果的，它只会被内容撑开 。
10. 清除浮动： clear: left; clear: right; clear: both; 清除对其影响最大的一边的浮动
使用clear: both; 解决高度坍塌问题：
对于：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>给子元素添加 float: left; 造成高度坍塌
添加一个新的 <div class="clear">clear</div> , 并赋予样式 clear: both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear">clear</div>
</div>
</body>
</html>它将父元素撑了起来：
如果 中间不加内容 <div class="clear"></div> ， 成功解决高度坍塌问题。
但这种方法需要 添加格外的 html , 下面使用 伪类选择器 :after 在父元素之后用css添加html，需满足第一是 块级元素，第二是 清除浮动，第三是没有内容，给该class取名为 clearfix, 可以复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>11. 定位
position: static; 默认值，元素没有开启定位 relative 相对定位 absolute 绝对定位 fixed 固定定位
position:relative; 内联元素还是内联元素
position:absolute; 相对于 开启了定位的祖先元素，
一般情况是 子元素position: absolute; 此时 其祖先元素开启了 position:relative
并且内联元素会变成块元素
position: fixed; 固定定位，相对于浏览器。
z-index: 9999;只有设置了 定位的元素，可以使用 z-index ， 对于position: static; 来说z-index设置无效。
父元素永远都盖不住子元素
12. 背景
background-repeat: repeat;
background-position:
这种写法总共就九个位置：
可以具体制定位置：
background-attachment
13. 按钮，有三张背景图片，
.btn:link{
width: 93px;
height: 26px;
background-image: url("/img/btn.jpg");
}
.btn:hover{
background-image: url("/img/hover.jpg");
}
.btn:active{
background-image: url("/img/active.jpg");
}会出现一种情况： 第一次点击的时候，会闪一下，这是因为 :hover 和 :active 只有在移到按钮，点击的时候才触发样式，此时才会去请求获取图片，因此第一次会闪烁。
解决方法： 将三张图片合成一张图片，叫做 CSS-Sprite 雪碧图，这样 .btn:link 获取一次图片就行了，再往左移。
.btn:link{
width: 93px;
height: 26px;
background-image: url("/img/sprite.jpg");
}
.btn:hover{
background-position: -93px 0px;
}
.btn:active{
background-position: -186px 0px;
}13. 表格
<table>
<tr>
<td colspan="2"> colspan 横向合并单元格 </td>
<td rowspan="2"> rowspan 纵向合并单元格 </td>
</tr>
</table>对于
<table>
<tr>
<th>编号</th> <th>姓名</th> <th>性别</th>
</tr>
<tr>
<td>0001</td> <td>why_su</td> <td>男</td>
</tr>
<tr>
<td>0002</td> <td>张三</td> <td>女</td>
</tr>
<tr>
<td>0003</td> <td>李四</td> <td>男</td>
</tr>
</table>使用
table{
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
th, td{
border: 1px solid black;
}结果
使用 border-spacing: 0px; 可以设置 table 和 td边框 之间的 距离
因为两个边框重合，看起来像加粗效果，可以给table设置 border-collapse: collapse; 表示 边框不重合，此时 border-spacing: 0px; 不起作用
设置 隔行变色 ， 以及 鼠标经过时更改背景颜色
tr:nth-child(even){
background-color: #bfa;
}
tr:hover{
background-color: #fba;
}
tfoot 反正都是在表格末尾，写代码的时候可以写在 tbody 前面
<table>
<thead></head>
<tfoot></tfoot>
<tbody></tbody>
</table>使用 table > tr { ... } 无法设置样式，原因在于，如果 table 与 tr 之前没有写 tbody 的话，浏览器会默认为其添加 tbody 标签。
使用 tbody > tr {... } 就可以了
14， 对于
<div class="box1">
<div class="box2"></div>
</div>设置样式
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: #fba;
margin-top: 100px;
}这里使用 margin-top: 100px; 因为子元素 和 父元素 相邻的 垂直外边距 会重叠，子元素的外边距会传递给 父元素
可以在 两个 div 之间加一个 <table></table> 解决（这样就不是相邻的了）
<div class="box1">
<table></table>
<div class="box2"></div>
</div>
用CSS的形式表示就是：
.box1:before{
content: "";
display: table;
}可以使用如下 ： 同时 解决 父元素高度坍塌 和 父子元素相邻垂直外边距重叠 ：
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}15， 默认选中：checked="checked" selected="selected"
<form action="">
用户名：<input type="text" name="username"/> <br/>
密码：<input type="password" name="password"/> <br/>
性别：<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female"/>女<br/>
爱好：<input type="checkbox" name="hobby" value="dayouxi"> 打游戏
<input type="checkbox" name="hobby" value="dushu" checked="checked"> 读书
<input type="checkbox" name="hobby" value="xiezi" checked="checked"> 写字<br/>
喜欢的明星：
<select name="mingxing">
<option value="huge">胡歌</option>
<option value="liushishi" selected="selected">刘诗诗</option>
<option value="zhaoliying">赵丽颖</option>
</select><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
其中可以使用 <optgroup label=""></optgroup> 来分组
<select name="mingxing">
<optgroup label="男明星">
<option value="huge">胡歌</option>
<option value="huojianhua">霍建华</option>
</optgroup>
<optgroup label="女明星">
<option value="liushishi">刘诗诗</option>
<option value="zhaoliying">赵丽颖</option>
</optgroup>
</select>
<input type="button" value="按钮"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<button type="button">按钮</button>
<button type="reset">重置</button>
<button type="submit">提交</button>关于 label , 有个属性for="id" 指向id， 当点击 文本的时候 可以选中 组件：
性别：<input type="radio" name="gender" value="male" checked="checked" id="male"/>
<label for="male"> 男 </label>
<input type="radio" name="gender" value="female" id="female"/>
<label for="female"> 女 </label>
使用
<fieldset>
<legend>性别</legend>
</fieldset>把上面内容给圈起来
16. 框架集 frameset 在 HTML 中不能和 <body> 合用，你要使用 <frameset>就不能使用 <body> , HTML5 废除了 <iframe>, 使用 iframe和 frameset 的话，不能被搜索引擎搜索到。不建议使用
<frameset rows="30%,*,30%">
<frame src="1.html"></frame>
<frameset cols="50%,50%">
<frame src="1.html"></frame>
<frame src="2.html"></frame>
</frameset>
<frame src="2.html"></frame>
</frameset>17. IE 10 以上已经不支持此写法
<!--[if IE]>
条件Hack，IE以外浏览器识别为“注释”，并且IE10以上版本已不支持该写法
<![endif]-->也可以指定具体IE版本: <!--[if IE 6]> <![endif]-->
小于 指定版本才显示，使用 lt ： <!--[if lt IE 9]> <![endif]-->
小于等于指定版本，使用 lte: <!--[if lte IE 9> <![endif]-->
大于 gt 大于等于 gte
18. 属性 hack
我之前这么写过哈哈，还以为能用的ヾ(๑╹◡╹)ﾉ"
1842
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
