<!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值会将元素撑开变形或者换行显示。

  • 将图片作为背景

  • 更好的表格边框

有很多重复的边框，看起来很不好看。这里有一个快速的方法来删除所有的双倍边框：border-collapse: collapse

  • 更友好的注释

  • 短横线命名

当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。

  • 不要重复设置

大多数CSS属性的值都是从DOM树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。

只需将要设置的字体样式添加到<html>或<body>元素中，然后让它们自动向下继承。

  • 使用transform属性来创建动画

  • 保持选择器的低权重

ID (#id) > Class (.class) > Type (例如 header)

  • 不要使用!important

  • 使用AutoPrefixer达到更好的兼容性

写css注意的事项的更多相关文章

  1. 编写css相关注意事项以及小技巧

    一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...

  2. vue 使用Jade模板写html，stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

  3. 写css时要注意数字的浮动方向

    写css时要注意数字的浮动方向  当数字位数增加时他的方向才是正确的 text-align:right;padding-right:29px;

  4. 写CSS的布局

    刚写页面的时候写CSS觉得一个选择器中的每个声明分别占一行看起来舒服些,但随着页面大了,写的东西多了,看起来就很乱了.所以每个声明连着写其实更加好些

  5. input标签写CSS时需要注意的几点（先收藏）

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  6. 辛星和您一起手写CSS气泡

    上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...

  7. 既然写CSS很容易，那为什么大家还是把CSS写的那么烂呢？

    在众成翻译上看到一篇不错的css文章,所以就给转过来. 在你开始阅读这篇文章之前,一定要做好心理准备.因为我写的 90% 都是在发牢骚,只有最后大概 10% 介绍 CSS 技巧之最佳实践.提前给你们打 ...

  8. js写css（）方法，记得加引号“ ”，除非是数字

    js写css()方法,记得加引号“ ”,除非是数字.如: $("#android").css({ "position": "absolute" ...

  9. 【转】【好文章】更愉快的写css

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

随机推荐

  1. C++和C的相互调用

    C++和C相互调用实际工程中C++和C代码相互调用是不可避免的C++编译器能够兼容C语言的编译方式C++编译器会优先使用C++编译的方式extern关键字能强制让C++编译器进行C方式的编译 exte ...

  2. IDEA写vue项目出现红色波浪线警告如何解决？？

    1.看图 2.希望对大家有帮助,只要修改了这个就可以,如有任何问题都可以留言,谢谢大家 2019-09-1923:54:11 作者:何秀好

  3. Node.js到底是做什么的？这是我看到最好的解释了

    作者:贾厂长链接:https://www.zhihu.com/question/33578075/answer/56951771来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. HardFault_Handler的方法转载

    在硬汉平台看到一个比较好的帖子,关于如何定位HardFault_Handler,这里要记录下网址. http://www.armbbs.cn/forum.php?mod=viewthread& ...

  5. keil mdk+stm32的ac5和 ac6两个编译器下的字节对齐操作方法

    最近在使用ac6.9的编译器,编译速度是真的很快,使用stm32的hal库编译速度也比ac5的编译器快很多.本文试验stm32中字节对齐的代码测试,主要是结构体,因为结构体中实际项目中用到最多,同时在 ...

  6. JDOJ 1928: 排队买票

    JDOJ 1928: 排队买票 JDOJ传送门 Description 一场演唱会即将举行.现有n个歌迷排队买票,一个人买一张,而售票处规定,一个人每次最多只能买两张票.假设第i位歌迷买一张票需要时间 ...

  7. SSH使用ProxyCommand通过代理服务器远程连接其他服务器

    当前环境拓扑图:   用户管理海外服务器,通过公网SSH远程时,由于网络质量原因公网丢包严重,这就导致管理员在对海外云主机进行管理时体验较差,表现形式可能是由于公网丢包严重执行命令卡顿,或者SSH进程 ...

  8. 创建vector<T>容器

    vector<T> 容器是包含 T 类型元素的序列容器,和 array<T,N> 容器相似,不同的是 vector<T> 容器的大小可以自动增长,从而可以包含任意数 ...

  9. Python进阶-Ⅹ 正则表达式（RexEx）、re模块

    1.正则表达式(RexEx)常用知识 2.python中re模块的初步使用 1).findall方法 ret = re.findall('a', 'eva egon yuan') # 返回所有满足匹配 ...

  10. flutter环境配置window10

    第一步,配置git环境,这个作为前端的都是会的,如果你不会,去问度娘去 第二步,配置java的开发环境,这里建议下载jdk为1.8版本的,我最初使用的是如下图的jdk版本,后面和flutter版本不一 ...