<!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. 201871010112-梁丽珍《面向对象程序设计（java）》第十周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. 201871010108-高文利《面向对象程序设计（java）》第十六周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ht ...

  3. day16_7.18 常用模块

    一.collections collections模块中提供了除了dict,list,str等数据类型之外的其他数据类型:Counter.deque.defaultdict.namedtuple和Or ...

  4. Jmeter压力并发测试

    一.http://jmeter.apache.org/ 二.点击Download Releases选择版本下载 三.下载解压: 将解压后的文档存盘-下载logkit-2.0.jar(汉化包)放到jme ...

  5. MySQL实战45讲学习笔记：第二十八讲

    一.读写分离架构 在上一篇文章中,我和你介绍了一主多从的结构以及切换流程.今天我们就继续聊聊一主多从架构的应用场景:读写分离,以及怎么处理主备延迟导致的读写分离问题. 我们在上一篇文章中提到的一主多从 ...

  6. [LeetCode] 763. Partition Labels 分割标签

    A string S of lowercase letters is given. We want to partition this string into as many parts as pos ...

  7. 应用层协议：HTTP

    1. HTTP定义 HyperText Transfer Protocol,超文本传输协议,是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络 ...

  8. 基于canvas自动化运维工具

    首先我们的工具绝对顶尖,绝对绚丽.如果有需要代码,可以加我微信索取.18500591275 前几天有个客户找到我,问我这个能不能做,我看自己也干了10年前端了,实在做不了,后来人家说给你10000你能 ...

  9. LeetCode 167：两数之和 II - 输入有序数组 Two Sum II - Input array is sorted

    公众号: 爱写bug(ID:icodebugs) 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index ...

  10. python做一个简易图片下载工具

    代码有点乱,先这样 # -*- coding:utf-8 -*- #__author__ :kusy #__content__:文件说明 #__date__:2018/11/01 11:01 impo ...