Css 踩坑集锦

//  No :1

优先级：id>class>标签

引用样式表的优先级：行内>内嵌>外部引用

行内id>嵌入id>外部id>

 

并集选择器用 ，

后代选择器用 " "【空格】

子选择器用 ">" 只管子集标签

交集选择器 不加符号

选择器作用：选取页面元素

【页面对象】【标签】页面元素：页面的html

 

[class] 全部class类选择 [class^='s'] 类名第一个字符有s的

class$='s' 最后一个字符是s

class*='s' 字符中有s的

 

文本

font：样式 大小 字体； font：normal 12xp 宋体；

text-align:center; 文字居中 line-height:50px; 行高50 letter-spacing:20px; 字间距 vertical-align:middle;

text-decoration:underline;添加下划线

 

a{text-decoration:underline;}

a:link标签正常的样式 a:hover鼠标滑过的样式 a:active鼠标点击时的样式 a:visited访问过的样式

ul li:hover i{color:red}

不仅是a标签可以用伪类

 

鼠标状态 cursor： pointer 网上找很多样式

 

背景

background-color / image / repea（重复） / position 10px（距离左） 10px（距离上）/size（h5）

background：url（）10(向右移动10) 10(向下移动10) no-repeat； 10 10 类似margin

 

background-color：rgba（0，0，0，.5） r（a是透明）gba .5是透明度 0-1透明

颜色 1：单词 2：#六位十六位进制 3：rgb 4：rgba

 

 

//   No  :2

position几个属性的作用：

1.static:默认位置

 

2.relative:相对的

配合top,left,right,bottom来使用

a.相对盒子原本的位置发生偏移

b.如果没有trbl会以标准流显示

c.在原来的位置占了位置

 

3.absolute:绝对的

配合 trbl使用

a.如果没有父元素，那么trbl是相对body来定位

b.如果有父元素，但父元素没有定位，那么还是相对body定位

c.如果有父元素且父元素有定位，那以父元素为基础

d.绝对定位之后的元素在页面不会占据位置

 

子绝父相

 

如果一个小盒子在大盒子中要定位且水平居中

1.先left：50%,（将小盒子在大盒子平移大盒子的一半）

2.再设置margin-left（小盒子宽度的一半），一定是负数

 

4.fixed：固定

配合trbl使用

a.不管页面有多大，trbl永远是相对于浏览器的边框来的

 

// No  :3

width：100% 铺满整个宽度

 

要用position：absolute 要设置父级div的 relative

 

height：10； line-height:10 水平居中

 

[type="text"] { 选择input text 增加样式

}

 

overflow：hidden 溢出隐藏的作用 例如照片div设置宽高 图片还还是太大就可以用

 

等分块 用百分比

div .u0 li{width:30%;height:200px; float:left;border: 1px solid black;}

div .u0 li img{width:100%;overflow: hidden }

 

ul li里嵌套ul li 可能宽度嵌套的li宽度超过父级li变宽 要将嵌套的li display：block

 

 

多小的模块 注意位置 都用div 包起来 以免浮动

 

 

li 横排显示 display：inline-block 或 float：left；

不指定li宽高的话，用display:inline比较好!

实际问题实际应用。面对实际问题的时候哪个好用用哪个

 

！！主要还是用float：left；

 

 

 

float 脱离文档流

absolute 脱离文档流

 

定位 z-index 层叠数

 

 

运用 伪类 someclass：hover .other {} .other是 someclass的子元素 参考一号店.ban_hover