前端基础：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
    • 从父现象

 

posted @ 2018-10-01 10:27  q1ang  阅读(122)  评论(0)  编辑  收藏  举报