css样式注意点

1、<a>标签内可以放任意标签,除了它自己。

2、<p>标签内不能包含任何块级标签,比如<div>、<p>。<div>内可以放<p>标签。

3、<div>是块级标签,<span>是行内标签。块级标签独占一行,行内标签只占它本身。块元素可以包含内联标签。

4.、class属性和id属性类似,只不过class属性可以重复。类选择器.class属性值{},id选择器#id属性值{}。class可以同时为一个元素设置多个class属性值,多个属性值之间使用空格隔开。

5、选择器可以分组,语法:选择器1,选择器2,选择器n{}

6、通配选择器语法:*{}

7、复合选择器(交集选择器),作用:可以同时满足多个选择器的元素。语法:选择器1选择器2选择器n{}

对于id选择器来说,不建议使用复合选择器。

8、选择器的优先级:内联样式(1000)>id选择器(100)>类选择器和伪类选择器(10)>标签选择器(1)>通配选择器(0)>继承的样式

继承的样式没有优先级。内联样式不推荐使用。

当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器的优先级计算不会超过它的最大的数量级。

如果选择器的优先器一样,则使用靠后的样式。

并级选择器的优先级是单独计算,比如:div,p,#p1,.hello{},这几个选择器优先级不会相加。

在样式后加了!important,优先级会大于内联样式。但不推荐使用,不方便后期维护。

9、padding会影响元素的大小。

10、垂直外边距的重叠:在网页中相邻的垂直方向的外边距会发生外边距的重叠,所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素。

11、内联元素不能设置宽和高,比如span。设置了没有效果。但是脱离文档流(使用float)之后会变成块元素,就可以设置宽和高。

12、解决高度塌陷方法一:在选择器里用overflow开启隐藏属性BFC(Block Formatting Context),适合大部分浏览器,但不支持IE6。overflow可以设置为hidden/auto,hasLayout是IE6里的隐藏属性,用zoom开启。zoom这个样式只在IE浏览器中支持。

解决高度塌陷方法二:使用这种方式虽然可以解决问题,但是会在页面中添加多余的结构。

解决高度塌陷方法三:可以通过after的伪类向元素的最后添加一个空白的块元素,然后对其清除浮动。这样做和添加一个div的原理一样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是最推荐的方式。但在IE6中不支持伪类,所以在IE6中还需要使用hasLayout来处理。

13、文字默认在行高里垂直居中

14、相对定位(position:relative)不会改变元素的性质,块还是块,内联还是内联;相对定位会使元素提升一个层级;相对定位是相对于元素在文档流中原来的位置进行定位;相对元素不会脱离文档流。

15、开启绝对定位,会使元素脱离文档流;绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位),如果所有的的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位;绝对定位会使元素提升一个层级;绝对定位会改变元素的性质,内联元素变成块元素,块元素的宽度和高度默认都被内容撑开。

16、固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样,不同的是固定定位永远都是相对于浏览器窗口进行定位;固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动。

17、如果定位元素的层级是一样的,则下边的元素会盖住上边的。通过z-index属性可以用来设置元素的等级,层级越高,越优先显示。注:没有开启定位的元素不能使用z-index;父元素的层级再高,也不会盖住子元素。

18、opacity可以用来设置元素背景的透明度,opacity:0.5,0-1之间的值,0完全透明,1完全不透明,0.5半透明。

但是opacity属性在IE8及以下的浏览器中不支持,需要使用属性filter:alpha(opacity=透明度)代替,透明度是0-100之间的值,0完全透明,100是完全不透明,50半透明。

19、当背景图片的background-attachment设置为fixed时,背景图片的定位永远相对于浏览器的窗口。(不随窗口滚动的图片,一般都是设置给body,而不设置给其他元素)

20、在文本框或文本域中可以通过placeholder来指定提示文字(水印)

但是这个属性在IE8及以下的IE浏览器中不支持,如果使用IE8需要JS。

21、cursor可以用来设置鼠标指针的样式。cursor:pointer(小手的形状)

22、图片整合,又叫雪碧图(sprite),只适合于背景图

猜你喜欢

转载自blog.csdn.net/chenlim87/article/details/85882642
今日推荐