CSS 笔记

• CSS 绝对定位 position: absolute

  以最近有定位的父元素为基准 不占位置

• CSS 相对定位 position: relative

  以自身元素为基准 占用原有位置

  • 相对定位 不占位置（子绝父相）：

    父元素设置相对定位但是不设置内容 子元素设置绝对定位

    由于子元素会根据最近有定位的父元素为基准 所以子元素会根据父元素的位置移动

• 浮动元素 float: left/right

  以原来基础的高度左右浮动

  如果有其他元素会碰到浮动元素就会贴着浮动元素

  如果无其他元素会碰到浮动元素 则不影响其他元素占有浮动元素原本位置（只会覆盖标准流的块元素）

  浮动贴浮动的 不浮动的贴不浮动的

  类似块元素可以不独占一行，可以设置宽高

• 显示方式 display: none/block/inline/inline-block

  改变元素显示方式并拥有此显示方式属性

  none：不显示元素(等同移除 与visibility: hidden;隐藏但占有原位置不同)

  block：可设置宽高 独占一行

  inline：宽高由内容撑开不可自定义 可多个占一行

  inline-block：可设置宽高 可多个占一行

• 水平居中

  text-align: center; 设置父元素内容水平居中

  margin: 0 auto; 设置本身利用外边距自动居中（需设置宽度）

  内联元素无法设置宽度可嵌套div 利用text-align: center居中

• 垂直居中

  line-height: 100px; 设置父元素行高自动垂直居中 适合一行的

  padding: 30 0; 设置内边距达到垂直居中 适合多行文本

  还有一种是图片居中 原理是设置父元素改变显示方式为单元格显示，然后设置单元格垂直居中

  #d {
  display: table-ceil;
  vertical-align: middle;
  }
  

• 固定与自适应

  • 一方或两方固定 另一方自适应

  1. 设置自适应的margin 固定一方其他设置0
  2. 设置自适应的overflow: hidden; 隐藏多余的部分

  • 固定位置

    利用子绝父相 改变子元素定位基准 然后设置bottom: 0; 可固定在底部

• 清除浮动 clear: left/right/both/none/inherit

  有时使用浮动 不需要后续元素再浮动 只需为后续元素设置下清除浮动即可

  值	描述
  left	在左侧不允许浮动元素。
  right	在右侧不允许浮动元素。
  both	在左右两侧均不允许浮动元素。
  none	默认值。允许浮动元素出现在两侧。
  inherit	规定应该从父元素继承 clear 属性的值。

• 设置切片图 - 显示图片中一小部分图片

  设置div背景图 并设置backround-position

  例如：

  div{
      width:25;
      height:25;
      background:transparent url(https://how2j.cn/study/wangwang.gif) no-repeat scroll -83px -0px ;
  }
  <-- 等同于下面 -->
  background-color:transparent;
  background-image:url(/site/wangwang.gif);
  background-repeat:no-repeat;
  background-attachment:scroll;
  background-position: -83px -0px;
  

  运行效果就是：