<!-- CSS是用于描述页面展示的语言
字体、颜色、大小、间距，将内容分为多列
或者简单的动画及其他的装饰效果
决定了长啥样
html房子的骨架
css负责装修
怎么装修一个房子呢？
首先就是布局
卧室，客厅，厨房，厕所分别在哪，划分好位置是大前提
用<div></div>标签去分块
去掉css代码后的页面样式？
查看源代码
为网页添加样式 -->
/* 选择器：选中元素
1 选中对应id值的元素，这个id的值是唯一的值
2 元素选择器，只要是该元素全部选中
3 类选择器 使用范围最广的 敲级灵活 可同时使用多个类
*/
/* css代码书写位置 样式
1 内部样式表//样式比较少 200行以内 少一个文件 反而是提高反应速度
放在style元素里 最好在head里面 这样就可以提前加载出来，也可以放在后面，但是逐渐加载出来。。就emmm
2 内联样式表 //。。。。最好不用，js里面还有。。用处吧，现在是实在没用
直接写在body的每个标签里
3 外部样式表
写在独立的css文件中
1 解决多页面样式重复的问题//尽量避免重复代码 相同代码写一块，单独导入
2 有利于浏览器缓存，从而提高页面响应速度//重复打开就不用再读一遍
3 有利于代码分离（HTML和CSS）更容易维护和阅读 每次都单独修改
*/
<!-- 层叠
声明冲突，同一个样式，多次应用到同一个元素中
<a> color red 打开浏览器 覆盖掉了默认样式
直接在浏览器中加text-decoration：none
那你看它叫冲突，是不是就是不好，就要避免呢？
其实不是啊，就是要好好利用这个冲突
层叠 解决声明冲突的过程，这个过程是浏览器自动解决的（权重计算）
（就像绝地求生，最后只能有一个样式胜出，最后呈现给我们）
1 比较重要性
重要性从高到低
1作者样式表中的！important样式 就是在属性后加入！important
作者样式表：开发者书写的样式 (比较少使用，因为泰无敌了，除非万不得已)
2作者样式表中的普通样式
3浏览器默认样式表
如果重要性比较好了就不用进行后面的了，要是重要性一样就继续往下走
2 比较特殊性
总体规则 看选择器
选择器选中的范围越窄越特殊
具体规则 通过选择器计算出一个四位数（XXXX）进行比较
1 千位 如果是内联样式 记为1 否则记为0
2 百位 等于所有id选择器的数量
3 十位 等于选择器中所有类选择器，属性选择器，伪类选择器的数量
4 个位 等于选择器中所有元素选择器，伪元素选择器的数量
逢256进1
3 比较源次序
代码书写靠后的胜出
-->
<!-- 继承
子元素会继承父元素的某些CSS属性
把这个页面全部的文字一起改变
在 div里加class="container"
li继承ulul继承div
只有某些会属性才能继承
通常，跟文字内容相关的属性都能被继承 font-啥啥啥的 -->
<!-- 盒模型！！！
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）才能进行布局
盒子类型：
1 行盒 display等于inline的元素
2 块盒 display等于block的元素
行盒在页面中不换行，块盒独占一行
display默认类型为inline
可以自己改
浏览器默认样式表中设置的块盒就有：容器元素（div。。）h1-h6 p
行盒 span a imag video audio 通常是一些文本元素
盒子的组成部分
从内到外
1 内容 content 装的内容 文字啥啥啥的
width height 设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
2 填充 padding 盒子和包裹中的空隙 就是泡沫啊啥的
盒子边框到盒子内容的距离 尺寸
padding-left padding-right padding-top padding-bottom
设置背景颜色
直接浏览器里面改 padding-left
padding 简写属性
padding 上右下左 50 30 50 30 简写属性，最后还是会转换为四个
也有多种写法
填充区+内容区=填充盒 padding-box
3 边框 border 盒子本身
边框=边框样式+边框宽度+边框颜色
border-style
border-width
border-color
都是缩写属性 可分为四个
边框+填充区+内容区=边框盒子 border-box
4 外边距 margin 盒子与盒子之间的距离 布局
margin-top margin-left margin-right margin-bottom
-->
原文：https://www.cnblogs.com/zqy-blogs/p/11964238.html