css

css

1. 层叠样式表（Cascading Style Sheets，简写CSS），是一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言
   HTML是内容的展示，CSS是内容的装饰

CSS的三种引用方式

2. 行内样式:在开始标签的内部可以设置一个叫做style的属性，属性的双引号内存放该元素代码的CSS样式
3. 内部样式:在head标签中间新建一个style标签，该标签内部存放的就是网页文件中的CSS代码
4. CSS中的代码注释格式采用的是：/* 注释文字 */
5. 外部样式:在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。rel是relationship的缩写（指定当前文档与被链接文档的关系）rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件
6. src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，在浏览器下载、编译、执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到

标签选择器

8. 标签选择器：h1-h6，div，span，p，ul，li，ol，dl，a，img等等

类选择器

9. 类选择器：在标签中添加一个属性，class=“类名”，理解为：取的别名

多类名选择器

10. 具有多个class类名

margin

11. 四个参数：上 右 下 左
12. 两个参数：上下 左右
13. 一个参数：四个方向距离一致
14. 三个参数:上 左右 下
15. 清除默认边距 :margin:0;
16. 水平居中:margin:100px auto 0px;
17. 背景颜色 颜色值三种写法
    1.颜色单词
    2.16进制值 ,三位或六位。
    3.rgb(0-255,0-255,0-255)；

id选择器

18. id选择器：在标签中添加一个属性，id=“id名”，具有唯一性，体现在操作js的时候

id选择器和类选择器区别

19. ① W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
    ② 类选择器，好比人的名字，是可以多次重复使用的，比如张伟、王伟、李伟、李娜。
    ③ id选择器，好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
    ④ 为避免代码出现冲突，大骨架用id命名，里面的小结构用class。

复合选择器

20. ①交集选择器 有两个选择器构成,一个是标签选择器,一个是class 两个标签之间用**.链接
    ②并集选择器 并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的
    任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
    ③后代选择器 后代元素选择器是一个空格，空格前后各有一个选择器
    作用是：找到空格前的选择器所选中的元素的后代元素中符合空格后选择器的要求的元素
    ④子代元素选择器 子代元素选择器是一个大于号**，大于号前后各有一个选择器
    作用是：找到大于号的选择器所选中的元素的子元素中大于号后选择器的要求的元素
    ⑤兄弟元素选择器是一个**_{号**，作用是：找到}号前的选择器所选中的元素紧跟其后所有符合~号后的选择器选中的元素
    ⑥相邻元素选择器是一个**+号**，作用是：找到加号前的选择器所选中的元素紧跟其后第一个符合+号后选择器选中的元素

权重

21. ①最高:!important 完全覆盖其他样式
    ②行内样式 权重1000
    ③id选择器 权重100
    ④类名选择器.属性选择器,伪类选择器,单个权重10
    ⑤标签,伪元素选择器 单个权重10
    ⑥通配符,关系(相邻(+),兄弟(~),子代(>),后代(" ")),否定伪类, 权重0

CSS命名规范

1. ① 必须以字母开头命名选择器，这样可保证在所有浏览器下都能兼容；
      ② 不允许单个字母的类选择器出现；
      ③ 不允许命名带有广告等英文的单词，例如ad、adv、adver、advertising，以防止该模块被浏览器当成垃圾广告过滤掉；
      ④ 一律小写；
      ⑤ 尽量用英文；
      ⑥ 不加中杠和下划线；
      ⑦ 尽量不缩写，除非一看就明白的单词。
      PS：PPT中有相关文件。
   

2. 这是css的注释语法
   快捷键: Ctrl+/ 注释一行 Ctrl+shift+/ 注释多行

盒模型

3. 浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型

标准盒模型

4. 块级元素的width和height值，width,height定义了元素的内容的宽\高,从width和height的左上角原点开始排列内容

border(边框)

5. border-width:边框宽度
6. border-color:颜色
7. ①颜色的单词；
   ②rgb(0-255,0-255,0-255)；
   ③十六进制数，三位或六位
   ④transparent(使用父元素的颜色)
8. border-style:种类;默认是none 就是没有边框 /*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */
9. 复合写法 broder:宽度 种类 颜色;
10. 边框可以单独向某一方向设置

padding(内边距)

11. 作用是在元素的内容区与边框线之间加一个内部间距,用来隔开元素内容和边框线, 使得元素内容更加突出明显, 默认情况下, padding区域的颜色和内容区的颜色保持一致
    padding也可以单独设置四个方向不同的值, 具体的概念与border相似
12. 块元素在网页内容中实际占据空间的大小是:
    实际占据宽度=width+左padding+右padding+左border+右border
    实际占据高度=height+上padding+下padding+上border+下border

内边距

13. margin:10px;
    /* 元素的上右下左四个外边距的值都是10px*/
    margin:10px 20px;
    /* 元素的上下两个外边距的值都是10px , 左右两个都是20px*/
    margin:10px 20px 30px;
    /* 元素的上外边距的值是10px , 左右两个都是20px, 下外边距是30px*/
    margin:10px 20px 30px 40px;
    /* 元素的上外边距的值是10px , 右是20px, 下外边距是30px,左外边距是40px*/
    内边距的简写规则与外边距相同

标准与怪异盒模型差异

14. 标准盒模型：
    实际宽尺寸=width+左padding+右padding+左border+右border
    内容区宽尺寸=width
    怪异盒模型：
    实际宽尺寸=width
    内容区宽尺寸=width-左border-右border-左padding-右padding
    标准盒模型：
    实际高尺寸=height+上padding+下padding+上border+下border
    内容区高尺寸=height
    怪异盒模型：
    实际高尺寸=height
    内容区高尺寸=height-上padding-下padding-上border-下border

父子元素和兄弟元素外边距合并

15. 父子解决方法:给父级加一个边框或是padding
16. 兄弟是外边距谁大听谁的