一些重温CSS需要注意的小细节

<!-- 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

-->