1. h1 一般用来放logo
2. P段落标签换行上下段会有间隔
br标签换行上下没有间隔
3.有一部分png格式图片可以透明背景，拥有透明背景的图片，它的后缀名一定是png
4.svg的图片放大不失真
5.ico一般用于装饰的小图标，网页头标。
6.*.webp google公司推荐的图片格式
7.*base64图片以码的形式呈现，不再是路径，减少用户请求
8.p{$}*20 快速排序
9.块级元素（p div li独占一行）内部可以嵌套行内元素（a h1-h6 span共享一行)
10.块级元素一般不会嵌套块级元素 p不可套div但div可以套p,li可以套p 从语义上分析即可 p段落标签不可以嵌套块div，因为没有意义。
div可以嵌套很多标签。行内标签不能嵌套块级标签
11.css外部样式推荐，内部样式少
12.*{ } 通配符选择器，一般用于格式设置 *{ margin:0px;padding:0px;}
13.交集选择器 p.abc.bcd [标签选择器.类选择器.类选择器] .abc.abc[类选择器.类选择器] 选择器直接连接
14.并集选择器 p,.abc,.bcd[标签选择器,类选择器,类选择器] .abc,.abc[类选择器，类选择器] 选择器逗号连接
15.后代选择器 选择器空格连接 p .abc a
16伪类选择器：最常用 注意有先后顺序
a:link {color:black;} /*未访问链接*/
a:visited {color:blue;} /*已访问链接*/
a:hover {color:yellow;} /*鼠标在连接上*/
a:active {color:green;} /*链接被点击时*/
18.一个标签既有类选择器，又有id选择器时，内容重复的地方先id后类
19.用 !important 可以设置最高优先级
17.按是否独占一行，是否能设置宽高分为
1.行内元素 span a i em strong b [inline]
2.块级元素 div p h1-h6 ul li ol dl dt dd table form [block]
3.行内块元素 不能独占一行但是可以设置宽高 img input button [inline-block]
18.margin 上右下左
19.单行文本在父级元素中垂直居中：line-height:父元素高度
20.list-style:none;去掉ol li 编号
21. 给 ul li 美观
一： 给ul li 前面放置图片 list-style-image: url('头像1.png');
list-style-position : outside;
二：html: <li><i class='n2'>2.</i><a href='#'>假如5年后你是开发总监</a></li>
css: .ly .n1,.n2,.n3{
background-color: #c00;
color:#fff;
display: inline-block;
width:18px;
height:18px;
text-align: center;
line-height: 18px;
margin-right: 12px;
22.border-radius:1px 1px 1px 1px; 边框弧度
23.text-decoration:none; /*去掉下划线*/
24.text-align:center; 文本水平居中
25.line-height:10px;文本竖直居中，值要和父元素高度一样才行
26.rgba(0,0,0,0)三基色+透明度 a取值范围[0,1] 0是完全透明 1表示完全不透明;
27.rgb(0,0,0,)三基色
28.精灵图，或者其它小的图片，一般用i 或者 span 标签写 因为二者都是行标签，所以先改成块标签，然后设置大小，接着设置背景图，
最后设置backgrund-position:-1px -2px 一般负值;
29.如果把行内元素左右浮动，则自动转换成块元素
30.让一个行内块（行内元素）自动变成块元素有三种方式
1.float（浮动） 2.position（绝对定位） 3.display:flex
31.2个或多个子元素其中一部分浮动（至少留下一个不浮动）,则父元素高度取决于那些不浮动的子元素总高之和
若子元素全部浮动，并且没有设置父元素高度，则父元素高度就会为零，导致父元素失去CSS效果，并使后边的未浮动元素出错
32.文字环绕是浮动最初的初心，浮动元素和非浮动元素会重叠一部分，但未浮动元素中文字不会被浮动元素覆盖住，而是环绕在浮动元素四周
给浮动元素添加position:absolute(绝对定位)，才会使未浮动元素文字被浮动元素覆盖住显现一部分
33.浮动元素只能对后面元素产生影响，不会对前面的元素产生影响 1对2 2对3 3对4 ....
34.子浮动元素会受到父元素影响，在子元素全部浮动并且父元素没有设置高度的时候如果父元素也浮动则父元素的高度不再为0，可以避免高度塌陷的问题
35.清除浮动（防止塌陷，想恢复标准文档流）clear
clear:none; 默认值 不清除浮动对自身的影响
clear:left; 如果我 前面兄弟代码 中设置左边有浮动，则我自动换一行
clear:right; 如果我 前面兄弟代码 中设置右边有浮动，则我自动换一行
clear:both; 如果我 前面兄弟代码 中设置 了 浮动，则我自动换一行
适用情况
(1) 父元素没有办法明确给出高度，这样可以一篇网页随时添加很多行内容，不需要限制父元素高度
（2）（没有设父元素高度）父元素的子元素全部浮动,会让父元素高度塌陷为0，这时为了清除浮动的影响
两种方法
（1）在父元素属性上使用 overflow:hidden;(虽然可以解决，但是它不是正规解决方案，一般用它来解决溢出问题)
(2) 在父元素中最后一个子元素属性中添加 clear:both;
给父元素最后再额外添加一个div子元素，给它添加clear:both属性，发现父元素高度恢复了，但多出了一行刚加的那一行
元素，要把它去掉，所以要给它去掉因此设高height:0xp;父元素高度彻底正常，但底下多了新加div中的一行字，设它隐藏
属性 visisbility:hidden;(元素不可见，占据空间) 不同于display:none;(元素不可见，不占据空间)
最终解决方案给父元素添加一个类clearfix： .clearfix:after{
content: '';
clear: both;
height: 0;
visibility:hidden;
display: block;
}
36.两个inline-block元素放在一行之间会出现空隙，如input 和 button
解决方案（1） 二者代码写在一行 <input type="text" name='wd' placeholder='亲！请输入商家或者地址'><input type="button" value="进入">
（2） 父元素加font-size:0px;但二者文字不会显示了，所以后面需要在往后各自添加font-size:14px;
(3) float 浮动
37.vertical-align:制定
38.点击回到顶部 用a标签 href='#'就可以了
39.vertical-align:1px;可以调高度middle position:relativer相对定位可以调小幅度距离，提升层数，脱离普通文档流，不影响后边元素
40.元素水平向左移动 margin-left:-px; 或者 transform:translateX（负值）;
41.overflow:hidden;溢出不要，主动裁剪
42.让绝对定位的元素位于父元素内部水平居中方法,给这个子元素属性添加：以父元素为基准 left:50%; 以自己为基准 transform:translateX(-50%);
让绝对定位的元素位于父元素内部竖直居中方法,给这个子元素属性添加：以父元素为基准 top:50%; 以自己为基准 transform:translateY(-50%);
43.box-shadow: 1px 1px 1px red; 阴影
44.table{border-collapse:collapse;text-align:center;}给table标签添加后合并表格边框,内部文字居中 td,th{border:1px red solid;}行列边框
45.多余文字。。。表示
前提：是块级元素，有明确宽度
width:100px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
46.设置背景色的同时还能设置背景图
47.行元素浮动后自动变成block（块状）
48.改变鼠标指针形状 cursor:pointer;小手;
49.text-align:right;文字右对齐
50.去掉input框外边线 outline:none;
51.-webkit-appearance:none;设为none就可以优化input checkbox单选框，不再用默认的 有一些css属性并没有获得全部浏览器的支持，所以有一些属性需要加前缀
-webkit-:火狐和谷歌
-moz-:firefox:火狐
如：.zc_2_box{
/*该句可以使checkbox不使用默认样式*/
-webkit-appearance:none;
width: 20px;
height: 20px;
border:1px red solid;
border-radius: 50%;
margin-right: 1px;
}
52. .*:checked该伪类选择器可以使checkbox被点击时一直保持背景图*。直到下一次点击
如： .zc_2_box:checked{
background-image: url('./images2/chaticon.png');
background-position: -287px -96px; 精灵图
}
53.<bottom>按钮</bottom> 文字按钮
54,.abc:before 和 .abc:after 是在css代码中给abc元素分别最先 最后添加一个子元素 该元素一定要配合 content: '';
例如：.zc_ts:hover dd:after{
content: ''; （重要）
display: inline-block;
height:0px;
width:0px;
/*简洁
border:10px solid transparent;
border-left-color:green;
*/
/*箭头朝下*/border-top:7px solid transparent;
/*箭头朝左*/border-right:7px solid transparent;
/*箭头朝上*/border-bottom:7px solid transparent;
/*箭头朝右*/border-left:7px solid #f66;
position:relative;/*相对定位*/
float: right;
left: 14px;
top:10px;
}
55.制作网页头标，写在head标签中 link:favicon+tab
设置搜索引擎关键字，写在head标签中 <meta name='keywords'content="招财猫 关键字1 关键字2 关键字3" >
网站描述,也能提供搜索引擎搜索,写在head标签中 <meta name='description' content="每个人都是IT大神">
56.兼容问题
1.
57.div内部如果元素全部浮动，则该div会发生高度塌陷问题，也就是高度为零，解决方法--将该div高度不设置，再用clearfix类清除浮动即可，好处可以无限添加内容，高度自适应
58.div内部如果元素全部或部分不浮动，不设该div高度时，他的高度取决于那些不浮动子元素累加的高度，也可以微微自适应
2. P段落标签换行上下段会有间隔
br标签换行上下没有间隔
3.有一部分png格式图片可以透明背景，拥有透明背景的图片，它的后缀名一定是png
4.svg的图片放大不失真
5.ico一般用于装饰的小图标，网页头标。
6.*.webp google公司推荐的图片格式
7.*base64图片以码的形式呈现，不再是路径，减少用户请求
8.p{$}*20 快速排序
9.块级元素（p div li独占一行）内部可以嵌套行内元素（a h1-h6 span共享一行)
10.块级元素一般不会嵌套块级元素 p不可套div但div可以套p,li可以套p 从语义上分析即可 p段落标签不可以嵌套块div，因为没有意义。
div可以嵌套很多标签。行内标签不能嵌套块级标签
11.css外部样式推荐，内部样式少
12.*{ } 通配符选择器，一般用于格式设置 *{ margin:0px;padding:0px;}
13.交集选择器 p.abc.bcd [标签选择器.类选择器.类选择器] .abc.abc[类选择器.类选择器] 选择器直接连接
14.并集选择器 p,.abc,.bcd[标签选择器,类选择器,类选择器] .abc,.abc[类选择器，类选择器] 选择器逗号连接
15.后代选择器 选择器空格连接 p .abc a
16伪类选择器：最常用 注意有先后顺序
a:link {color:black;} /*未访问链接*/
a:visited {color:blue;} /*已访问链接*/
a:hover {color:yellow;} /*鼠标在连接上*/
a:active {color:green;} /*链接被点击时*/
18.一个标签既有类选择器，又有id选择器时，内容重复的地方先id后类
19.用 !important 可以设置最高优先级
17.按是否独占一行，是否能设置宽高分为
1.行内元素 span a i em strong b [inline]
2.块级元素 div p h1-h6 ul li ol dl dt dd table form [block]
3.行内块元素 不能独占一行但是可以设置宽高 img input button [inline-block]
18.margin 上右下左
19.单行文本在父级元素中垂直居中：line-height:父元素高度
20.list-style:none;去掉ol li 编号
21. 给 ul li 美观
一： 给ul li 前面放置图片 list-style-image: url('头像1.png');
list-style-position : outside;
二：html: <li><i class='n2'>2.</i><a href='#'>假如5年后你是开发总监</a></li>
css: .ly .n1,.n2,.n3{
background-color: #c00;
color:#fff;
display: inline-block;
width:18px;
height:18px;
text-align: center;
line-height: 18px;
margin-right: 12px;
22.border-radius:1px 1px 1px 1px; 边框弧度
23.text-decoration:none; /*去掉下划线*/
24.text-align:center; 文本水平居中
25.line-height:10px;文本竖直居中，值要和父元素高度一样才行
26.rgba(0,0,0,0)三基色+透明度 a取值范围[0,1] 0是完全透明 1表示完全不透明;
27.rgb(0,0,0,)三基色
28.精灵图，或者其它小的图片，一般用i 或者 span 标签写 因为二者都是行标签，所以先改成块标签，然后设置大小，接着设置背景图，
最后设置backgrund-position:-1px -2px 一般负值;
29.如果把行内元素左右浮动，则自动转换成块元素
30.让一个行内块（行内元素）自动变成块元素有三种方式
1.float（浮动） 2.position（绝对定位） 3.display:flex
31.2个或多个子元素其中一部分浮动（至少留下一个不浮动）,则父元素高度取决于那些不浮动的子元素总高之和
若子元素全部浮动，并且没有设置父元素高度，则父元素高度就会为零，导致父元素失去CSS效果，并使后边的未浮动元素出错
32.文字环绕是浮动最初的初心，浮动元素和非浮动元素会重叠一部分，但未浮动元素中文字不会被浮动元素覆盖住，而是环绕在浮动元素四周
给浮动元素添加position:absolute(绝对定位)，才会使未浮动元素文字被浮动元素覆盖住显现一部分
33.浮动元素只能对后面元素产生影响，不会对前面的元素产生影响 1对2 2对3 3对4 ....
34.子浮动元素会受到父元素影响，在子元素全部浮动并且父元素没有设置高度的时候如果父元素也浮动则父元素的高度不再为0，可以避免高度塌陷的问题
35.清除浮动（防止塌陷，想恢复标准文档流）clear
clear:none; 默认值 不清除浮动对自身的影响
clear:left; 如果我 前面兄弟代码 中设置左边有浮动，则我自动换一行
clear:right; 如果我 前面兄弟代码 中设置右边有浮动，则我自动换一行
clear:both; 如果我 前面兄弟代码 中设置 了 浮动，则我自动换一行
适用情况
(1) 父元素没有办法明确给出高度，这样可以一篇网页随时添加很多行内容，不需要限制父元素高度
（2）（没有设父元素高度）父元素的子元素全部浮动,会让父元素高度塌陷为0，这时为了清除浮动的影响
两种方法
（1）在父元素属性上使用 overflow:hidden;(虽然可以解决，但是它不是正规解决方案，一般用它来解决溢出问题)
(2) 在父元素中最后一个子元素属性中添加 clear:both;
给父元素最后再额外添加一个div子元素，给它添加clear:both属性，发现父元素高度恢复了，但多出了一行刚加的那一行
元素，要把它去掉，所以要给它去掉因此设高height:0xp;父元素高度彻底正常，但底下多了新加div中的一行字，设它隐藏
属性 visisbility:hidden;(元素不可见，占据空间) 不同于display:none;(元素不可见，不占据空间)
最终解决方案给父元素添加一个类clearfix： .clearfix:after{
content: '';
clear: both;
height: 0;
visibility:hidden;
display: block;
}
36.两个inline-block元素放在一行之间会出现空隙，如input 和 button
解决方案（1） 二者代码写在一行 <input type="text" name='wd' placeholder='亲！请输入商家或者地址'><input type="button" value="进入">
（2） 父元素加font-size:0px;但二者文字不会显示了，所以后面需要在往后各自添加font-size:14px;
(3) float 浮动
37.vertical-align:制定
38.点击回到顶部 用a标签 href='#'就可以了
39.vertical-align:1px;可以调高度middle position:relativer相对定位可以调小幅度距离，提升层数，脱离普通文档流，不影响后边元素
40.元素水平向左移动 margin-left:-px; 或者 transform:translateX（负值）;
41.overflow:hidden;溢出不要，主动裁剪
42.让绝对定位的元素位于父元素内部水平居中方法,给这个子元素属性添加：以父元素为基准 left:50%; 以自己为基准 transform:translateX(-50%);
让绝对定位的元素位于父元素内部竖直居中方法,给这个子元素属性添加：以父元素为基准 top:50%; 以自己为基准 transform:translateY(-50%);
43.box-shadow: 1px 1px 1px red; 阴影
44.table{border-collapse:collapse;text-align:center;}给table标签添加后合并表格边框,内部文字居中 td,th{border:1px red solid;}行列边框
45.多余文字。。。表示
前提：是块级元素，有明确宽度
width:100px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
46.设置背景色的同时还能设置背景图
47.行元素浮动后自动变成block（块状）
48.改变鼠标指针形状 cursor:pointer;小手;
49.text-align:right;文字右对齐
50.去掉input框外边线 outline:none;
51.-webkit-appearance:none;设为none就可以优化input checkbox单选框，不再用默认的 有一些css属性并没有获得全部浏览器的支持，所以有一些属性需要加前缀
-webkit-:火狐和谷歌
-moz-:firefox:火狐
如：.zc_2_box{
/*该句可以使checkbox不使用默认样式*/
-webkit-appearance:none;
width: 20px;
height: 20px;
border:1px red solid;
border-radius: 50%;
margin-right: 1px;
}
52. .*:checked该伪类选择器可以使checkbox被点击时一直保持背景图*。直到下一次点击
如： .zc_2_box:checked{
background-image: url('./images2/chaticon.png');
background-position: -287px -96px; 精灵图
}
53.<bottom>按钮</bottom> 文字按钮
54,.abc:before 和 .abc:after 是在css代码中给abc元素分别最先 最后添加一个子元素 该元素一定要配合 content: '';
例如：.zc_ts:hover dd:after{
content: ''; （重要）
display: inline-block;
height:0px;
width:0px;
/*简洁
border:10px solid transparent;
border-left-color:green;
*/
/*箭头朝下*/border-top:7px solid transparent;
/*箭头朝左*/border-right:7px solid transparent;
/*箭头朝上*/border-bottom:7px solid transparent;
/*箭头朝右*/border-left:7px solid #f66;
position:relative;/*相对定位*/
float: right;
left: 14px;
top:10px;
}
55.制作网页头标，写在head标签中 link:favicon+tab
设置搜索引擎关键字，写在head标签中 <meta name='keywords'content="招财猫 关键字1 关键字2 关键字3" >
网站描述,也能提供搜索引擎搜索,写在head标签中 <meta name='description' content="每个人都是IT大神">
56.兼容问题
1.
57.div内部如果元素全部浮动，则该div会发生高度塌陷问题，也就是高度为零，解决方法--将该div高度不设置，再用clearfix类清除浮动即可，好处可以无限添加内容，高度自适应
58.div内部如果元素全部或部分不浮动，不设该div高度时，他的高度取决于那些不浮动子元素累加的高度，也可以微微自适应
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
