mark下,自己在学习CSS过程的点滴细节心得体会:
1、不要用通配符*
当多个CSS属性层叠在一起时会产生意想不到的隐患问题。
比如:不要写*{margin: 0;padding: 0;},而是body, h1, h2...{margin: 0;padding: 0;}
2、不要轻易用float
会破坏文档流结构,用了float一定要记得清除浮动效果,给父容器设置overflow: hidden。
3、并不是所有属性都可以transition
比如:不能结合display: none/block实现显示、隐藏的过渡效果,可以考虑用max-height=0/**px、opacity: 0/1等方式控制内容的显示、隐藏。
4、写完HTML要上Markup Validation Service检验下是否有语法错误
5、写完CSS要上W3C CSS 验证服务 检验下是否有语法错误
6、CSS的加载顺序是由上到下
通用类CSS要先写,写到上面。个性化CSS写到下面,比如:@media only screen and (max-width: 768px),如果2个CSS顺序不对,则会导致通用性的CSS效果就会“冲”掉个性化CSS效果。
7、div无宽度时,margin:0 auto是无效的
比如:一个div默认宽度是100%父容器,所以很多时候无需显性设置,但一旦设置为绝对定位,此div里还无内容,则宽度收缩为0,此时需要设置为显性宽度,比如:width: 100%。
8、text-indent要写到h,p里,而不是body里
假设div里有p、h、img元素,而此时把text-indent写到body里,这样p、h就会继承此属性,那么存在一个问题就是也会对img这类替换元素生效,造成img排列窜位置。
9、background-image
(1)多个背景图片:全屏大图要写到后面,相当于在Z轴的最下面,否则会遮挡其他图片。
(2)设置background-position: 第二个值(Y轴)为center或bottom:
a. background-image: linear-gradient(to bottom, #FE8F00, #FDE907, #FFC74E)之类的,就需要设置html, body{height: 100%;},也就是有个父容器参考高度。
b. 当背景图片的宽或高大于容器时,会占用padding空间,此时background-origin: content-box无效。
10、复合属性声明要写到前面,否则就会覆盖子属性声明。
比如: 下面这个例子,background属于复合属性,其实包括background-color,所以就会覆盖上面的background-color,导致background-color无效。
background-color: white;
background: url(images/63301.jpg) no-repeat center -60px;
可以这么写:
方法1:复合属性写在前面,子属性写在后面。
background: url(images/63301.jpg) no-repeat center -60px;
background-color: white;
方法2:分别写各子属性,互不影响,就无所谓前后顺序了。
background-color: white;
background-image: url(images/63301.jpg);
background-repeat: no-repeat;
background-position: center -60px;
11、box-shadow,四周要留出一圈margin,而且要大于阴影的模糊半径,否则就会导致阴影效果显示不全
从下面示意图能看到,上图的下侧、右侧有margin留白,所以只有右下角的阴影效果正常显示全了,而由于左侧、上侧是紧贴着父级容器,导致阴影效果被“削”掉一部分,显示成了一个“尖角阴影”效果。
12、padding没有auto。
13、如果脱离文档流的元素A(如:绝对定位)遮挡了某正常元素B,则设置B的z-index要大于A的z-index并且B的position: relative。
14、一个空div,一个空p,都设置为行内块状元素时,出现了水平不对齐问题。原因是p有上下默认margin,div是和p基线对齐,p基线是margin底。
(1)同一行的行内元素对齐方式默认是底部对齐,即vertical-align:baseline。
(2)对于内容为空的inline-block元素而言,该元素的基线就是它的margin底边缘。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{margin: 0;}
div{
width: 100px; height: 100px;background-color: red;
display: inline-block;
}
p{
width: 100px; height: 100px;background-color: blue;
display: inline-block;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>