css盒子模型：

摆内容，做布局的

优先级的介绍：

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式； 公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式（就是在标签里面加style属性）<！important；；注意点：!important空格后写在属性值的后面，分号的前面/！important不能提升继承的优先级。只要是继承"优先级最低"/实际开发中不建议使用！important。 只 选择器谁的范围越广，谁的优先级就越低！

权重叠加计算；

例如复合选择器中；哪个选择器使用的个数越多，谁的权力就越大 。但是要注意先数的顺序；一级；行内样式个数/二级；id选择器个数/三级；类选择器个数/四级标签选择器；每一级之间不存在进位。规则：先比较第一级数字，如果比较出来了，之后的统统不看；如果一级数字相同，此时再去比较第二级数字。个数一样指的通常都是0，所以此时需要往下一级继续重新数，只要数完有1以上的个数当前选择器等级最高，但要是复合选择器的数字都相同，表示优先级相同，这时候就开始比较层叠性（谁写在下面，谁说了算） 注意点：!important如果不是继承，则权重最高，天下第一!（工作当中慎用） 如果都是继承关系，继承里的首个直接继承关系生效。

谷歌调试工具：

技巧1：右键选中没生效的属性，如果右边css没有显示，要么就是没写，要么就是选择器写错了。；；如果css上一行代码出错，会导致下一行也无法生效！（经验）；；代码下面有红色波浪线报错表示有问题；；技巧2：光标离英文的符号很近，离中文的符合很远（经验）

盒子的概念：

页面中的每一个标签，都可看做是一个“盒子”通过盒子的视角更方便的进行布局；；浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子 盒子模型：css中规定每个盒子分别由：内容区域（content）/内边距区域（padding）出现在内容和盒子边缘之间/边框区域（border）设置边框线/外边距区域（margin）出现在两个盒子之间，出现在盒子的外面/构成，这就是盒子模型

内容的宽度和高度；作用：利用width和height属性默认设置是盒子内容区域的大小；；属性width/height，单位px

边框（border

）-连写形式 属性名border，属性值：单个取值的连写，取值之间以空格隔开；如border:10px （边距线粗细）solid（实线） red 顺序可以打乱； // 快捷键：bd+Tab ；；dashed(虚线)；；dotted（点线）；；这三个最常用；；；；单方向设置：只给盒子的某个方向单独设置边框，border-方位名词；；连写的取值。例如：border-位置：px solid red ；这样的方式;;;border是会撑大盒子的，如果不想盒子变大，就得设置宽高值的时候减去边框粗细的值，左右两边或者上下两边的值。 {上top，中center，下bottom}

显示的时候跟原图对比，有空格隔开时，可以把背景标签的font-size设置为0，再给内容单独设置font-size就可以避免空格。

小方法：

从外到内，先宽高背景色，取内容，调节内容的位置；控制文字细节。 布局顺序：从外往内，从上往下；每一个盒子的样式：宽高/

内边距（padding）

：跟width/border一样，增加了都会把盒子给撑大，但是不会盛放内部内容，所以添加的时候要注意。最多取四个值，取值顺序是 上/右/下/左。 如果只给到两个值，上对应下给相同的值，右对应左给相同的值。 ；； 三个值的话比方 上/右/下。因为没有左的值，所以给对面右取相同值，同顺序原理。

盒模型（自动内减法）：

给盒子设置属性box-sizing：border-box;即可；优点：浏览器会自动计算多余大小，自动再内容中减去。

清楚盒子默认边距方法：配合通配符功能；*{margin:0; padding:0;}适合学习阶段/；；以后工作中还是要选择需要清除边距的标签。通配符也可以配合使用自动内件法

小技巧

line-height：1;意识代表是默认行高的1倍；；再加上内间距低部到字体的像素距离

去掉列表的符号（圆点）：list-style:none；无序有序列表的符合都可以去除掉！