首页 > > 网页制作 > css >

写css注意的事项

2019-08-14 09:40:39来源：博客园阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: none;
        }
        .Parent{
            width: 400px;
            height: 400px;
            background: #dddddd;
            margin: auto;
        }
        .Children{
            width: 50px;
            height: 50px;
            background: saddlebrown;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="Parent">
        <div class="Children"></div>
        <div class="Children"></div>
    </div>
</body>
</html>

注意外边距折叠

与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。解决外边距折叠的方法有很多种，对于初学者来说最简单的就是所有元素只使用一个方向上的margin，比如上下的外边距我们统统使用margin-bottom。

使用flex进行布局
重置元素的CSS样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

　　以上简单粗暴，网络上已经有成熟的CSS代码库为我们解决浏览器不一致问题，例如normalize.css、minireset和ress，可以在项目中引用它们。

所有元素设置为Border-box

box-sizing属性有两个值：

content-box（默认） - 当我们设置一个元素的宽度或高度时，就是设置它的内容的大小。所有的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，于是这个元素将占用120像素（100+2*10）。
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，无论它的内边距和边框有多少。

将所有元素都设置为border-box，可以更轻松的改变元素的大小，而不必担心padding或者border值会将元素撑开变形或者换行显示。