1-13.CSS综合

一、说一说你平时写代码遵守的编码规范？

• HTML+CSS
  • class使用中横线"-"当连接符；class避免过度缩写；
  • 空格代替tab；
  • 使用小写书写文档；
  • ……
• CSS
  • 每个选择器声明独占一行；
  • 属性值用双引号包裹；
  • 小数不写0；
  • 值为0时不加单位；
  • 颜色值使用十六进制，缩写；
  • 属性书写顺序按照位置、盒模型、文本相关、视觉顺序书写；
  • ……

二、垂直居中有几种实现方式？

• 行内元素垂直居中代码
  • 通过设置容器上下padding相等（容器未设置固定高度，单行或多行）；
  • 通过设置容器line-height与height相等（单行文本）；
  • 通过容器设置display:table，元素设置display:table-cell（单行）；
  • 通过设置伪元素display:inline-block并使其高度为容器高度，再利用vertical-align:middle；使其与同行元素垂直对齐；（单行）
  • 通过flex布局justify-content: center; flex-direction: column;（单行或多行）

行内元素居中

• block-level垂直居中
  • 设置容器上下padding相等（容器未设置固定高度，代码与行内元素类似）
  • 绝对定位+负margin（元素高度已知）
  • 绝对定位+transform（元素高度已知或未知）
    链接1
  • flex
    链接2

绝对定位+负margin/transform

flex

三、实现如下效果，每种效果都只使用一个html 标签来实现

链接

Tooltip

四.checkbox改背景

链接

image.png

image.png