Frontend Learning Book

CSS

Post in 二 01 一月 2019 |Tags CSS

Position

static: 默认值，忽略TRBL, z-index
inherit: 继承
fixed: 固定定位，相对于浏览器窗口TRBL
relative: 相对定位，相对于正常位置TRBL

遵循正常文档流，占有文档空间，父级padding影响，根为root

TRBL	父级	定位
无	无	上一元素底部/浏览器左上角
无	有	父级左上角
有	父级有无position	父级左上角
有	父级有padding	内容区域左上角

absolute: 绝对定位，相对于除static以外第一个父元素TRBL

脱离文档流，不占文档空间，父级padding不影响，根为html

TRBL	父级	定位
无		默认auto, 变回relative
有	父级无position	找上级直到html
有	父级有position	父级左上角，无论padding

Display

display: inherit, none, block, inline, inline-block,table, table-cell

元素	宽高	margin	padding	换行排列	example
块状元素	y	y	y	y (从上至下)	div, p, nav, ul, li , header, footer, aside
行内块状元素	y	y	y	n (从左到右)
行内元素	n	左右	y	n (从左到右)	span, a, b, i, strong, em, img, input, select

inline-block

行内块状元素div之间产生空白间隙的原因是，元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

将上一个元素的闭合标签与下一个元素的开始标签写在同一行; 或者将两个inline-block元素间加上空白注释；或者不写元素的闭合标签

<ul>
  <li>one</li  
  ><li>two</li  
  ><li>three</li>
</ul>
<!-- or -->
<ul>
    <li>one</li><!--  
    --><li>two</li><!--  
    --><li>three</li>
</ul>

父元素设置font-size为0

.parent {
  font-size: 0;
}

设置字符间距或单词间距

/* letter-spacing */
.parent{
  letter-spacing: -0.5em;
}

设置margin-right为负值
None: 不存在且不加载

Visibility: hidden 隐藏，仍占据空间

flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

table

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

// 水平居中

.son {
  width: xxpx;
  margin: 0 auto;
}

// 水平垂直居中

.parent {
  position: relative;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

盒子模型 Box Model

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

两个上下相邻的盒子垂直相遇时，外边距会合并，等于较大的那个

W3C标准盒：

box-sizing: content-box

总宽度 = margin + border + paddig + width(content)

IE盒

box-sizing: border-box

总宽度 = margin + width(border + padding + content)

// 向下三角
.triangle {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-top: 100px solid blue;
}

滚动条样式

webkit内核的浏览器（谷歌、ie、Safari等）

使用伪类改变滚动条样式

::-webkit-scrollbar 滚动条整体
::-webkit-scrollbar-thumb 滚动条的方块
::-webkit-scrollbar-track 滚动条的轨道
::-webkit-scrollbar-button 滚动条的两端按钮
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方

https://blog.csdn.net/qq_35355153/article/details/107205254

ul {
  &::-webkit-scrollbar {
      width: 5px;
  }
  &::-webkit-scrollbar-thumb {
    background: @primary-color;
    border-radius: 5px;
  }
}

火狐滚动条不能修改样式

选择器

伪类选择器	Desc
:active	选择正在被激活的元素（匹配指定状态）
:hover	选择被鼠标悬浮着的元素（匹配指定状态）
:visited	选择已被访问的元素（匹配指定状态）
:focus	选择拥有键盘输入焦点的元素
:enable	选择每个已启动的元素
:disable	选择每个已禁止的元素
:checked	选择每个被选中的元素
:target	选择当前的锚点元素
:first-child	选择满足是其父元素的第一个子元素的元素
:only-child	选择满足是其父元素的唯一一个子元素的元素
:last-child	选择满足是其父元素的最后一个元素的元素
:nth-child(n)	选择满足是其父元素的第n个子元素的元素
:nth-child(odd)	奇数行
:nth-child(even)	偶数行
:nth-last-child(n)	选择满足是其父元素的倒数第n个子元素的元素
:empty	选择满足没有子元素的元素
:not(selector)	选择不满足selector的元素
:root	选择根元素

伪元素选择器	Desc
::first-letter	选择指定元素的第一个单词
::first-line	选择指定元素的第一行
::after	在指定元素的内容后面插入内容
::before	在指定元素的内容前面插入内容
::selection	选择指定元素中被用户选中的内容