<!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. ReportMachine打印条形码的问题

    ReportMachine打印条形码的问题 最近用RM报表来打印条形码,调试过程非常顺利,扫描枪识别也很正常,唯独斑马打印机的走纸不准确是个问题,正好客户不想用这种纸型,并定制了新纸型,心想等新纸型到 ...

  2. 11-numpy笔记-莫烦基础操作1

    代码 import numpy as np array = np.array([[1,2,5],[3,4,6]]) print('-1-') print('数组维度', array.ndim) pri ...

  3. Mysql 视图&事务&触发器

    参考资料 一.视图 视图的含义: 视图是一个虚拟表,是从数据库中一个或者多个表中导出来的表. 1.创建视图 #语法:CREATE VIEW 视图名称 AS SQL语句 create view teac ...

  4. bower安装教程

    进入node.js官网下载相应操作系统的安装文件http://www.nodejs.org/download/ ,windows环境下载msi文件即可 打开下载的文件,一直点击下一步,完成安装 安装完 ...

  5. 爬虫解析库：XPath

    XPath     XPath,全称 XML Path Language,即 XML 路径语言,它是一门在 XML 文档中查找信息的语言.最初是用来搜寻 XML 文档的,但同样适用于 HTML 文档的 ...

  6. luogu P5606 小 K 与毕业旅行 - 构造 - 多项式

    题目传送门 传送门 先考虑 $a_i > 0$ 的情况.考虑构造这样一个顺序:$a_i$ 要么和后面的数的乘积都大于 $w$ 要么都小于等于 $w$. 这个构造可以这样做: vector< ...

  7. ORACLE 10g 升级 11g问题汇总（转载文）

    按照计划开始了生产库的升级,环境基于linux 64位. uname: Linux 2.6.18-308.el5 #1 SMP Fri Jan 27 17:17:51 EST 2012 x86_64 ...

  8. Spring Cloud Feign高级应用

    1.使用feign进行服务间的调用 spring boot2X整合nacos一使用Feign实现服务调用 2.开启gzip压缩 Feign支持对请求与响应的压缩,以提高通信效率,需要在服务消费者配置文 ...

  9. javascript碰撞检测的方法

    javascript碰撞检测的方法需要把要检测碰撞的精灵都放到数组里array push 然后循环遍历数组里的精灵检测碰撞 ps:不放到数组里没办法循环遍历检测每个精灵核心代码如下 <pre&g ...

  10. Mybatis设置主键自增

    <insert id="insertArea" useGeneratedKeys="true" keyProperty="areaId" ...