<!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. index.jsp

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  2. 201777010217-金云馨《面向对象程序设计（java）》第十六周学习总结

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

  3. django学习-管理界面、视图

    django管理界面 设计背景 为你的员工或客户生成一个用户添加,修改和删除内容的后台是一项缺乏创造性和乏味的工作.因此,django全自动地根据模型创建后台界面. django产生于一个公众页面和内 ...

  4. HDU1213：How Many Tables（并查集入门）

    -----------刷点水题练习java------------- 题意:给定N点,M边的无向图,问有多少个连通块. 思路:可以搜索;  可以并查集.这里用并查集练习java的数组使用,ans=N, ...

  5. django settings实现原理及自定义项目settings配置

    基于django 中的settings实现原理,实现自己项目配置文件的可插拔式设计 ##首先说一下django中settings.py中的实现原理 ''' 应该明确一点,django暴露给用户一个自定 ...

  6. 团队冲刺---Four

    今天的计划: 研究css模板. 昨天做了什么: 寻找css模板,研究界面布局. 遇到的问题: css模板,代码看不太懂,好多标签都不会用.

  7. 使用CSS来渲染HTML的表单元素

    效果: 实现: <!DOCTYPE html> <html> <head> <title>使用CSS来渲染HTML的表单元素</title> ...

  8. mysql悲观锁的实现

    https://www.cnblogs.com/laoyeye/p/8228467.html 参考原文链接, //0.开始事务 begin;/begin work;/start transaction ...

  9. 【2019.7.25 NOIP模拟赛 T1】变换（change）（思维+大分类讨论）

    几个性质 我们通过推式子可以发现: \[B⇒AC⇒AAB⇒AAAC⇒C\] \[C⇒AB⇒AAC⇒AAAB⇒B\] 也就是说: 性质一: \(B,C\)可以相互转换. 则我们再次推式子可以发现: \[ ...

  10. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...