CSS学习笔记

复合选择器

- 选中同时符合多个条件的元素（连着写）

• css中在定义class的时候有空格，比如<div class="t1 t2">代表这个div拥有两个类名
  • 而在.t1 .t2的空格代表后代选择器 t1中的t2 没有空格则表示同时包含两个类名

关系选择器

-  `>` 代表后代选择器（可省略不写） +（标签） 代表选择下一个兄弟 ～(标签)表示选择之后的所有兄弟
notice 如果>省略不写的话 则代表选择后代所有选择器

属性选择器

- [属性名]选择还有指定属性的元素
- [属性名=属性值] 选择指定属性和属性值
- [属性名 ^=属性值] 以指定属性值开头的
- [属性名 $=属性值] 以指定属性值结尾的
- [属性名 *=属性值] 含有某值的

伪类选择器

- :first-child 第一个子元素
- :last-child 最后一个子元素
- :nth-child() 可选 特殊值：n 全选 2n or even表示偶数位 2n+1 or odd表示奇数
   
   ***以上所有是根据所有的子元素进行排序 而不是同类型***
   个人理解: 比如div h1:first-child 是指div中的第一个子元素

- first-of-type last-of-type nth-of-type() 则表示同类型
- ：not(:nth-of-type())  /  not(:nth-child()) 表示除去这些

超链接的伪类

- :link 表示没访问过的链接
- :visited  表示访问过的链接 (由于隐私的原因visited只能修改颜色)
- :hover 表示鼠标移入的状态
- :active 表示鼠标点击

伪元素

- :: first-letter 表示第一个字母
- :: first-line 表示第一行
- :: selection 表示选中的内容
- :: before 元素的开始
- :: after 元素的最后
    - before和after必须结合content属性来使用

---

文档流（normal flow）

网页是一个多层的结构 （用户只能够看到最顶上一层） 元素主要有两个状态 在文档流中 or 脱离

• 块元素

  • 独占一行 （自上向下垂直排列)
  • 默认宽度为100% 哪怕设置宽度还是会独占一行
  • 默认高度是被内容撑开

• 行内元素

  • 只占自身的大小
  • 在页面中从左至右排列

盒子模型

content(内容区) => padding(内边距) => border(边框) => margin(外边距)

要设置border需要三个元素 border-width（默认3px 可以指定四个方向的边框宽度） border-color（默认值为color的颜色 也可以指定四个边的边框颜色） border-style（solid/实线 dotted/点状虚线 dashed/虚线 double/双线 默认值为none） 
可用border简写 

• padding 一般盒子的可见框的大小 由内容区 内边距 和边框共同决定

• margin 外边距不会影响盒子可见框的大小 设置的左和上外边距则会移动元素 设置下和右外边距会移动其他元素 margin会影响到实际占用空间

• 水平布局

  • 需要满足等式margin-left+border-lefe+padding-left+content+padding-right+border-right+margin-right = 父元素的width
  • 一般情况下如果这七个值没有一个为auto 则浏览器则会自动调整margin-top为auto
  • 如果给定一个固定的width 同时给margin-left&right设定一个auto值 则会实现水平居中

• 垂直布局

  • 如果子元素的大小超过了父元素 则会溢出 这时候用overflow来设置父元素如何处理溢出的子元素
    • 可选值 visible(溢出)/hidden(裁剪)/scroll（生成两个滚动条)/auto(根据需要)

• 外边距的折叠

  • 垂直外边距的重叠
    • 相邻的垂直方向外边距会发生重叠现象
    • 兄弟元素 两者取较大值（两者都是正值） 特殊情况（不推荐） 一正一负 取和 如果都为负值 则取绝对值较大的
    • 父子元素 如果父子元素相邻 子元素的会传递给外边距 solution: 父元素加个border or padding-top

• 行内元素的盒模型

  • 不支持设置高度和宽度
  • 可以设置padding/border/margin 垂直方向不影响布局

• display 用来设置元素显示的类型 inline(行内元素) block(块元素) inline-block(可以设置宽度和高度不会独占一行) table none(不显示 也不占据位置)

• visibility

  • 可选值: visible 默认值 正常显示
  • hidden 隐藏 不显示 依然占据页面的位置

盒子的大小

• box-sizing

  • 可选值:
    • content-box (default) w和h表示内容区的大小
    • border-box 指的是content padding border的总大小

• 轮廓阴影和圆角

  • outline用来设置元素的轮廓线 与border相类似 不同点是不会影响元素占的大小
  • box-shadow 用来设置元素的阴影效果 左侧偏移量 上侧偏移量 模糊半径 color
  • border-radius (可以分开设置四个方向)

float

• 元素浮动之后，

  • 水平布局的等式不需要强制成立，并会从文档流中脱离 不再占用文档流的位置
  • 默认不会移出父元素中
  • 浮动元素之间不会相互覆盖
  • 不会盖住文字

• 元素脱离文档流后的特点

  • 块元素

    • 不在独占页面的一行

  • 行内元素

    • 与块元素类似

    notice: 脱离文档流后没有块元素和行内元素之分

• 高度塌陷和BFC

  • 设置为BFC可以解决高度塌陷，子元素与父元素上边距重合的问题
  • 开启BFC的方法:
    • overflow: hidden
    • display: inline-block
    • display: flex

• clear

  • 作用: 清除浮动元素对当前元素的影响
  • 原理, 当设置清除浮动之后，浏览器会自动加上一个上外边距
  • 设置both 表示清除两侧中最大的影响

• 伪元素+clear

  • 需要有content 并且display为block(default为inline-block)
  • clearfix
    • 就是设置一个类，属性为content:''; display:table; clear:both

定位 position

• relative

  • 参照点(pivot)是元素原先所在的位置
  • 会提升元素的层级(z-index)
  • 不会脱离文档流
  • 不会改变display

• absolute

  • 会从文档流脱离

  • 会改变display 都变成block

  • 会提升层级

  • 相对于包含块进行定位

  • 包含块的定义

    • 正常情况下就是离当前元素最近的ancestor factor
    • 当开启绝对定位后，就是离当前元素最近的开启了定位的祖先元素

• fix

  • 就是绝对定位
  • difference is 永远相对于浏览器视窗定位
  • 固定定位的元素不会随网页的滚动条滚动

• sticky

  • 与相对定位的特点基本一致
  • 不同的是可以在元素到达某个位置时将其固定

绝对定位的注意事项

• 水平布局

  • 开启绝对定位之后，水平方向的布局就需要加上left和right两个值，因为left和right的值默认是auto，如果不设置的话，则会自动分配left和right

• 垂直方向的布局

  • 垂直方向布局也必须满足

• 层级

  • z-index只对开启了定位的元素有效

  • 祖先元素的层级永远不会盖住后代元素 so 当使用绝对定位时, 可以使用left/right/bottom/top:0 margin: auto 来水平垂直居中