**CSS:全称层叠样式表(Cascading Style sheets)
**样式表组成:
1.由一条条规则组成
2.规则由选择器+声明块组成
3.声明块由一条条声明组成
4.声明由属性+属性值组成的键值对组成
**浏览器读取选择器渲染规则:浏览器读取选择器的顺序是从右往左渲染的
1.display属性规定元素应该生成的框的类型
inline属性:将元素变成内联元素显示
block属性:将内联元素变成块元素显示,独占一行;
inline-block属性:将内联元素变成行内块元素;
none属性:隐藏元素,且不占有页面空间
2.visibility:hidden属性隐藏元素,且占有页面空间
3.line-height:设置和块元素高度相等可以使内容垂直居中显示
4.overflow:处理子元素内容大于父元素时的行为
visible:默认值,不作处理,内容不会被修剪，会呈现在元素框之外;
hidden:将溢出的部分修剪掉,修剪掉的部分不显示;
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容,根据需求添加滚动条,需要哪个方向滚动添加哪个方向
5.内联元素设置宽高无效
6.float: 特点:
浮动元素会脱离文档流;
浮动元素不会超过上面没有浮动的块元素(IE6中浮动元素也不会超过内联元素);
宽度不够时,浮动元素不会超过他上面的兄弟元素,最多一遍齐;
浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围;
内联元素浮动脱离文档流,设置宽高有效
父元素不设置宽高,使子元素自动填充父元素时,子元素在父元素中设置浮动,造成高度塌陷问题:
在IE6以上能开启bfc(Block Formatting Context)即可解决
方法1:给父元素添加voerflow:hidden,是副作用最小的解决方法;
在IE6及以下不支持bfc,但是有默认属性HasLayout,开启该属性也能解决高度塌陷,IE6中给元素设置宽度也可开启HasLayout
方法2:给父元素添加zoom:1;(火狐浏览器不支持该属性);
方法三:同时给父元素添加overflow:hidden和zoom:1,即可兼容所有浏览器;
clear:清除兄弟元素浮动对自身造成的影响
方法四:添加一个兄弟块元素,并添加clear:both;(w3c推荐使用方式)
方法四五:解决浮动高度塌陷和垂直外边距重叠最佳方案:使用
.clearfix:before,
.clearfix:after{
/*添加内容,构成兄弟元素*/
content:"";
/*变成块元素,撑起父元素高度,table是一个块元素,table可以隔离父子元素,阻止垂直外边距传递*/
display:table;
/*清除浮动*/
clear:both;
}
由于在IE6及以下不支持:after伪类,需要再使用zoom:1;
.clearfix{
/*在IE6/7中可以开启hasLayout,缩放1倍,等于不变*/
zoom:1;
}
7.position:reletive,相对定位特点:
只开启相对定位,不设置偏移量,元素位置不会发生变化;
相对于自身所在位置进行定位,必须设置left和top才能有效;
不会使元素脱离文档流;
提升元素层次;
8.position:absolute,绝对定位特点:
只开启绝对定位,不设置偏移量,元素位置不会发生变化;
相对于离的最近的开启了定位的祖先元素进行定位,如果父元素都没有开启定位,就相对于浏览器窗口进行绝对定位(一般设置子元素的绝对定位,都会打开父元素的相对定位);
会使元素脱离文档流;
提升元素层级;
会改变元素性质,使内联元素变成块元素,宽高会被内容撑开;
9.position:fixed:固定定位特点
和绝对定位特点相同,但是固定定位永远只相对于浏览器窗口固定定位,并且滚动页面时固定定位元素不会随页面滚动,一直固定在偏移量窗口位置不动.
10.z-index:提升元素层级特点
没有开启定位的元素设置z-index属性无效;
父元素和子元素同时设置z-index,无论父元素的层级比子元素高多少,都不会覆盖子元素;
11.opacity:设置元素透明度,0-1之间的值,0完全透明,1完全不透明
IE8(除IE6)及以下不支持opacity,需要使用filter:alpha(opacity=透明度)代替,透明度值0-100,但是其他浏览器不支持filter:alpha(opacity=透明度),同时设置opacity和filter兼容所有浏览器.
12.background-image:url(图片相对路径);
如果图片大于元素,则会显示图片左上角部分图片,如果图片小于元素,会循环显示
13.background-repeat:控制图片循环和循环方向如:repeat-y垂直方向循环;
14.background-position:设置背景图片定位,可以是left,right,top,bottom,center中的两个值,也可以设置两个方向的像素值,一般使用负值对整合背景图片移动定位(整合图片一般用在固定宽高元素的背景图片中)
15.background-attachment:设置背景图片是否随屏幕滚动,
默认值scroll:随屏幕滚动,
fixed:固定不动,一般都是给body设置该属性,其他元素不设置该属性
16:background:简写属性,可以同时设定背景相关的所有属性,无顺序
17.table表格属性:
border-spacing: 5px;设置单元格边框间隔距离
border-collapse: collapse;合并单元格边框
td属性
rowspan:2垂直合并单元格;
clospan:2水平合并单元格;
18.IE6中对png24的支持不是很好,需要使用外部js文件来修复该问题;
也可以使用ps工具修改png24图片为png8,但是png8图片清晰度不好;
19.CSS-Hack:条件,处理浏览器版本
注释Hack:
<--[if lt IE 8]>
需要在小于IE8中生效的代码
<![endif ]-->
属相Hack:
_样式属性:_ 只有在IE6中能够识别
*样式属性:* 只有在IE7中能够识别
选择器Hack:* 选择器{
需要生效的样式
}
20.谷歌浏览器中字体默认为16px,最小只支持到12px,1-11px都显示为12px,当为负值时显示为16px;
21,resize:none 设置文本域输入框(textarea)不能拖动改变大小
22.cursor:设置光标显示样式;
23.IE6的双倍外边距问题:
当为一个向左浮动的元素设置左外边距或者为一个向右浮动元素设置右外边距时,设置的外边距会显示为设置值的2倍;
解决办法:设置display:inline(对一个浮动元素设置display:inline变成行内元素没有任何意义,但是可以解决IE6的双倍外边距问题)
24.BFC规则
(1).内部的Box在垂直方向,一个接一个排列
(2).BFC的区域不会与float的Box重叠(因此可以实现两列布局)
(3).内部的Box垂直方向上的距离由margin决定. 属于同一个BFC的两个相邻Box的margin会重叠(解决margin重叠,破坏其中一个条件即可,一般给其中一个包括一层并添加overflow: hidden开启新的BFC)
(4).计算BFC的高度时,浮动元素也参与计算(清除浮动 hasLayout)
(5).BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
25.能开启BFC的情况
根元素;
float属性不为none;
position为absolute或fixed;
overflow不为visible;
display为inline-block,table-cell,table-caption,flex,inline-flex;
26.选择器扩展
>:子元素选择器
~: 通用兄弟选择器(必须跟在第一个选择器后面,不一定紧跟,有共同父级)
+：相邻选择器
属性选择器: 选择器[属性名]
选择器[属性名='属性值']
选择器[属性名~='属性值开头'] (属性值是一个以空格分割的属性值列表)
选择器[属性名|='val或以val-开头']
选择器[属性名^="val"] (以val开头的属性值)
选择器[属性名$="val"] (以val结尾的属性值)
选择器[属性名*="val"] (匹配到val的属性值)
链接伪类::target{ },可以代表一个元素,只能代表指向一个id的uri
27:伪元素选择器
::after/ ::before/ ::first-letter/ ::first-line/selection
28.声明优先级:
重要声明(!important)>内联样式>id选择器>类选择器
29.css单位
1.px：绝对单位，页面按精确像素展示
2.em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3.rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
30.div设置高度为百分比时,字体垂直居中:
display:flex;
justify-content:center;
align-items:center;
