CSS基础知识(一)

CSS

1. 基本语法

1.1. 选择器

基本选择器
- 标签，div ul li ……
- 类，.className
- ID，#id
- 通配符，*
属性选择器
- 指定属性，[attr]
- 指定某个属性，[attr=val]
- 指定包含某个属性，[attr*=val]
- 指定某个属性值开头，[attr^=val]
- 指定某个属性值结尾，[attr$=val]
组合选择器
- 相邻兄弟选择器，a+b
- 普通兄弟选择器，a~b
- 子选择器，a>b
- 后代选择器，a b
伪类
- 条件伪类
  - 基于元素语言匹配页面元素，:lang()
  - 匹配特定文字书写方向，:dir()
  - 匹配包含指定元素，:has()
  - 匹配指定列表里的元素，:is()
  - 匹配不符合一组选择器的元素，:not()
- 行为伪类
  - 鼠标激活，:active
  - 鼠标悬浮，:hover
  - 鼠标选中，::selection
- 状态伪类
  - 当前锚点元素，:target
  - 未访问的链接元素，:link
  - 已访问的链接元素，:visited
  - 聚焦元素，:focus
  - 必填表单元素，:required
  - 合法表单元素，:valid
  - 非法表单元素，:invalid
  - 输入范围以内的表单元素，:in-range
  - 输入范围以外的表单元素，:out-of-range
  - 选中的表单元素，:checked
  - 可选的表单元素，:optional
  - 事件启用的表单元素，:enabled
  - 事件禁用的表单元素，:disabled
  - 只读的表单元素，:read-only
  - 可读可写的表单元素，:read-write
  - 空的表单元素，:blank
  - 浏览中的元素，:current()
  - 已浏览的元素，:past()
  - 未浏览的元素，:future()
- 结构伪类
  - 文档根元素，:root
  - 无子元素的元素，:empty
  - 元素首字母，:first-letter
  - 元素的首行，:first-line
  - 元素中指定顺序索引的子元素，:nth-child(n)
  - 元素中指定倒序索引的子元素，:nth-last-child(n)
  - 元素的首元素，:first-child
  - 元素的尾元素，:last-child
  - 父元素仅有的元素，:only-child
  - 标签指定顺序索引的标签，:nth-of-type(n)
  - 标签指定倒序索引的标签，:nth-last-of-type(n)
  - 标签的首标签，:first-of-type
  - 标签的尾标签，:last-of-type
  - 父标签仅有的标签，:only-of-type
伪元素
- 在元素前插入内容，::before
- 在元素后插入内容，::after
优先级
- !important > inline style > id > class、 :a、 [attr] > element 、::after、::before > * 、 a b、a+b
继承性：不会影响页面布局
- 字体，font-*
- 文本，text-
- 列表，list-style
- 其他，visibility、cursor

2. 文档流

内容从左到右，从上到下排列，一行行，每一行又有多列显示，流式布局
块级元素占一行
内联元素一行中一列
脱离文档流，定位和浮动，父节点不包含其高度

3. 盒模型

标准盒子模型：box-sizing:content-box，content、padding、border、margin
IE盒子模型：box-sizing:border-box，content、padding、border、margin

4. 视觉格式化模型

display
- 占满一行，继承父元素宽度，多个块元素上下排列
- width、height生效
- padding、margin生效
inline
- 不占满一行，多个内联元素排成一行
- width、height不生效
- 竖直方向margin、padding不生效
inline-block
- 行内块元素，不单独占一行
- width、height生效
- padding、margin生效

5. 格式化上下文

BFC：Block Formatting Context，块级格式化上下文
- 一个独立的渲染区域，只有块级盒子，独立布局，与区域外无关
- 内部盒子在垂直方向放置
- 盒子垂直方向距离由margin决定，属于同一个BFC的两个相邻盒子margin会重叠
- 每个元素的margin的左边与border左边接触
- BFC不会与float盒子重叠
- BFC内部元素不影响外部元素，反之亦然
- 计算BFC的高度时，float元素参与计算
- 常见BFC：
  - html
  - 非溢出可见元素，overflow != visible
  - 设置浮动
  - 设定定位，position 为 absolute fixed
  - display：inline-block
- BFC应用场景
  - 自适应两栏布局
    - right-div设置 overflow:auto
  - 清除内部浮动造成父元素高度坍塌
    - 父元素设置 overflow:hidden
  - 防止垂直margin合并
    - bottom-div添加包裹元素，设置overflow:hidden
IFC：Inline Formatting Context，行内格式化上下文
- 块级元素中仅包含内联级元素
- 节点元素width、height无效，垂直方向margin、padding无效
- line box ,占据一行，高度由line-height计算决定
- IFC应用场景
  - 水平居中，display:inline-block;text-align:center;
  - 垂直居中，子元素撑开父元素，vertical-align:middle;
FFC：Flex Formatting Context，弹性格式化上下文
GFC：Grid Formatting Context，格栅格式化上下文

6. 层叠上下文

html文档根元素
position：absolute、relative，z-index不为auto
position：fixed、sticky
flex的子元素，z-index不为auto
grid的子元素，z-index不为auto
opacity属性值小于1
mix-blend-mode属性值不为normal

7. 值和单位

数值
- px
  - 设备物理像素，device pixels，屏幕分辨率
  - 设备像素比，dpr，dpr = 物理像素/逻辑像素(实际尺寸)，window.devicePixelRatio 表示1个css像素对应的物理像素值
  - 像素密度，DPI/PPI ，像素密度 = 屏幕对角线的像素尺寸 / 物理尺寸
  - 设备独立像素，DIP，dip=px*160/dpi
- em
  - font-size相对于父元素的font-size
  - width/height/padding/margin，相对于自身的font-size
- rem：root em
  - 相对于html根元素
  - 默认1rem=12px，根元素html font-size:16px，设置为html font-size:62.5%，即1rem=10px
  - iPhoneX 分辨率 375px*812px，UI设计稿width750px，设定1rem=100px，即设计稿上宽度100px的元素宽度，手机上是375/750x100=50px=0.5rem
- vw/vh：相对于视口viewport宽度和高度
  - 1vw=viewport宽度/100
  - 1vh=viewport高度/100
百分比
颜色
- 颜色关键字，146个
- transparent
- currentColor
- rgb
  - 16进制
  - 函数
    - rgb(255,0,0)
    - rgba(255,0,0,0.5)
    - rgb(100%,0%,0%,0.5)
    - rgba(100%,0%,0%,50%)
    - rgb(255 0 0 /0.5)
- hsl
  - 色相(hue)，0~360deg，0(360)红色，120绿色，240蓝色
  - 饱和度(saturation)，0~100%，0%灰色，100%全色
  - 亮度(lightness)，0~100%，0%暗，100%白
  - 不透明度
  - hsl(10,50%,50%,80%)
坐标
- left，top，right，bottom，background-position
函数：
- url，linear-gradient

8. 媒体查询

针对不同的设备定制不同的样式
head中link media=”screen”
@media(min-width:1024px){}

9. 自定义属性

:root{
    --theme-color:red;
}
div {
    color:var(--theme-color)
}

10. 1px边框

概念：移动端的1px边框比实际的1px要粗
原因：window.devicePixelRatio像素比不为1=物理像素/独立像素

解决办法：

0.5px边框：border-width:0.5px
border-image
background-image
多背景渐变
box-shadow
viewport设置initial-scale=0.5

伪类，transform

/*单边框*/
.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/*多边框*/
.scale-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

11. 清除浮动

概念：浮动脱离文档流，造成父元素高度塌陷
解决办法：
- 设置父元素 overflow:hidden
- 在浮动元素后设置一个空元素，clear:both
清除浏览器默认样式：normalize.css

长文本处理：数字、字母文本会超出容器，中文会换行

解决办法：

/*单行文本换行*/
span{
    overflow-wrap:bread-word;
}
/*单行文本省略号*/
span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/*多行文本省略号*/
span{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;/*文本行数*/
    -webkit-box-orient:vertical;
}

12. 水平垂直居中

水平居中
1
2
3
div {
text-align:center;
}

垂直居中

/*单行文本，inline,inline-block*/
div {
    padding-top:10px;
    padding-bottom:10px;
}
div {
    height:100px;
    line-height:100px;
}

/*固定宽高*/
.parent{
    position:relative;
}
/*1*/
.child{
    width:100px;
    height:100px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-50px 0 0 -50px;
}
/*2*/
.child{
    width:100px;
    height:100px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}
/*3*/
.child{
    width:100px;
    height:100px;
    position:absolute;
    left:calc(50% - 50px);
    top:calc(50% - 50px);
}

/*不固定宽高*/

/*1*/
.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

/*2*/
.parent{
    display:table-cell;
    vertical-align:center;
    text-align:center;
}
.child{
    display:inline-block;
}

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

/*4*/
.parent{
    display:grid;
}
.child{
    vertical-self:center;
    align-self:center;
}

13. 常用布局

13.1. 两栏布局

float+overflow:hidden BFC原理

.left{
    width:100px;
    float:left;
}
.right{
    overflow:hidden;
}

float+margin-left

.left{
    width:100px;
    float:left;
}
.right{
    margin-left:100px;
}

flex

.parent{
    display:flex;
}
.child1{
    width:100px;
}
.child2{
    flex:1;
}

grid

.parent{
    display:grid;
    grid-template-columns:100px auto;
}

13.2. 三栏布局

圣杯布局

<parent>
  <main></main>
  <left></left>
  <right></right>
</parent>

.parent{
    padding:0 200px;
}
.main{
    float:left;
    width:100%;
}
.left{
    position:relative;
    float:left;
    width:200px;
    left:-200px;
    margin-left:-100%;
}
.right{
    position:relative;
    float:left;
    width:200px;
    right:-200px;
    margin-left:-200px;
}

双飞翼布局

<parent>
  <main>
    <inner></inner>
  </main>
  <left></left>
  <right></right>
</parent>

.main{
    float:left;
    width:100%;
}
.inner{
    margin:0 200px;
}
.left{
    float:left;
    width:200px;
    margin-left:-100%;
}
.right{
    float:left;
    width:200px;
    margin-left:-200px;
}

float+overflow(BFC)

<parent>
  <left></left>
  <right></right>
  <main></main>
</parent>

.left{
    width:200px;
    float:left;
}
.right{
    width:200px;
    float:right;
}
.main{
    overflow:hidden;
}

flex

<parent>
  <left></left>
  <main></main>
  <right></right>
</parent>

.parent{
    display:flex;
}
.left,.right{
    width:200px;
}
.main{
    flex:1;
}

grid

<parent>
  <left></left>
  <main></main>
  <right></right>
</parent>

.parent{
    display:grid;
    grid-template-columns:200px auto 200px;
}

13.3. 多列等高布局

padding+负margin

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

.parent{
    overflow:hidden;
}
.child{
    float:left;
    width:33.33%;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

设置父级背景图片

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

.parent{
    background:url() repeat-y;
    background-size:100%;
}
.child{
    float:left;
    width:33.33%;
}

13.4. 三行布局

13.4.1. 头尾定高中间自适应

calc

<div class="layout">
    <header></header>
    <main>
        <div class="inner"></div>
    </main>
    <footer></footer>
</div>

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
    height:calc(100% - 100px)
}

absolute

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
}

.layout {
    position：relative;
}
header{
    position:absolute;
    width:100%;
}
footer:{
    position:absolute;
    width:100%; 
    bottom:0;
}
main{
    position:absolute;
    top:50px;
    bottom:50px;
    box-sizing:border-box;
}

flex

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
}

.layout {
    display：flex;
    flex-direction:column;
}
main{
    flex:1;
}

grid

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
}

.layout {
    display：grid;
    grid-template-rows:50px 1fr 50px;
}

14. 动画

div {
    animation: change 3s;
}
@keyframes change{
    0%{
        color:#000;
    }
    100%{
        color:#fff;
    }
}

15. less sass scss stylus

15.1. less简介

概念：一种css预处理语言

15.2. 使用方法

本地或者CDN引入，先引入less文件，且link的rel属性值为stylesheet/less, 再引入js库

1 2	<link rel="stylesheet/less" href="style.less"> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

npm安装

1 2	npm install -g less lessc styles.less > styles.css

15.3. 语法

15.3.1. 变量

普通变量

@color:#fff;
@bgColor:#000;

#div{
    color:@color;
    background-color:@bgColor;
}

/*解析*/
#div{
    color:#fff;
    background-color:#000;
}

选择器变量

@theDiv:#div;
@theClass:divclass;

@{theDiv}{
    color:#fff;
}
.@{theClass}{
    color:#fff;
}

/*解析*/
#div{
    color:#fff;
}
.divclass{
    color:#fff;
}

属性变量

@color:color;
@fz:font-size;

#div{
    @{color}:#fff;
    @{fz}:16px;
}

/*解析*/
#div{
    color:#fff;
    font-size:16px;
}

url变量

@image:'../img';
#div{
    background-image:url('@{image}/1.jpg');
}

/*解析*/
#div{
    background-image:url('../img/1.jpg');
}

声名变量

@fonts:{
    color:#fff;
    font-size:16px;
}
#div{
    @fonts();
}

/*解析*/
#div {
    color: #fff;
    font-size: 16px;
}

变量运算

@width:200px;
@color:#123;
#div{
    width:@width - 100;/*减号需要有空格*/
    margin:(@width - 10)*1;
    color:@color*2;
}
/*解析*/
#div {
    width: 100px;
    margin: 190px;
    color: #224466;
}

变量作用域

@var:@a;
@a:100%;
#div{
    width:@var;
    @a:50%;/*就近原则*/
}
/*解析*/
#div {
    width: 50%;
}

用变量去定义变量

@a:'内容';
@b:'a';
#div::after{
    content:@@b;
}
/*解析*/
#div::after {
    content: "内容";
}

15.3.2. 嵌套

&的用法，表示上一层选择器的名称

#div{
    &::after{
        content:'内容';
    }
    &_span{
        color:#fff;
    }
    .title{
        color:#fff;
    }
}

/*解析*/
#div::after {
    content: "内容";
}

#div_span{
    color:#fff;
}
#div .title{
    color:#fff;
}

媒体查询

#div{
    @media screen{
        @media (max-width:768px){
            color:#f00;
        }
    }
}

/*解析*/
@media screen and (max-width: 768px)
#div {
    color: #f00;
}

15.3.3. 混合

无参数方法

.style1{
    color:#fff;
    font-size:100px;
}
#div{
    .style1;
}
/*或者*/
.style1(){
    color:#fff;
    font-size:100px;
}
#div{
    .style1();
}

/*解析*/
#div {
    color: #fff;
    font-size: 100px;
}

默认参数方法

.style1(@a:#fff,@b:100px){
    color:@a;
    font-size:@b;
}

#div{
    .style1(#fff,200px)
}

#div {
    .style1()
}

/*解析*/
#div {
    color: #fff;
    font-size: 200px;
}
#div {
    color: #fff;
    font-size: 100px;
}

方法的匹配模式

.style(s1,@b:#fff,@c:100px){
    color:@b;
    font-size:@c;
}

.style(s2,@b:#f00,@c:200px){
    color:@b;
    font-size:@c;
}

.style(s3,@b:#fff,@c:300px){
    color:@b;
    font-size:@c;
}

#div{
   .style(s2,#ff0)
}

/*解析*/
#div {
    color: #ff0;
    font-size: 200px;
}

方法的命名空间

方法的条件筛选，when

#style1{
    .color(@width,@color) when (@width>300px) and (@color = #fff){
        color:@color;
    }
    .background(@color) when not (@color<#f00){
        background-color:@color;
    }
    .font(@size:20px) when (@size<50px) , (@size>100px){
        font-size:@size;
    }
}
#div{
    #style1 > .color(500px,#fff);
    #style1 > .background(#f0f);
    #style1 > .font(200px);
}

/*解析*/
#div {
    color: #fff;
    background-color: #f0f;
    font-size: 200px;
}

数量不定参数

.border(...){
    border:@arguments;
}
#div{
    .border(3px,solid,#f0f)
}

/*解析*/
#div {
    border: 3px solid #f0f;
}

方法使用!important

.style1{
    color:#fff;
}
#div {
    .style1() !important;
}

/*解析*/
#div {
    color: #fff !important;
}

循环

/* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

/* 解析 */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

属性拼接

逗号，+

/* Less */
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
  .boxShadow();
  box-shadow+: 0 0 20px black;
}
/* 解析 */
.main {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

空格，+_

/* Less */
.Animation() {
  transform+_: scale(2);
}
.main {
  .Animation();
  transform+_: rotate(15deg);
}

/* 解析 */
.main {
  transform: scale(2) rotate(15deg);
}

15.3.4. 继承

extend

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 解析 */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

all

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 解析 */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

15.3.5. 导入

import "main.less";
@import (reference) "bootstrap.less"; /*reference 导入外部less,但是不会编译输出，只引用*/
@import (once) "foo.less";/*once 相同的文件只会被导入一次*/
@import (multiple) "foo.less";/*multiple 相同的文件可导入多次*/

15.3.6. 函数

判断类型

isnumber，判断给定的值是否是一个数字

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

iscolor，判断给定的值是否是一个颜色
isurl，判断给定的值是否是一个 url

颜色
- saturate，增加一定数值的颜色饱和度
- lighten，增加一定数值的颜色亮度
- darken，降低一定数值的颜色亮度
- fade，给颜色设定一定数值的透明度
- mix，根据比例混合两种颜色
数学：ceil、floor、percentage、round、sqrt、abs、pow