CSS知识点真理归纳（入门友好）

一、基础认识

1. CSS的引入：

• 内嵌式，写在style标签里
• 外联式，写在.css文件里，需要通过link连接在网页中引入
• 行内式，写在标签style属性里

2. 优先级：行内>内嵌>外联

二、基础选择器

1、标签选择器

• 结构：标签名{css属性名:属性值;}

2、类选择器

• 结构：.类名{css属性名:属性值;}

• 作用：通过类名找到所有带这个类名的标签

• 注意点：

  • 所有的标签上都有class属性，class属性的属性值为类名
  • 一个标签可以有多个类名，类名之间用空格隔开
  • 类名可以重复之用，一个类选择器可以同时选中多个标签

3、id选择器

• 结构：#id属性值{css属性名:属性值;}

• 作用：通过id属性值，找到页面中带有这个id属性值的标签,设置样式

• 注意点：

  • 所有标签都由id属性
  • id属性在一个页面中是唯一的，不能重复
  • 一个标签上只有一个id属性值
  • 一个id选择器只能选中一个标签

id选择器可以和JS一起配合使用，id唯一就是怕js找不到制定的

4、通配符选择器

结构: {css属性名:属性值;}

作用：找到页面中所有的标签设置样式

注意点：很少用到，一般用来清除默认margin和padding

5、伪类选择器

三、文字样式字体大小

（一）字体和文本样式

1、字号font-size

• 属性名：font-size(默认字号为16px)

2、字体粗细font-weight

• 属性名：font-weight
• 取值：
  • 关键字：normal正常 bold加粗
  • 纯数字：100~900的整百数，400正常，700加粗（工作中常用这种数字写法）

3、文字倾斜font-style

html中的em和i标签也是设置倾斜的

• 属性名：font-style
• 取值：
  • 正常（默认值）：normal
  • 倾斜：italic

4、字体font-family

window默认微软雅黑，mac默认苹方

• 属性名：font-family
• 属性值:

5、font属性连写

这是一种简写的方式，上面的4个属性放这里

• 属性名：font

• 取值 ：

  font: style weight size family;

• 省略要求：只能省略前面两个，如果省略了就用默认值

• 注意点：如果需要同时设置单独和连写形式，要么吧单独的样式写在连写的下面，要么把单独的样式写在连写的里面

（二）文本缩进与对齐方式

1、文本缩进text-indent

• 属性名：text-indent

• 取值：

  • 数字+px
  • 数字+em（推荐使用，1em=当前标签的font-size的大小）

2、文本水平对齐方式text-align

• 属性名:text-align
• 取值：
  • left
  • center
  • right

实际上图片、span、input等都可以通过这个属性居中，内容对齐都用他

• 注意点：如果要让元素居中，让其父标签有text-align:center就行

3、文本修饰属性text-decoration

• 属性名: text-decoration
• 取值：
  • underline 下划线
  • line-through 删除线
  • overline 上划线
  • none 无装饰线
• 注意点：开发中会使用text-decoration:none;清除超链接a标签默认的下划线

（三)段落修饰

1、行高line-height

• 作用：用于控制一行的上下行间距
• 属性名：line-height
• 取值：
  • 数字+px
  • 倍数(当前font-size的倍数)
• 行高的概念：
• 行高与font连写：
  • 注意覆盖问题
  • font: style weight size/line-height family;

(四)拓展

1、颜色常见的取值

• 属性名：
  • 文字颜色color
  • 背景颜色background-color
• 属性值：
  • 关键字法 颜色名字 eg:red,green,blue,yellow…
  • rgb红黄绿蓝三原色法 eg:rgb(0,0,0)、rgb(255,255,255)…
  • （常用）rgba 红绿蓝三原则+a表示透明度法 eg ：rgba(255,255,255,0.5)…
  • （最常用）十六进制表示法 eg：#000000，#ff0000 简写：#000、#f00

2、标签居中 margin:0 auto；

• 用于让div\p\h水平居中 很常用！！！！！必须有宽度才能生效！！！
• 注意点：
  1. 如果让div\p\h（大盒子）水平居中，直接给当前的元素设置就行
  2. margin:0 auto 一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认沾满父元素的宽度

四、选择器进阶

1.1 后代选择器：空格

• 选择器写法：选择器1 选择器2 {CSS}
• 所有后代都选中，儿子孙子重孙子都选中

1.2 子代选择器： >

• 写法：选择器1>选择器2 {CSS}
• 只选中某一级

2.1并集选择器：,

• 写法：选择器1,选择器2 {CSS}
• 作用：选中多组变签

3.1交集选择器：紧挨着无空格

• 写法：选择器1选择器2 {CSS}
• 作用：选中既满足选择器1又满足选择器2

4.1hover伪类选择器: 选择器:hover{CSS}

• 作用：选中鼠标悬停在元素上，设置样式
• 选择器写法：选择器:hover{CSS}
• 注意点：
  • 是选中元素的某种状态

五、背景相关属性

1背景颜色 background-color

• 属性名：background-color
• 属性值(略，和上面文字颜色的表示方法一样)

2背景颜色 background-image

• 属性名：background-image
• 属性值：url(图片路径)

3背景平铺 background-repeat

• 属性名：background-repeat
• 属性值：
  • repeat：（默认）水平方向和垂直方向都平铺
  • no-repeat：不平铺
  • repeat-x: 沿着水平方向（X轴）平铺
  • repeat-y：沿着垂直方向（y轴）平铺
• 不平铺就是原本图片的大小，平铺就是重复很多分沾满div

4背景位置

• 属性名：background-position
• 属性值：水平方向 垂直方向
  • 方位名词：
    • 水平方向
      • left
      • center
      • right
    • 垂直方向
      • top
      • center
      • bottom
  • 数字+px:
    • 原点（0，0） 盒子左上角
    • x轴 水平向右
    • y轴 垂直向下
    • 操作：将图片左上角与坐标点重合就行

5背景属性连写

• 属性名：background
• 属性名（不分先后顺序）： color image repeat position
• 可以按需求省略
• 特殊情况：在PC端如果盒子和背景图片一样大，此时可以直接写background:url()

六、元素显示模式

1块级元素block

• 显示特点：独占一行、自动换行、可以设置宽高、默认宽度是父级宽度
• 常见：div p h form table

2行内元素inline

• 特点：一行可以显示多个、宽高由内容撑开、不可设置宽高
• 代表标签：a span b u i strong ins em del…

3行内块元素inline-block

• 特点：一行可以显示多个、可以设置宽高
• 代表标签：Input textarea button select…
• 特殊情况：img有行内块的特点，但是Chrome调试工具中显示inline

4元素显示模式转换

• 改变默认的显示特点
• 语法：
  • display:block 转换成块级 （用的多）
  • display:inline-block 装换成为行内块 （用的多）
  • display:inline 转换成为inline

拓展

1. 大的元素套小的
2. a里面可以嵌套任何元素除了a
3. 要想文字在中间，就设置text-align：center + line-height值为高

七、CSS特性

1、继承性

• 文字控制属性都能继承
• 可以通过调试工具看是不是能继承

2、层叠性

3、优先级

• 优先级：继承<通配符选择器<标签选择器< 类选择器< id选择器 <行内选择器<!important
• 权重叠加计算
  • 场景：复合选择器
  • 权重叠加计算公式：（行内样式个数，id选择器样式个数，类选择器样式个数，标签选择器样式个数）

八、盒子模型

1、盒子模型：

• content 内容区域

  • 作用：利用width和height属性默认盒子内容区域大小
  • 属性：width height
  • 属性值：数字+px

• padding 内边距区域

  • 属性：padding
  • 属性值：（简单记忆：缺了就看对面）
    • 一个值，四边都有值
    • 四个值 ，作为复合属性时 上 右 下 左 顺时针顺序取
    • 三个值时，上 左右 下
    • 两个值 ，上下 左右
  • 行内元素没上下padding

• border 边框区域

  • 属性名：border (复合属性)
  • 属性值：（部分先后顺序）连写 例如：border:10px solid red;
    • solid:实线
    • dashed 虚线
    • dotted 点线
  • 快捷键：bd+tab
  • border-方位名词（top bottom right left） 给某一边加边框

• margin 外边距区域

  • （同padding设置方式一样）
  • 行内元素没上下margin

2、CSS3盒子模型（自动内减）

• 手动内减
• 自动内减：给盒子设置 box-sizing:border-box; 即可

3、清除默认的内外边距

• h p ul …都有上下外边距
• *{margin:0;padding:0;}(京东写法)

ul去掉圆点：

ul{
    list-style:none;
}

4、外边距折叠现象-合并现象

• 场景：垂直的两个块级元素 上下的margin会合并
• 结果：最终两者的边距为margin的最大值
• 解决办法：避免就好 给其中一个盒子设置margin

5、外边距折叠现象-塌陷现象（坑爹）

• 场景：互相嵌套 的块级元素，子元素的的margin-top 会作用在父元素之上
• 结果：导致父级元素一起往下移动
• 解决办法：
  • 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
  • 给父元素设置overflow：hidden（最好！！！）
  • 转换成为行内块元素
  • 设置浮动

九、结构伪类选择器

• 作用：根据标签的关系找元素
• 优势：减少对类的依赖，保持代码简洁
• 场景：常用于查找某父级选择器中的子元素
• 选择器：
  • E:first-child{}
  • E:last-child{}
  • E:nth-child(n){}
  • E:nth-last-child(n){}
• 公式：（上面的n是可以用公式来表示的）
  • 偶数：2n、even
  • 奇数:2n+1、2n-1、odd
  • 找到前五个：-n+5
  • 找到从第五个往后：n+5

十、伪元素-----(默认是行内元素)

• 伪元素：一般页面中的非主体内容可以使用伪元素，比如搜索框后面的放大镜、箭头等装饰性、不重要的小图
• 区别：
  • 元素：HTML设置的标签
  • 伪元素：由CSS模拟出的标签效果
• 种类：
  • ::before 在父元素内容的最前添加一个伪元素
  • ::after 在父元素的最后添加一个伪元素
• 注意点：
  • 必须设置content属性才能生效
  • 伪元素默认是行内元素

十一、标准流

就是标签的默认排列规则，也叫文档流

十二、浮动 float

1. 作用:
   • 图文环绕
   • 网页布局
2. 特点：
   • 浮动元素的会脱离标准流的控制，不占用标准流的位置（脱标！！！）
   • 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
   • 浮动找浮动，后一个浮动元素会在前一个浮动元素的左右浮动
   • 默认顶对齐
   • 浮动后的元素具备行内块的特点（一行显示多个，可以设置宽高）

十三、清除浮动（5个方法）

• 含义：清除浮动带来的影响（子元素浮动了，不能撑开标准流的块级父元素）

• 原因：子元素浮动后脱标—不占位置

• 目的：需要父元素有高度，从而不影响父元素

• 解决方案：

  1. 给父元素加高度（不好，因为一般会变）

  2. 额外加标签：

     • 操作：在父元素内容的最后添加一个块级元素,常叫clearfix；类
     • 给添加的块级元素设置clear:both；清除左右两侧的浮动的影响。

  3. （常用）单伪元素清除法：(和上面的额外标签法原理一样)

     • 操作：用伪元素代替了额外标签

     给元素再赋予一个类.clearfix

     基本写法
     .clearfix::after{
         content:"";
         display:block;     必须是块级元素！！！
         clear:both;
     }
     补充写法
     .clearfix::after{
         content:"";
         display:block;
         clear:both;
         height:0;
         visibility: hidden;
     }
     

  4. 双伪元素清除法

     解决了外边距塌陷问题
     .clearfix::before,
     .clearfix::after{
         content:"";
         display:table;
     }
     /真正清除浮动的标签/
     .clearfix::after{
         clear:both;
     }
     

  5. 给父元素设置overflow:hidden（最简单）

十四、CSS定位

（一）常见网页布局方式

1. 标准流
   • 块级元素独占一行->垂直布局
   • 行内元素/行内块元素一行显示多个->水平布局
2. 浮动
   • 可以让原本垂直布局的块级元素变成水平布局
3. 定位
   • 可以让元素自由的放在网页的任何位置
   • 一般用于盒子之间的层叠情况

（二）定位的常见应用场景

1. 可以解决盒子与盒子之间的层叠问题
2. 可以让盒子始终固定在屏幕中的某个位置

（三）使用定位的步骤

1. 设置定位的方式
   • 属性名：position
   • 常见属性值：
     • static 静态定位
     • relative 相对定位
     • absolute 绝对定位
     • fixed 固定定位
2. 设置偏移值
   • 偏移值分为两个方向，水平和垂直各选一个就行
   • 选取的原则一般是就近原则（离哪个近用哪个）
     • left
     • right
     • top
     • bottom

（四）相对定位relative

1. 特点:
   • 占据原有的位置（没有脱标）
   • 仍然具有标签原有的显示模式
   • 改变的位置参考自己原来的位置
2. 应用场景：
   • 配合绝对定位组CP（子绝父相）
   • 用于小范围的移动

（五）绝对定位absolute

1. 代码：position:absolute;
2. 介绍：拼爹型，相对于非静态定位的父元素进行定位移动
3. 特点：
   • 需要配合方位属性实现移动
   • 默认相对于浏览器可视区域进行移动
   • 在页面中不占位置—》已经脱标
4. 应用场景：
   • 配合相对定位组CP（子绝父相）

（六）子绝父相介绍

1. 场景：让子元素相对于父元素进行移动
2. 含义：
   • 子元素：绝对定位
   • 父元素：相对定位
3. 子绝父相的好处：
   • 父元素相对定位，对网页的布局影响最小

（七）子绝父相的居中

1. 水平居中

   /*手动做法*/
   .son{
       position:absolute;
       left:50%;
       margin-left:负的盒子宽度的一半;
       width:;
       heigth:;
   }
   /*自动做法*/
   .son{
       position:absolute;
       transform:translateX(-50%);
       width:;
       heigth:;
   }
   

2. 居中

   /*手动做法*/
   .son{
       position:absolute;
       left:50%;
       top:50%;
       margin-left:负的盒子宽度的一半;
       margin-top:负的盒子高度的一半；
       width:;
       heigth:;
   }
   /*自动做法*/
   .son{
       position:absolute;
       transform:translate(-50%,-50%);
       width:;
       heigth:;
   }
   

（八）固定位置

1. 介绍：相对于浏览器窗口进行定位移动
2. 代码：position:fixed;
3. 特点：
   • 需要配合方位属性实现移动
   • 相对于浏览器可视区域进行移动
   • 在页面中不占位置（脱标），会产生div默认宽度不是100%的现象！！！！！！
4. 应用场景：让盒子固定在屏幕中的某个位置上

（九）元素层级的问题

1. 不同布局方式元素之间的层级关系

   • 标准流<浮动<定位

2. 不同定位之间的层级关系

   • 相对、绝对、固定默认层级相同
   • 此时代码中下面写得元素层级更高，会覆盖上面的元素

3. 更改定位元素的层级

   • 属性名：z-index

   • 属性值：数字

     数字越大层级越高

十五、装饰

（一）垂直对齐

1. 基线：浏览器中文字类型元素排版存在用于对齐的基线（baseline）

2. 文字对齐问题

   • 场景：解决行内/行内块元素垂直对齐问题
   • 问题：当图片和文字在一行中显示时，其实底部是不对齐的

3. 垂直对齐方式

   • 属性名：vertical-align
   • 属性值：
     • baseline 默认，基线对齐
     • top 顶部对齐
     • middle 中部对齐
     • bottom 底部对齐

4. vertical-align可以解决的问题

   • 文本框和表单按钮无法对齐问题
   • input和img无法对齐问题
   • div中的文本框，文本框无法贴顶问题
   • div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
   • 使用line-height让img标签垂直居中问题

5. 注意点

   学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题， 推荐优先使用浮动完成效

（二）光标类型

1. 属性名：cursor

2. 常见属性值：

（三）边框圆角

1. 属性名：border-radius
2. 常见取值：数字+px，百分比
3. 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
4. 正圆 border-radius:50%（前提是盒子正方形）
5. 胶囊按钮 border-radius：盒子高度的一半（前提是盒子长方形）

（四）溢出部分显示效果

1. 溢出部分：指的是盒子内容超出盒子的范围的区域
2. 属性名：overflow
3. 常见属性值：
   • visible 默认值，溢出部分可见
   • hidden 溢出部分隐藏
   • scroll 无论是否溢出，都显示滚动条
   • auto 根据是否溢出，自动显示或者隐藏滚动条

（五）元素本身隐藏

1. 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
2. 常见属性值：
   • visibility：hidden 隐藏元素本身，并且在网页中 占位置
   • display：none 隐藏元素本身，并且在网页中 不占位置（常用）
   • opacity
3. 注意点：
   • 开发中经常会通过 display属性完成元素的显示隐藏切换
   • display：none；（隐藏）、 display：block；（显示）

（六）元素整体透明 opacity

1. 属性名：opacity
2. 属性值：0~1之间的数字
   • 1：表示完全不透明
   • 0：表示完全透明
3. 注意点：
   • opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

（七）边框合并

1. 场景：让相邻表格边框进行合并，得到细线边框效果

2. 代码：border-collapse：collapse；

（八）用CSS画三角形（没懂）

1. 在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
2. 实现原理：利用黑子边框完成
3. 步骤：
   • 设置一个盒子
   • 设置四周不同颜色的边框
   • 将盒子宽高设置为0，仅保留边框
   • 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

十六、伪类选择器

（一）链接伪类选择器

1. 场景：常用于选中超链接的不同状态
2. 选择器语法：
   • a:link{ } 没有访问过的状态
   • a:visited{ } 访问之后的状态
   • a:hover{ } 鼠标悬停的状态
   • a:active{ } 鼠标按下的状态
3. （没懂！！！）如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写 记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑

（二）焦点伪类选择器

1. 场景：用于选中元素获取焦点时状态，常用于表单控件

2. 选择器语法：

   input:focus{
       
   }
   

（三）属性选择器

1. 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
2. 选择器语法:
   • E[attr] 选择具有atrr属性的E元素
   • E[attr=“val”] 选择具有atrr属性并且属性值等于val的元素
3. 例子：选中页面中的文本框 input[type=“text”] { }

十七、项目样式补充

（一）精灵图

1. 场景：项目将多张小图片合并成为一张大图片，这张大图片被称为精灵图
2. 优点：减少服务器发送次数，减轻服务器的压力，提高页面的加载速度
3. 精灵图的使用步骤：
   • 创建一个盒子，设置盒子的尺寸和大小
   • 将精灵图设置为盒子的背景图片
   • 修改图片背景位置 backrgound-position: x y ;(xy值都为负数，是小图片左上角相对于大图片左上角的位置)

（二）背景图片大小

1. 语法：background-size:（宽度 高度）；
2. 取值（一个或两个值）：
   • 数字+px
   • 百分比
   • contain 背景图片等比缩放，不会超过盒子大小
   • cover 背景图片等比缩放，刚好填满整个盒子没有空白

（三）盒子阴影

1. 属性名：box-shadow
2. 取值（一共6个取值）:
   • h-shadow 必须，水平偏移量，允许负值
   • v-shadow 必须，垂直偏移量，允许负值
   • blur 可选，模糊度
   • spread 可选，阴影扩大
   • color 可选，阴影颜色
   • inset 可选，将阴影改为内部阴影

（四）过渡

1. 作用：让元素样式慢慢变化，常配合hover使用，增强网页交互体验
2. 语法：transition：属性1 过渡时间1，属性2 过渡户时间2(…);
3. 常见取值：
   • 过渡的属性 all:所有能过渡的属性都过渡，具体属性名名如width，只有width过渡
   • 过渡的时长 数字+s（秒）
4. 注意点：
   • 过渡需要：默认状态和hover状态样式不同，才能有过渡效果
   • transition属性给需要过渡的元素本身加
   • transition属性

十八、项目前置认识

（一）DOCTYPE文档说明

1. ！DOCTYPE html文档类型声明，告诉浏览器该网页的html版本为5

（二）网页语言

1. html lang-"en"识别网页语言
2. 作用：搜索引擎归类+浏览器翻译
3. 常见语言：zh-CN简体中文/en英文

（三）字符编码

1. meta charset=“UTF-8” 标识网页使用的字符编码

2. 作用：保存和打开的字符编码主要统一设置，不然会出现乱码

3. 常见的字符编码：

   • UTF-8 万国码，国际化的字符编码，收录了全球语言的文字
   • GB2312 6000+汉字
   • CBK 20000+汉字

4. 注意点：开发中统一使用UTF-8字符编码

5. meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
   

   移动端开发必有

6. meta http-equiv="X-UA-Compatible" content="ie=edge"
   

   IE浏览器兼容

（四）SEO简介

1. SEO ：search engine optimization 搜索引擎优化、
2. 作用：让自己的网站在搜索引擎上排名更靠前
3. 提升SEO的方法：
   • 竞价排名
   • 将网页制作成html后缀
   • 变迁语义化（在合适的地方使用合适的标签）
   • 。。。
4. SEO三大标签
   • title
   • description(meta)
   • keywords(meta)

（五）ico图标设置

1. 场景：显示在页面标签标题左侧的小图标，习惯使用.ico格式的图标

2. 代码：

   <link rel="shortcut icon" href="ico图标路径" type="image/x-icon">