目录：
一、伪类
二、样式
1、字体
2、背景图片
3、margin和padding
4、列表属性
5、float
6、clear
7、position
8、text-decoration（a标签下划线去除）
9、vertical-align
内容：
一、伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ background-color:red; } a:hover{ background-color:blue; } a:visited{ background-color: #dddddd; } a:active{ background-color:green; } p:after{ content: 'ppp'; } p:before{ content: 'aaa'; } </style> </head> <body> <!--伪类--> <a href="http://www.baidu.com">baidu</a> <p>hello p </p> </body> </html>
二、样式
1、字体格式：
letter-spacing： 字母之间的间距
word-spacing： 单词之间的间距（重要）
text-transform：capitalize 首字母大写
2、背景图片
background-position：center center 表示居中
3、margin和padding
注意：在div嵌套中，如果外面的div标签没有内容，设置里面div的margin的时候，会发现左右是你想要的效果，但是上下会有问题，这个问题是div塌陷问题，通常需要在div中标注内容或者在外面div中加border解决div塌陷问题
4、列表属性
ul,ol{
list-style:decimal-leading-zero;
list-style:none;
list-style:circle;
list-style:upper-alpha;
list-style:disc;
}
ul{ /*list-style: decimal-leading-zero;*/ 显示数字 /*list-style:none;*/ 无任何样式 /*list-style:circle;*/ 显示为序列为空心圆 /*list-style:upper-alpha; 显示序列为A B C*/ list-style:disc; 普通显示 } View Code
5、float
float设计之初是为了文本环绕图片而设计的，所以虽然div标签会悬浮，它还是会把其他div标签内的文本挤出自己所占的空间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:red; height:30px; width:50px; } #i2{ background-color:yellow; height:30px; float: left; width:50px; } #i3{ background-color:green; height:70px; width:200px; } </style> </head> <body> <div id="i1">1111</div> <div id="i2">222</div> <div id="i3">333</div> </body> </html> View Code
6、clear
clear：none|left|right|both
取值：
none： 默认值，允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象
备注：
与clear达到同样的效果，可以在父级标签加overflow：hidden属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ background-color:blue; } .menu1{ width:100px; hegith:50px; color:gold; float:left; } .menu2{ width:100px; hegith:50px; color:gold; float:left; } .bottom{ background-color: green; text-align: center; } .clear{ clear:both; } </style> </head> <body> <div class="outer"> <div class="menu1">菜单一</div> <div class="menu2">菜单二</div> <div class="clear"></div> </div> <div class="bottom">底部</div> </body> </html> View Code
7、position
取值：
static：默认值
fixed
relative：relative紧跟着设置top和left，它会相较它之前的位置移动
absolute：如果它一直找不到一个父类的position为非static，它会参照html整体的位置进行移动，如果找到会按照该父类进行移动
例子：relatvie效果，可以看到div2的位置没有被div3取代，说明relative不是一个脱离操作，它只是按照它自己的位置相对移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:red; height:30px; width:50px; } #i2{ background-color:yellow; height:30px; width:50px; position: relative; left:100px; top:100px; } #i3{ background-color:green; height:70px; width:200px; } </style> </head> <body> <div id="i1">1111</div> <div id="i2">222</div> <div id="i3">333</div> </body> </html> relative效果
8、text-decoration（a标签下划线去除）
text-decoration：none 去掉a标签下面的横向，但是a标签仍然有超链接功能
underline 默认的，增加下划线
9、vertical-align 这个属性在图片对应的标签上设置
表示文本的垂直居中
top：表示文本和图片头部保持水平
bottom：表示文本和图片底部保持水平
middle：表示文本与图片中部保持水平
数字： 可以任意修改和图片的位置
转载于:https://www.cnblogs.com/xiaopi-python/p/7220106.html
