2020-10-19 前端学习笔记（CSS样式）

CSS

全名称：层叠样式表
作用：对html元素的 位置和精确计算像素，外观，字体等等
特点： 1. 丰富的样式定义
2. 易于使用和修改
3. 多页面使用
4. 可层叠（一个元素可具有多个css样式）
5. 页面压缩 （尽量多次复用同样的css，减小css文件体积，提高网页性能）

css样式属性写法： 属性：值；
css几种使用方式：
***:元素设置宽高的时候 块级元素可设， 行级元素不可

1. 行内样式 （在元素标签上的style属性上直接写css）
   在浏览器上查看 位置在<element.style{ background-color: red;}
2. 内嵌样式 (在网页里面任意位置（head/body标签之内去写 )

<style type="text/css">			<!--type="text/css"可以省略不写-->

内嵌样式的写法是 ele{ }

3. 外部样式表（css写在外部的css文件里面，网页直接调用使用）
   样式分为：单属性/复合属性样式
   复合属性：

background: red  url('./image/0.jpg')  no-repeat  0 0; 
background-color: #f9fdff;
background-image:url('./image/0.jpg');
background-position:50px;
background-position-x: 50px;

字体样式
font-size: 14px; 浏览器默认字体是16px, 这个用css默认的值
font-family: serif; 设置字体的 css默认的有几个字体
也可以子集自定义字体:需要自己导入字体文件：@font-face

4. 内嵌样式里边的css选择器
   css 注释 ctrl+shift+/

选择器
①	*匹配器 匹配当前网页里面的所有元素
②	元素匹配器 根据当前元素的名称来匹配
③	class类名称匹配器 根据元素的class属性名称来匹配 用点来匹配 元素种的一部分 （一个元素可能同时具有多个类）<button class="btn btnsub">按钮</button>
④	id名称匹配 根据当前元素的id属性来匹配 （一个元素一个 不重名） 使用#来选择 #userID{width: 200px;height: 30px;}
⑤	组合选择器：子父关系选择器：空格选择、>选择、相邻元素选择器 +(匹配当前元素之后紧跟的元素) ~（匹配当前元素之后的所有元素） 指的是同级元素匹配
⑥	子集选择器(css2里面的伪类选择器) 里面的数字是按照序号数：.box>p:nth-child(1){} /*first-child、last-child*/
⑦	属性选择器：根据元素的属性去匹配元素的：写法是 匹配器[属性]{} button[type]{color: red;} 多个属性匹配：button[type][class]{color: red;} 根据属性值来匹配：button[class=info][type=button]{color:red;} 根据属性值来匹配 值是以谁开头 或者 以谁结尾 包含那个字母：button[class^=a]{color:red;} OR button[class$=m]{color:red;} OR button[class*=f]{color:red;}
⑧	分组选择器：button,p,span{color:red;} OR .btn,#id,button{} OR div>#menu,ul>li.info{}

5. CSS三大样式之间的优先级
   优先级：
   ① 三大样式之间如果存在冲突 行内样式>内嵌样式>外部样式（行内样式>外部样式>内嵌样式）加载css的顺序就有关
   三大样式之间 如果样式不冲突 则叠加

② 选择器之间的优先级（内嵌 外部样式存在）四个基本选择器之间的优先级：
id>class>ele>*
③ 组合选择器里面的优先级： 同匹配方案 牵扯到父级（父级的优先级高）
④ 如果样式优先级不足（但是必须使用怎么弄 ）
提高样式优先级：！important 提高的比行内样式优先级还高

6. BFC：是指元素相对独立，自身的结构和位置不会影响周边元素
   只要元素满足下面任一条件即可触发 BFC 特性：
   ① body 根元素
   ② 浮动元素：float 除 none 以外的值
   ③ 绝对定位元素：position (absolute、fixed)
   ④ display 为 inline-block、table-cells、flex
   ⑤ overflow 除了 visible 以外的值 (hidden、auto、scroll)

普通流的BFC：
块元素上下结构如果属域同一个BFC，这两个元素之间的外间距会重叠
如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden;
会构建为另一个这样的两个上下元素之间的间距会叠加 不会重叠

7. 伪类：
   :hover 悬停伪类
   :active 激活伪类
   :checked 选择伪类 主要使用 radio checkbox
   :focus 获得焦点伪类 input表单元素

     一般使用下面这两个伪类来做css特效
     :after  给元素的内容之后追加内容
     :before 给元素的内容之前追加内容
     下面这两是可用和不可用的伪类
     表单元素添加disabled  为不可用  不添加可用
   

input:disabled{ color: blue;}
input:enabled{ color: green;}
.fontbox:after{ content: "";}
.fontbox:before{ content: "";}

8. CSS里面的尺寸：
   width height max-width min-width max-height min-height line-height
   line-height: 100px; 属性设置一行的高度 如何是单行文本可以做单行文本相对父容器垂直居中
9. CSS里面的文本对齐方式：
   text-align: inherit; left center right inherit（继承父级）
10. CSS里面的像素单位：
    ① px(固定单位像素) rem em %（百分比 相对父容器走百分比）
    ② rem 相对根节点 如果给html设置字体大小16px 1rem =16px;
    ③ em 相对像素 如果父元素没有设置字体大小，相对浏览器走默认像素
    如果父容器设置字体大小， 相对父容的字体大小
11. input表单元素的轮廓

input{
      outline: none;
      outline-color: red;
      outline-width: 2px;
      outline-style: dashed;
      outline-offset: 10px;
      }