css如何让两个div上下排列_【CSS】避坑总结

最新推荐文章于 2024-05-30 11:43:16 发布

weixin_39630106

最新推荐文章于 2024-05-30 11:43:16 发布

阅读量5k

点赞数 4

文章标签： css如何让两个div上下排列 css显示内容越来越模糊

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>

15、a不能嵌套a，h和p也是一样，所以用ul+li来做中转容器

16、inline-block元素设置margin: 0 auto无效，行内元素的水平对齐方式需要通过其父容器的text-align来控制。