前端基础：CSS

CSS - 幕布 （https://mubu.com/doc/cu5lf_GGG0）

CSS

 

• 选择器
  • 基本选择器
    • 类选择器
      .box { ... }
    • id选择器
      # box { ... }
    • 标签选择器
      div { ... }
    • 通用选择器
      * { ... }
  • 组合选择器
    • 并集选择器（分组选择器）
      div, p, # account { ... } 多个选择器通过逗号连接而成，同时声明多个风格相同的样式
    • 交集选择器
      div.box { ... } / div#box { ... } 由两个选择器链接而成，选中二者范围的交集，两个选择器器之间不能有空格，且第一个必须是标签选择器，第二个必须是类选择器或者id选择器。
    • 后代选择器
      div ul li a { ... } 外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔；标签嵌套是，内层的标签成为外城标签的后代。
    • 子元素选择器
      ul>li { ... } 用过>连接，找到ul的所有li标签​（子元素）。
      
    • 弟弟选择器
      div~p { ... } 用~连接，找到与div同级且排在后面的p标签。
    • 毗邻选择器
      div+p { ... } 用+连接，找到紧挨在div后面的第一个同级p标签​。
    • 属性选择器
      根据HTML元素的特定属性选择元素。
      
      • 根据属性查找
        [type] { ... }
        ​
      • 根据属性和值查找
        [type="hello"] { ... } 属性等于hello的元素
        [type^="hello"] { ... } 属性​以hello开头的元素
        [type$="hello"] { ... } ​属性以hello结尾的元素​
        [type*="hello"] { ... } 属性​包含hello的元素​
        [type~="hello"] { ... } ​属性中有一个值为hello的元素
  • 伪类选择器
    • a:link { ... }
      没有访问的超链接a标签样式
    • a:visited { ... }
      访问过的超链接a标签样式
    • a:hover { ... }
      鼠标悬浮在元素上应用样式
    • a:active { ... }
      鼠标点击瞬间的样式
    • input:focus { ... }
      input输入框获取焦点时样式
  • 伪元素选择器
    • p:first-letter { ... }
      用于为文本的首字母设置特殊样式​​
    • p:before { ... }
      用于在元素的内容前面插入新内容
      
    • p:after { ... }
      用于在元素的内容后面插入新内容
• 选择器的优先级
  ！import -> 内联元素 -> id选择器 -> 类选择器 -> 元素选择器 （权重计算永不进位）
• 字体属性
  • font-family
    可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
    body {
    font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
    }​
    如果设置成inherit，则表示继承父元素的字体。​
  • font-weight
    字重（字体粗细）：lighter、normal、bord、border、100~900、inherit
  • font-size
    字体大小
  • color
    字体颜色：【十六进制值 如: ＃FF0000】、【一个RGB值 如: RGB(255,0,0)】、【颜色的名称 如: red】
    
• 文字属性
  • text-align
    文本对齐：left、right、center、justify
  • line-height
    行高
  • text-decoration
    文字装饰：none、underline、overline、line-through、inherit
• 背景属性
  • background-color
    背景颜色
  • background-image
    背景图像
  • background-size
    背景图片的尺寸
  • background-repeat
    重复背景图像
    • repeat
      默认
    • repeat-x
      背景图像将在水平方向重复
    • repeat-y
      背景图像将在垂直方向重复
    • no-repeat
      背景图像将仅显示一次
    • inherit
      继承
  • background-attachment
    背景图像是否固定或者随着页面的其余部分滚动
    • scroll
      背景图像会随着页面其余部分的滚动而移动（默认值）
    • fixed
      当页面的其余部分滚动时，背景图像不会移动
    • inherit
  • background-position
    背景图像的位置
    • top left / top center / top right ...
      如果只设置了一个关键词，那么第二个值就是"center"
    • x% y%
      左上角是 0% 0%。右下角是 100% 100%
      如果只设置了一个值，另一个值就是50%
    • xpos ypos
      单位是像素 (0px 0px) 或任何其他的 CSS 单位
      如果只设置了一个值，另一个值就是50%。
      可以混合使用%和position值​
  • inherit
    继承
• display属性
  • 行内元素和块级元素的区别
    • 行内元素：
      与其他行内元素并排；
      不能设置宽、高。默认的宽度，就是文字的宽度。
      
    • 块级元素：
      霸占一行，不能与其他任何元素并列；
      可设置宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
      
  • 块级元素和行内元素的分类
    • 从HTML的角度
      文本级标签：p、span、a、b、i、u、em。
      容器级标签：div、h系列、li、dt、dd。
      
    • 从CSS的角度
      行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
      块级元素：所有的容器级标签都是块级元素，还有p标签。
      
  • 块级元素和行内元素的相互转换
    可以通过display属性将块级元素和行内元素进行相互转换
    • display:block
    • display:inline
    • display:inline-block
• 盒模型
  
• 脱离标准流
  • 浮动
  • 绝对定位
  • 固定定位
• 标准文档流
  • 空白折叠现象
    a. 多个空格会被合并成一个空格显示到浏览器页面中
    b. ​img标签换行写，会发现每张图片之间有间隙，如果在一行内写img标签，就没有间隙
  • 高矮不齐，底边对齐
    文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
  • 自动换行
• 浮动与清除浮动
  • 浮动 float: none，float: left，float: right（要浮动一起浮动）
  • 特点
    • 浮动的元素脱离标准流
      元素在页面中不再占据位置，且元素不再区分行内、块级元素，都能够设置宽高
    • 浮动元素互相贴靠
    • 浮动的元素有"字围"效果
    • 浮动元素紧凑效果
      一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度
  • 清除浮动
    • 给父盒子设置高度
    • clear:both
      left：当前元素左边不允许有浮动元素
      right：当前元素右边不允许有浮动元素
      both：当前元素左右两边不允许有浮动元素​
      • 隔墙法
        给浮动元素最后面加一个空的div，并且该元素不浮动，然后设置clear：both
    • 伪元素清除法
      给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类
      .clearfix:after{
      content: '.';
      clear: both;
      display: block;
      }​
    • overflow：hidden
      • visible
        默认值。内容不会被修剪，会呈现在元素框之外。
      • hidden
        内容会被修剪，并且其余内容是不可见的。
      • scroll
        内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
      • auto
        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
      • inherit
        规定应该从父元素继承 overflow 属性的值。
• 定位
  • 相对定位
    相对于自己原来的位置定位
    • 现象和使用
      1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
      2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
      
    • 特性
      1.不脱标
      2.形影分离
      3.老家留坑
      
    • 用途
      1.微调元素位置
      2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
      
    • 参考点
      自己原来的位置做参考点
  • 绝对定位
    • 特性
      1. 脱标
      ​2. 做遮盖效果，提成了层级
    • 参考点
      • 单独一个绝对定位的盒子
        1. 当使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
        2. 当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
      • 以父辈盒子作为参考点
        1. 父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
        2. 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
        3. 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
        
    • 父相子绝
      • 盒子居中
        position: relative;
        left: 50%;
        ​margin-left: -480px; // 父盒子宽度的的一半
  • 固定定位
    • 特性
      1.脱标 2.遮盖，提升层级 3.固定不变
    • 参考点
      设置固定定位，用top描述。那么是以浏览器的左上角为参考点
      如果用bottom描述，那么是以浏览器的左下角为参考点
• z-index
  • 只有定位了的元素，才能有z-index
  • 从父现象