CSS 全解

冷兔ex发布
2,525 阅读11分钟

CSS 基础

框架

赖先生 1994年提出CSS概念（层叠样式表），用于指定网页文档的样式和布局，用 html 标签分隔内容，分块，再用css控制距离、大小等属性。

CSS 框架内容备注
语法选择器 声明
@media
布局研究屏幕平面如何分布
新手推荐由小到大的布局思路		文档流：默认布局方式
脱离文档流：浮动、绝对定位、相对定位
float布局(IE专用) 父元素 .clearfix 子元素 float:left
flex布局(一维) 父元素display:flex
grid布局(二维) 父元素display:grid
定位研究垂直于屏幕如何分布positon:static默认值/relative相对定位/absolute绝对定位/fixed固定定位
动画

工具

  • 关键词 MDN

  • 关键词 CSS tricks

  • 最权威的标准 W3C 搜索 CSS specc

  • 张鑫旭的博客

  • 常用草图软件：Balsamiq、Figma、墨刀、Adobe XD

调试

  1. W3C验证器
  2. 用VScode、WebStorm编辑器看代码颜色
  3. 用开发者工具看警告：是否有选择器、样式是否被划掉、是否有警告
  4. Border调试法：border没出现，说明选择器或者语法错了
.a{
  color:red
  border: 1px solid red;  /*可控制在哪行来判断代码是否错误*/
}

常见错误：拼写错误（选择器、属性名、属性值、大小写）、没写分号、中文冒号、没写反花括号、没加单位。

引入

引入方式内容备注
行内样式直接在元素上，加style属性优先级最高
内部样式表直接写在<head>标签内，添加<style>标签
外部样式表用<head>标签内的<link>标签引入样式文件
// 行内样式
<p style="color:red"> 我是内联样式</p>

// 内部样式表
<style>
  p{color:red}
</style>

// 外部样式表
<link rel="stylesheet" type="text/css" href="style.css">

语法

CSS语法由选择器和声明组成。

/*语法一*/
选择器{
    属性名:属性值;    
    /*注释 区分大小写，注意分号*/
}

/*语法二*/
@charset "UTF-8";     /*必须放在第一行，必须以分号;结尾*/
@import url(2.css);   /*必须以分号;结尾*/
@media(min-width:100px)and(max-width:200px){
  语法一
}
选择器分类内容备注
全局选择器可与任何元素匹配；初始化优先级最低
基础选择器元素选择器
类选择器 (对应元素的class属性 用.)
id选择器 (对应元素的id属性 用#)
通配符选择器
关系选择器后代选择器：选择所有被祖先元素包含的后代元素
子代选择器：选择所有被祖先元素包含的直接子元素
相邻兄弟选择器：选择紧跟E元素后的F元素，相邻的第一个兄弟元素
通用兄弟选择器：选择E元素之后的所有兄弟元素F		后代 E F{}
子代 E>F{}
相邻兄弟 E+F{}
通用兄弟 E~F{}
// 全局选择器
*{
  margin:0;
}

// 元素选择器
<p>hello</p>

p{color:red}

// 类选择器
<p class='content size'> hello</p>

.content{color:red}
.size{font-size:14}

<!--后代选择器--> 
<ul>
  <li>benz</li>
  <li>BMW</li>
<ul>
ul li{color:green}

<!--子代选择器--> 
<div>
  <p>hello</p>
  <ul>
    <li>
      <p>nice</p>
    </li>
  </ul>
<div>
div > p {color:green}

盒模型

  • 盒模型可以想象为一个盒子里装东西content，这个东西跟盒子边框的距离就是padding，盒子的壳子厚度就是border，这个盒子的外边距margin。

  • 两种盒子在页面流和元素之间的关系上表现不同的行为。

image.png

image.png

块元素、行内元素

display: inline;         // 内联元素，比如 span
display: block;          // 块级元素，比如 div
display: inline-block;    // 内联块元素
display: flex;          // 弹性块
display: table;          // table块

span{第$个span元素}*8              // 按tab键快速输入8个span元素 
span.id{第$个inline-block元素}*4
文档流流动方向宽度高度
span
inline元素		从左到右由内联元素的总宽度决定
不接受指定宽度		由行高line-height间接决定，跟height无关
div
block元素		从上到下默认自动计算宽度auto不是100%
可由width指定		由内部文档流元素决定，可设置高度
内联块元素
inline-block元素		从左到右结合前两者特点
可由width指定		跟block类似，可设置高度

CSS中不要写宽度100%

当内容大于容器时，会溢出：

image.png

.div1{
  border:1px solid red;
  height:200px;
  overflow:hidden;  // 值可以取：visible/hidden/scroll/auto
}

脱离文档流：

span{
  position:absolute;  // 值为 absolute/fixed 或者是 float:left;
}

image.png

CSS 布局

把页面分成一块一块，按左中右、上中下等排列

布局方式内容备注
固定宽度PC端960 / 1000 / 1024px
不固定宽度手机端根据文档流原理布局
响应式布局PC端固定，手机不固定混合布局

文档流

指的是网页中元素默认的排列方式，自上而下，从左到右。文档中可显示对象在排列时所占用的位置，有很多不利限制，导致页面效果无法实现

脱离文档流

有三种方式：浮动、绝对定位、相对定位

浮动

浮动是用于让网页中同级下不能并排的盒子实现并排效果。

float属性定义元素向左或向右浮动。可实现元素的水平排列。

元素设置浮动以后，会脱离文档流造成父元素高度塌陷。

清除浮动方案：父元素设置高度、受影响的元素添加clear属性、overflow清除浮动、伪对象方式。

image.png

Flex布局

display:flex // 弹性盒模型。设置为flex后，可以控制下级盒子的位置
image.png

Flex布局是一种用于按行或按列布局元素的一维布局方法，举个🌰：

image.png

当元素<body>设置为Flex框时，就自动有了坐标轴和3个默认属性：flex-direction、justify-content、align-items

这个父元素即为flex容器，其内的子元素<p>即为flex项flex item，flex项沿着两个轴布局：主轴是沿着flex项放置的方向延伸的轴，交叉轴是垂直于flex项放置方向的轴。

  • 父元素
flex-direction:column;  
// 指定主轴的方向，默认为row 从左到右; column 从上到下

image.png

justify-content:center // 控制flex项在主轴上的位置
align-items:center    // 控制flex项在交叉轴上的位置，默认是stretch

image.png

image.png

image.png

  • 下级盒子
align-self:flex-end;

image.png

margin:auto;

image.png

flex:1
  • flex是由以下属性组成的缩写：
flex-grow:
flex-shirk:    // 用于溢出容器的 flex 项
flex-basis:
  • flex-flow
flex-direction:column;  // 指定主轴的方向，默认为row 从左到右
flex-wrap:wrap          // 指定flex项是否换行，默认为nowrap
// 可合并缩写为
flex-flow:column wrap

image.png

Grid布局

display:grid

image.png

布局方案选择

image.png

CSS 定位

布局是屏幕平面上的，定位是垂直于屏幕的

position属性值描述备注
static默认值
relative相对定位用于给absolute元素做爸爸
配合 z-index
absolute绝对定位（脱离文档流）定位基准是祖先里的非static
fixed固定定位（脱离文档流）相对于视口的定位
用于广告页、回到顶部按钮

相对定位

升起来，但不脱离文档流。

用法一：用于做位移

<div class="container">
  <div class="demo"></div>
</div>
.container{
  border:1px solid red;
  height: 300px;
}
.demo{
  border:1px solid green;
  width:50px;
  height:50px;
  position:relative;  /*占的位置不变，显示的有偏移*/
  top:10px;
}

image.png

用法二：用于给absolute元素做爸爸

用法三：配合 z-index

每个元素的 z-index属性 默认为auto，计算出的值为0，

image.png

绝对定位

脱离原来的位置，另起一层，比如对话框的关闭按钮：

absolute是相对于其祖先元素中第一个不是position:static定位的，即定位基准是祖先里的非static

image.png

固定定位

用于广告页、回到顶部按钮

div 分层

image.png

层叠上下文

某些DIV的渲染顺序是由z-index的值影响的。这些DIV的特殊属性可以使他们形成一个层叠上下文，

image.png

对于定位了的元素z-index = 0，在内联子元素的上方，对于定位元素z-index = -1就在background的下方，但不低于HTML元素。

image.png

CSS 动画

动画其实就是由多个静止的画面，也叫帧，以每秒30张的速度连续播放，人脑视觉错乱的把这些静止的画面当成了活动的。播放速度=每秒xx帧，游戏一般是30帧/s

js优化：使用requestAnimationFrame代替setTimeout或setInterval；

css优化：使用will-change或translate；

transform 变形金刚

动画v1.0

inline元素不支持transform，需要先变成block

有四个常用功能：

  • translate 位移

（比较生硬的动画效果，配合transition过渡会平滑很多，也就是translate只是1.0版本的动画，而transition就是2.0版本的动画，有点丝滑了，后面会说，看后面的实例代码也体现了这点）

transform:rotate(45deg) translateY(32px);
  • 缩放 scale
transform:scale(1.2);   /放大1.2倍
  • 旋转 rotate

用于360度旋转制作loading，到用时再搜索rotate MDN文档

transform:rotate(45deg) translateY(32px);   /先旋转45度，再沿y轴平移32像素
  • 倾斜 skew
transform:skewX(xx);
  • 多重组合效果和取消所有
transform:rotate(45deg) translateY(-100%,-100%);
transform:none;    /取消所有

transition

动画v2.0，平滑的效果，作用就是补充中间帧

transition: all .5s;    /所有属性过渡 0.5s

transition: 属性名 时长 过渡方式 延迟 /transition: left 200ms linear

不是所有属性都能过渡！

过渡必须要有起始，一般只有一次动画或者两次，中间点的话，就只有通过中继的方式：a先到b，b再到c，通过setTimeout或者监听transitionend事件，还有一种方式就是用animation。

animation 声明关键帧

动画v3.0与v2.0的transition相比，keyframes可以控制动画序列的中间步骤

  • 缩写语法animation:时长|过渡方式 |延迟 |次数 |方向 |填充模式 |是否暂停 |动画名

  • @keyframe完整语法：一种是from to；另一种写法是百分数。

  • 如何让动画停在最后一帧：加个forwards 或者搜索css animation stop at end

实例：

/* 语法2 */ 
@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

/* 语法2 */ 
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

transition版 制作爱心

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>
</body>
</html>

box-sizing:border-box属性：padding和border的值就不会在影响元素的宽高，相当于把padding和border的值都算在content里。盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整

*{
    margin:0;padding:0;box-sizing:border-box;
} 

#heart{
  margin:100px;                  
  position:relative;            /*00相对定位，父元素*/        
  display: inline-block;        /*快捷键为d:ib让border缩小*/
  transition: all .5s;       /*给图案加动画2.0效果，加了个渐进过渡的平滑效果，用transition的属性*/
}

#heart:hover{
  transform:scale(1.2);    /*给图案加动画1.0效果，只能生硬的变大，用transform的scale属性*/
}

#heart>.bottom{  
  width:50px;
  height:50px;
  transform:rotate(45deg);      /*把正方形旋转45度*/
  background: red;
  border-radius:0% 0% 10% 0%;
}
#heart>.left{  
  width:50px;
  height:50px;
  position:absolute;          /*00绝对定位，子元素以父元素为基准*/
  bottom:100%;                /*01定位调整，把left调整到bottom的上方.先让left的底边上去*/
  right:100%;                 /*01定位调整，把left调整到bottom的左上方*/
  transform:rotate(45deg) translateX(32px);     /*02格式调整，transform先加个旋转，再用translate整体平移，各种试值调到要的位置*/
  border-radius:50% 0% 0% 50%;         /*02格式调整，用border-radius的完整格式各种试值调到要的形状*/
  background: red;
}
#heart>.right{  
  width:50px;
  height:50px;
  position:absolute;          /*00绝对定位，子元素以父元素为基准*/
  bottom:100%;
  left:100%;
  transform:rotate(45deg) translateY(32px);
  border-radius:50% 50% 0% 0%;
  background: red;
}

/*写代码时，要先给元素加个边框，方便找到位置，敲完后再删去*/
/*border-radius:50% 0% 0% 0%  四个角圆形*/
/*易错1：不加>*/
/*易错2：中英文切换时标点符号忘切英文/

必须自己思考和写一遍这个过程，这样一些顺序和细节就会得到复习。

animation版 制作爱心

*{
    margin:0;padding:0;box-sizing:border-box;
}

#heart{
  display: inline-block; 
  margin:100px;                  
  position:relative;           
  animation: heart 800ms infinite alternate,liner;
  /*循环*/      
}

@keyframes heart{
  0%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.2);
  }
}

#heart>.bottom{  
  width:50px;
  height:50px;
  transform:rotate(45deg);      
  background: red;
  border-radius:0% 0% 10% 0%;
}
#heart>.left{  
  width:50px;
  height:50px;
  position:absolute;          
  bottom:100%;                
  right:100%;                 
  transform:rotate(45deg) translateX(32px);     
  border-radius:50% 0% 0% 50%;         
  background: red;
}
#heart>.right{  
  width:50px;
  height:50px;
  position:absolute;          
  bottom:100%;
  left:100%;
  transform:rotate(45deg) translateY(32px);
  border-radius:50% 50% 0% 0%;
  background: red;
}

CSS Sprite 精灵图

一种网页图片应用处理方式，允许将一个页面涉及到的所有零星图片都包含到一张大图中去。

CSS心得

  1. 不必全部都搞懂，只需要知道个框架和常用的东西就行，到用时再搜索rotate MDN文档；

  2. 梳理时，要学会看懂MDN的语法示例；

  3. css需要想象力，而不是逻辑；

  4. css给出的属性都很简单，但是可以组合得很复杂。

CSS 进阶

grid layout 网页自适应；

Mobile First 和 Desktop First 理念

博文内容来自饥人谷官网

avatar
文章
阅读
粉丝