css知识点

干货分享！很多人对于前端中css的学习都很懵懵懂懂，我为大家整理了一些我在学习css前端是的一些知识点，内容包括 三大特性 、选择器 、布局 、补充、常见属性 、基础 等方面的知识，如果有补充的欢迎一起来讨论！

css基础

• 基础
  • 文本样式
    • 文本对齐
      • text-align让文本水平 居中对齐、左对齐等
        • center
        • left
        • right
      • 垂直对齐（元素） vertical-align
        • top
        • middle
        • bottom
    • 文本装饰
      • text-decoration 设置或删除文本装饰
        • none
        • overline（上划线）
        • line-through（中划线）
        • underline（下划线）
    • 文本转换
      • text-transform 用于转换大小写
    • 文本间距
      • text-indent 指定第一行的缩进
      • letter-spacing 字符之间的间距
      • line-height 行之间的间距
      • word-spacing 单词之间的间距
      • white-space关于换行和元素内部空白的处理方式
    • 文本阴影
      • text-shadow text-shadow: 2px 2px 5px red;
    • 字体大小
      • font-size w3c建议使用em尺寸单位
  • 单位
    • 绝对单位
      • 比较重要的就是 px
    • 相对单位
      • em
        • 相对于父元素的font-size大小的倍数（继承）
        • 但是会先查找自身是否有font-size才会去继承父元素的font-size
      • rem
        • 根元素html标签的字体大小的font-size的倍数
        • 在html或root选择器中写font-size叫做设置 在下面的元素里面写rem叫应用根的设置
    • 百分比单位
      • vw
        • 相对于视口的宽
      • vh
        • 相对于视口的高
      • %
        • 包含块的确定是比较重要的，这个需要单独了解
      • vm
        • css3新单位，相对于视口的宽度或高度中较小的那个
  • 盒子模型
    • 内容
    • 内边距
    • 内边距、边框和外边距都是可选的，默认值是零。
    • 边框
      • border-radius:5px
    • 外边距（允许负值）
      • inherit length % inherit auto
      • 外边距重叠： 什么是外边距重叠？ 重叠的结果是什么？ 　　外边距重叠就是 margin-collapse 　　相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠　　 　　折叠结果遵循下列计算规则： 　　1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值 　　2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值 　　3）两个外边距一正一负时，折叠结果是两者的相加的和
  • 选择器
    • 简单选择器
      • 元素
      • id
      • 类（类名不可以用数字开头）
      • 通用
      • 分组
    • 组合器选择器
      • 后代
      • 子选择器
        • div>p div中的p
      • 相邻兄弟
        • 相邻的意思是紧随其后
        • div+p的意思是div后面的p元素（且必须是同级的）
      • 通用兄弟
        • div~p之后的所有同级元素
    • 伪类选择器
      • 根据特定状态选取元素
    • 伪元素选择器
      • 选取元素的一部分并设置其样式
    • 属性选择器
      • 根据属性或属性值来选取元素
    • 继承性
      • 可继承的样式： font-size font-family color, ul li dl dt dd 不可继承的样式：border padding margin width height
  • 伪类、伪元素
    • 伪类
      • 用于定义元素的特殊状态
        • 状态类、结构类、表单类、语言类
    • 伪元素
      • 伪元素用于设置元素指定部分的样式
  • 背景
    • background-color
    • background-image
    • background-repeat
    • background-attachment
      • 指定背景图像随页面的 其余部分一起滚动 scroll
      • 指定固定背景图像 fixed
    • background-position
      • 指定背景图像的位置 例如 right top
    • 简写属性
      • 顺序为：color->image->repeat->attachment->position
  • 透明度
    • rgba
      • r为红色值
      • g为绿色值
      • b为蓝色值
      • a为alpha，1-0之间的数、数字越小透明度越大
    • opacity
      • 后面直接跟0-1的数值
    • 不同点
      • opacity属性的所有后代元素都会继承opacity属性 而rgba后代元素不会继承不透明效果
      • rgba只是背景颜色有透明效果 而有opacity属性元素的后代都会继承这个透明属性，包括但不限于文字图片等
  • 表单、列表
    • 可以用width、padding、border、background-color等来修饰
• 布局
  • display
    • 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。 　　list-item 像块类型元素一样显示，并添加样式列表标记。 none 隐藏起来 　　table 此元素会作为块级表格来显示 　　inherit 规定应该从父元素继承 display 属性的值
  • 定位
    • static
      • 不可以设置top,bottom,left,right
    • relative,absolute
      • absolute相对于static定位以外的一个父元素进行定位， 如果父元素是static则相对body定位，随页面滚动一起移动
      • 子绝父相
        • 相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流
        • 父元素相对定位，子元素绝对定位进行微调
      • 水平居中
        • 当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
        • 可以使用left: 50%; margin-left:-元素宽度一半px 让自身居中
    • sticky
    • fixed
      • 移动浏览器对 fixed 的支持很差
    • z-index
  • 溢出：overfolw 仅适用于具有指定高度的块元素 还可以指定overflow-x等
    • visible不会被剪裁、在元素框外被渲染
    • hidden溢出会被剪裁、其余内容隐藏
    • scroll加滚动条
    • auto必要时加滚动条
  • 浮动流
    • 半脱离标准流，只有水平排版. 它只能设置某个元素左对齐或者右对齐
    • 注意
      • 浮动流中没有居中对齐, 也就是没有center这个取值
      • 在浮动流中是不可以使用margin: 0 auto;
      • 不区分三类元素，元素都可以设置宽高，水平排版
    • 特点
      • 脱标
        • 当某一个元素设置浮动之后, 那么这个元素看上去就像被从标准流中删除了一样
        • 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
      • 浮动元素排则
        • 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
        • 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
        • 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
      • 浮动元素贴靠
        • 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
        • 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
        • 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
      • 浮动元素字围
        • 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,
      • 盒子高度
        • 在标准流中内容的高度可以撑起盒子的高度
        • 在浮动流中浮动元素内容的高不可以撑起盒子的高度
    • 清除浮动
      • 给前面的父盒子添加高度
        • 在企业开发中能不写高度就不写高度, 所以这种方式不常用
      • claer在浮动元素的最下面加一个块级元素设置claer：both
        • 由于需要添加大量无意义的标签, 所以不常用
        • 在外墙法中可以通过设置额外标签的高度来实现margin效果
      • 给前面的盒子添加伪元素来清除浮动（最为推荐的方法）
        • 本质和内墙法一样，添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
        • div::after{ content:''; display:block; height:0; visibility:hidden; clear:both;}
      • 开启BFC
        • overflow:hidden或auto
          • 给前面一个盒子添加overflow:hidden属性，清除溢出盒子边框外的内容
          • 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
          • 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点是和定位结合在一起使用时会有冲突
        • 父元素设置float
  • felxbox
    • 父元素
      • flex-direction（定义容器要在哪个方向上堆叠flex项目）
        • column(从上到下） column-reverse（从下到上） row（从左到右） rwo-reverse（从右到左）
      • flex-wrap（规定是否应该对flex项目换行
        • wrap（必要时换行） nowrap（不换行） wrap-reverse（相反的顺序换行）
      • flex-flow（direction和wrap的简写属性）
      • justify-content（用于水平对齐）
        • flex-start（默认） flex-end（在容器的末端对齐） space-ground（平分空白） space-between（平分空白靠边）
      • align-items（用于垂直对齐）
        • center（中间） flex-start（顶部） flex-end（底部） strech（垂直拉伸） baseline（基线对齐）
      • align-content （定义了多根轴线的对齐方 式。如果项目只有一根轴线， 该属性不起作用）
        • space-between(弹性线之间有相等的间距） stretch（拉伸弹性线以占据剩余空间（默认）） center、flex-start、flex-end
    • 子项目
      • order（可以改变 flex 项目的顺序）
      • flex-grow、flex-shrink、flex-basis
        • grow（增长比例）
        • shrink（规定某个 flex 项目相对于其余 flex 项目将收缩多少，默认值是0）
        • basis规定 flex 项目的初始长度。
      • flex（flex-grow、flex-shrink 和 flex-basis 属性的简写）
      • align-self
        • align-self 会覆盖容器的 align-items 属性
        • 作用是规定弹性容器内所选项目的对齐方式