css总结笔记.docVIP

Html相关的内容： 空格合并现象------特殊字符 Html代码对空格，缩进，换行是不敏感，如果一定要换行那么可以使用br/，如果一定要输入多个空格nbsp;gt;lt;. 选择器：选择页面上的某一个元素。 1.0标签选择器： 2.0类选择器： .类名 3.0id选择器: #id名 4.0使用类选择器和id选择器的注意点： 类名和id名的命名规则** 5.0 通配符 *{m p} css : 1 清除默认样式 m p img 2 设置全局样式 body a a:hover 3 fl fr clearfix public c 6.0 后代选择器 选择器 选择器{} div p{} 7.0 并集代选择器 选择器,选择器{} div,p{} 8.0 交集选择器 选择器选择器{} div.box{} Css的三大特性 继承 : 文字控制属性 line-,text-,font-开头的属性都是可以继承 层叠 ：权重一样的情况下，后写的层叠掉先写的 优先级 优先级从大到小 ！importantId类标签通配符浏览器默认继承 （0,0,0,0） ----- (行内式，id，类，标签) 背景： Background-color:背景颜色; Background-image:背景图片 url() css css ../images/ Background-repeat:是否平铺(默认平铺repeat) no-repeat:不重复。 repeat-x:在x轴方向平铺 repeat-y:在y轴方向平铺 background-position:水平方向 垂直方向 水平方向：left：左 center:中 right: 右 垂直方向：top: 上 center: 中 bottom:下 text-相关属性 text-indent: 作用：设置首行缩进。 用法：text-indent: 2em; em:一个文本的距离。 text-align: 作用：设置容器中的文本的位置 取值： center:设置内容在容器的水平方向上居中。 left:设置内容在窗口的水平方向上靠左 right:设置内容在容器的水平方向上靠右 text-decoration: none underline line-through none:没有任何装饰 underline:下划线 margin: 0 auto; 作用：设置容器自身水平居中。 条件： 1 盒子必须是块级元素 2盒子必须有width 显示模式 div {display:none} visibility:hidden 行内元素： a,span,b,u,i,s,strong,em,ins,del 属性：display: inline 特点： 1.0一行里面可以显示多个 2.0无法设置宽高 3.0大小由内容来决定 块级元素： p,h1-h6,div,ul,li,ol,li,dl,dt,dd 属性： display:block 特点： 1.0独占一行 2.0可以设置宽高 3.0默认宽度一整行 行内块级元素： img,input 属性：display:inline-block 特点： 1.0可以设置宽高 2.0一行内可显示多个 锚伪类 L-V_H-A a div a:link ,a:visited,a:hover,a:active 行高（line-height） 定义： 两行文本之间基线的距离就是做行高 应用： 行高等于容器的高度，元素在父容器中垂直居中 盒子模型 盒子的挡板---------border border: border-width border-style solid dashed border-color; color 16 #fff #000 #ccc #333 rbg() 盒子的泡沫---------padding 4 : 2 3 4 width + padding +border 占位 width + padding +border+margin 盒子中的物品--------内容 盒子与盒子之间的距离---------margin 1 合并 div + div 2 塌陷 divdiv 计算盒子大小的公式： 盒子宽：width+左右boder+左右padding cssday04 行高单位 em = font-size 使用em ，100%，不加单位 指的是当前标签设置的字体大小。 1.0在设置行高的时候，如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素。 2.0在设置行