CSS

计算机

创建时间:2020-02-25 14:00

字数:9.7k 阅读:

评论:

CSS

CSS
- 样式表
- 像素
- 选择器
- 文档流
- 盒子模型
- 重置样式表
- 浮动&clearfix
  - float
  - 高度塌陷
  - BFC
  - clear
  - 外边距异常
  - clearfix类
- 定位
- 字体
  - 文本属性
  - 图标字体
- 背景
  - 背景图
  - 渐变
- 表格
- 动画
  - 过渡
  - 动画
  - 变形
- 弹性盒
- 响应式布局
- less简介
  - 注释
  - 变量
  - 运算
  - 选择器
  - extend
  - mixin
  - 引入
  - 编译属性

层叠样式表，用于控制所有显示的表现。网页事实上是多层的结构，CSS可以控制每一层的样式，显示给用户的是最上层的样式。

样式表

CSS基本语法包括选择器和声明块。选择器可以选择页面中的指定元素，如p{}选中全部<p>标签。声明块指定选择器元素的样式，由多条声明组成，每个声明是一个名值对，使用name: value;。

可以使用内联样式，在style的属性值修改样式，这是CSS的语法。内联样式不统一，不便于维护。

1
2
3

<p style="color: green;font-size: 50px;">
绿色50像素
</p>

绿色50像素

可以在<head>里将样式写到<style>中作为内部样式表，对整个网页起作用，<style>标签内的区域属于CSS语法，不与HTML混合。CSS选择器可以选择相应的元素。

<style>
  p{
    color: green;
    font-size: 50px;
  }
</style>

外部样式表允许在多个网页里使用样式，将CSS样式编写到外部CSS文件中，然后通过<link>引入到网页中。CSS文件可以使用浏览器的缓存机制，加快网页的加载速度。

1	<link rel="stylesheet" href="style.css">

像素

物理像素由显示器决定，但在CSS像素中的使用的都是CSS像素，浏览器会将CSS像素转换为物理像素，PC端默认情况下两者等大。移动端的视口宽度一般为980px，使得其可以完整浏览PC端网站。不过最好还是实现移动端网站。

视口是显示的范围，是网页的窗口，放大网页时视口变小。在<head>中设定视口的大小，不同设备的最佳视口大小不同，下面表示将视口调整到完美视口。

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

由于不同设备最佳视口大小不同，不能使用px作为单位了，可以使用vw，100vw相当于视口宽度。可以考虑使用rem进行适配：将设计图中的1px的vw设为rem，随后使用rem作为单位，直接使用设计图中的px单位即可。注意某些浏览器可能会限制rem最小为12px，可以将rem的数值乘以10或100等。

选择器

常用选择器

元素选择器: 根据标签名选择元素，如p{}
id选择器: 根据id选择一个元素，如#id{}
类选择器: 根据class选择元素，class可以重复,也允许一个元素使用多个class，多个class间使用空格隔开，如.class{}
通配选择器: 选择全部元素，使用*{}

集合选择

.blue{
	color:blue;
}

/* 交集选择器 */
h1.blue{
	font-size: 30px;
}

/* 并集选择器 */
h2, h3{
	background-color: aqua;
}

关系选择

子元素选择器: 父元素 > 子元素
后代元素选择器: 祖先元素后代元素
下一个兄弟选择: 前一个 + 后一个
后边所有兄弟选择: 兄 ~ 弟

属性选择器

[属性]{}表示包含某属性的元素
[属性=值]表示某属性为某值的元素
[属性^=值]表示某属性以某值开头的元素
[属性$=值]表示某属性以某值结束的元素
[属性*=值]表示某属性包含某值的元素

伪类选择器

某些特殊状态的元素可以被划分在一类中，相当于有了类标签，被称为伪类，伪类以一个’:’开头表示。

-child系列和-of-type系列用于表示和位置相关的元素。

/* 第一个子元素 */
ul > :first-child{}
/* 最后一个子元素 */
ul > :last-child{}
/* 第1个子元素 */
ul > :nth-child(1){}
/* 全部子元素 */
ul > :nth-child(n){}
/* 偶数子元素 */
ul > :nth-child(2n){}
ul > :nth-child(even){}
/* 奇数子元素 */
ul > :nth-child(2n+1){}
ul > :nth-child(odd){}
/* 除了第3个元素 */
ul > :not(:nth-child(3)){}
/* 第一个li元素 */
ul > li:first-of-type{}
/* 空元素 */	
ul:empty{}
/* ... */

以下两个伪类常用于超链接。

:link 一般的链接
:visited 访问过的链接，只能修改颜色

以下是两个和鼠标相关的伪类。

:hover 鼠标移入的
:active 鼠标点击的

伪元素选择器

和伪类类似，相当于给特殊位置的文本增加了标签。伪元素使用’::’开头。

::first-letter 首字母
::first-line 首行
::selection 鼠标选中的
::before 元素的开始位置（首元素之前）
::after 元素的结束位置（伪元素之后）
::before和::after设置的是content增加的内容，这是CSS的语法。
1
2
3
4
div::before{
content: '「';
color: red
}

继承

父元素的样式会继承到后代元素中，背景、布局等相关的样式不会继承，text-，font-，line-，list-和color可以继承。

选择器权重

不同选择器选择相同的元素时，样式发生冲突时，选择器存在优先级，选择器越具体优先级越高。优先级相同的使用靠后的。

内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承没有优先级

在某一样式后加!important可以设置为最高的优先级，慎用。

文档流

文档流是最底层，是网页的基础，创建的元素默认都是在文档流中排列。元素主要由两个状态主要有两个状态，就是在文档流中和脱离文档流。

元素在文档流中的特点

块元素
- 块元素在页面中独占一行
- 默认宽度等于父元素宽度
- 默认高度等于子元素高度
行内元素
- 行内元素不会独占一行
- 行内元素在页面中自左向右水平排列，自动换行
- 行内元素的默认宽度和高度由子元素确定

盒子模型

CSS将页面中的所有元素都设置为矩形的盒子。盒子包括内容（content）、边框（border）、内边距（padding）和外边距（margin）。

边框

.box1{
  /* 内容区 */
  width: 200px;
  height: 200px;
  /* 边框 */
  border-width: 5px;
  border-color: gray;
  border-style: solid;
  
}

边框属性主要有

border-width: 边框宽度
border-color: 边框颜色，默认使用color值
border-style: 边框样式，包括solid实线、dashed虚线、dotted点线、double双线，默认值为none

可以为四边分别设置属性，如border-width=10px 20px 30px 40px，顺序为上、右、下、左。左侧缺少时使用右侧，下侧和左侧缺少是使用上侧。

可以直接使用border: 5px gray solid。

可以分别使用border-top或border-top-width。

内外边距

内边距使用padding，其可以影响盒子的大小，默认使用内容的背景颜色。

.box1{
  width: 300px;
  height: 150px;
  background-color: #bce;

  border-width: 5px;
  border-color: gray;
  border-style: solid;

  padding= 10px;
}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis consequatur maiores omnis aut iusto, non, doloribus nobis, quidem itaque modi praesentium aliquid. Ut unde dolorum minima et deleniti adipisci voluptatibus!

padding可也以使用padding-top等标签。盒子的可见框大小由边框、内边距和内容区确定。

外边距使用margin，使用方法与内边距类似。

margin允许负值。垂直方向的外边距可以重叠，兄弟元素的边距取两个外边距的最大值，如果边距存在负值，则边距取两者之和，两个均为负值取绝对值较大者。

父子元素的相邻外边距，子元素的外边距会传递给父元素。如果出现布局问题，可以考虑clearfix。

盒子的其它属性

box-sizing属性确定width和height属性控制的是内容区content-box（默认值）还是可见区border-box。

outline是轮廓，和border类似，但不影响盒子的布局。

box-shadow设置阴影，不影响盒子的布局。用例box-shadow: 20px 20px 20px rgba(0,0,0,.3)，指定右偏移、下偏移、边缘虚化和阴影颜色。

border-radius设置圆角，顺序为左上开始的顺时针。可以使用border-top-left-radius等。可以设置椭圆角，如border-top-left-radius: 20px 40px或border-radius: 20px / 40px，前者为水平半径，后者为垂直半径。

.box1{
  width:28em; 
  background-color: #bda; 
  padding: 10px; 
  box-shadow:20px 20px 20px rgba(0,0,0,.5); 
  border-radius:10px
}

宇宙に始まりはあるが終わりはない
無限
星にもまた始まりはあるが自らの力を持って滅び行く
有限
叡智を持つ者こそ最も愚かであるのが歴史からも読み取れる
海に生ける魚は陸の世界を知らない
彼らが叡智を持てばそれもまた滅び行く
人間が光の速さを超えるのは
魚たちが陸で生活を始めるよりも滑稽
これは
そんな神からの最後通告に抗った者たちによる
執念のエピグラフ

布局

子元素在父元素中的水平布局，必须保证子元素范围撑满父元素内容区的宽度，浏览器会将不足者默认调整margin-right。可以设置margin-left、margin-right、width为auto，其会充当被调整项。如果有多个auto，width优先调整。而margin-left和margin-right默认平分。width的默认值是auto。

.inner{
  /* 内容区 */
  width: 100px;
  height: 100px;
  ackground-color: #c7c;
  margin: auto;
}

在垂直布局上，可能出现子元素溢出父元素，可以在父元素中设置overflow属性，处理这种溢出。默认为visible，hidden将溢出部分裁剪，scroll生成滚动条，auto根据需求生成滚动条。

overflow-x和overflow-y分别处理水平方向和垂直方向的溢出属性。

玩家影响的输入方式是同步的，电路运行影响的输入方式是非同步的。
玩家拉下拉杆在两个边沿都是同步的；而中继器激活在两个边沿都是非同步的。
玩家按下按钮是玩家的动作，在上升沿是同步的；而按钮弹回是自行弹回，在下降沿是非同步的。拌线钩也是同样的道理。
玩家放置和破坏一个红石块在两个边沿都是同步的；而放置中继器时，中继器并不会立刻被激活，稍后中继器激活给出的是一个非同步的上升沿信号，破坏一个激活的中继器则会给出同步的下降沿信号。
这一点甚至表现在：玩家输入指令给出的信号是同步的，命令方块给出的信号是非同步的。

行内元素的盒子模型

行内元素不支持width和height，宽度和高度由内容确定。垂直方向的padding和margin不会影响布局，水平方向不会重叠。

可以设置元素的显示类型，使用display属性。

inline行内元素
block块元素
inline-block行内块元素，可以设置宽度和高度，又不会独占一行，类似图片。
table表格
none不显示

visibility控制元素的可视程度，默认为visible，hidden为不可见，但占据位置。

a{
  display: inline-block;
  width:100px;
  height:100px;
  background-color:#bd8;
  /* 若希望文字在元素内竖直居中，可以把line-height设置成与height相同 */
  line-height: 100px;
}

超链接

重置样式表

浏览器有着默认样式，默认样式的存在有可能影响页面的布局，一般将默认样式去除。

*{
  margin: 0;
  padding: 0;
}
``` 

更有效的方式是使用重置样式表。

```css
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

浮动&clearfix

float

可以用float设置浮动（left或right），浮动元素脱离文档流。浮动元素不会盖住文字，文字会环绕浮动元素。浮动元素会遮住非浮动元素，但不遮住其他浮动元素，且不会脱离父元素。

脱离文档流的元素不再占用文档流的位置，不再自动修改外边距以占满父元素宽度。行内元素脱离文档流后变为块元素，元素不再区分行内元素和块元素。

浮动诞生的本意是引入文字环绕，后来更普遍用于布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条练习</title>
    <style>
        .nav ul {
            list-style: none;
            padding: 0px;
        }
        .nav {
            width: 1205px;
            height: 48px;
            background-color: #ddd;
            margin: 30px auto;            
        }
        .nav li {
            float: left;
            line-height: 48px;
        }
        .nav a{
            display: block;
            text-decoration: none;
            color: #777;
            font-size: 18px;
            padding: 0px 39px;
        }
        .nav a:hover{
            background-color: #3f3f3f;
            color: #eee;            
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#" title="HTML系列教程">HTML/CSS</a></li>
            <li><a href="#" title="浏览器脚本教程">Browser Side</a></li>
            <li><a href="#" title="服务器脚本教程">Server Side</a></li>
            <li><a href="#" title="编程教程">Programming</a></li>
            <li><a href="#" title="XML系列教程">XML</a></li>
            <li><a href="#" title="建站手册">Web Building</a></li>
            <li><a href="#" title="参考手册">Reference</a></li>    
        </ul>
    </div> 
</body>
</html>

.header, .footer {
  border: 1px solid #333;
  background: #ccc;
  text-align: center;
}
.footer {
  clear: both;
}

.container {
  padding:0 220px 0 200px;
  overflow: hidden;
  text-align:center;
}
.left, .middle, .right {
  position: relative;
  float: left;
  min-height: 130px;
}
.middle {
  width: 100%;
  background: #bce;
}
.left {
  margin-left: -100%;
  left: -200px;
  width: 200px;
  background: #ceb;
}
.right {
  margin-left: -220px;
  right: -220px;
  width: 220px;
  background: #ebc;
}

header

middle

middle-content

left

left-content

right

right-content

footer

高度塌陷

浮动元素可能出现高度塌陷的问题，当父元素高度为auto时，浮动子元素无法将其撑开。

.outer{
  border: 10px red solid;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: silver;
  float:left;
}

BFC

合理的高度塌陷解决方案是BFC（块级格式化环境）。BFC是CSS的一个隐含属性，开启BFC后该元素会变为一个独立的布局区域。开启BFC后，元素不会被浮动元素覆盖，子元素和父元素的外边距不会重叠，可以包含浮动的子元素，从而解决高度塌陷。

开启BFC的方式有：

开启浮动（不推荐）
设置为行内块元素（不推荐）
将overflow设置为非visible，常用的是hidden

.outer{
  border: 10px red solid;
  overflow: hidden;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: silver;
  float:left;
}

clear

clear属性可以清除浮动元素的效果，可以设置left、right或both。原理是浏览器自动计算，为元素添加一个外边距。

.box1, .box2 {
  width:100px;
  height:100px;
  font-size:50px;
  padding: 10px;
}
.box1 {
  background-color: orange;
  float:left;
}
.box2 {
  background-color: pink;
  clear: left;
}

现在用clear解决高度塌陷。

.outer{
  border: 10px red solid;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: silver;
  float:left;
}
.inner::after{
  display: block;
  clear: both;
}

外边距异常

由于子元素外边距会传递给父元素，会出现外边距异常的问题。

.outer{
  width: 200px;
  height: 200px;
  background-color: #bfa;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: orange;
  /* 希望inner到左下角，但二者整体下移了 */
  margin: 100px 0px;
}

预期效果：

BFC解决方案：

.outer{
  width: 200px;
  height: 200px;
  background-color: #bfa;
  overflow:hidden; 
}
.inner{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 100px 0px;
}

伪元素解决方案：

.outer{
  width: 200px;
  height: 200px;
  background-color: #bfa;
  overflow:hidden; 
}
.outer::before{
  content: '';
  display: table;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 100px 0px;
}

clearfix类

针对上述问题的解决方案是：

.clearfix::before,
.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

定位

定位是一种更加高级的布局手段。使用position属性，取值有：

static：默认值，不开启定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位

开启定位后，使用偏移量进行定位，包括top，bottom，left，right。

相对定位

相对定位通过相对于自身在文档流的位置的偏移量来进行定位。相对定位后，元素层级提高，会盖住其他元素。相对定位不会使元素脱离文档流，不会改变元素的性质。

绝对定位

绝对定位使得元素脱离文档流，绝对元素会使元素层级提升。绝对定位相对于其包含块进行定位，正常情况下包含块是当前元素最近的祖先块元素，绝对定位的包含块要求开启定位。如果没有开启定位的祖先块，元素相对于根元素进行定位。

开启绝对元素后，仍然需要保证元素布局撑开，此时若没有auto则自动调整right。left和right默认为auto。垂直方向也必须满足撑开规则，此时会自动调整bottom。

.outer{
  width: 200px;
  height: 200px;
  background-color: #bfa;
  position: relative;
}
.inner{
  width: 100px;
  height: 100px;
  background-color: orange;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}

固定定位

固定定位是一种特殊的绝对定位，唯一区别在于其相对于视口进行定位，不随滚动条而移动。

粘滞定位

粘滞定位是一种特殊的相对定位，但其保证其不会移出相对于视口的某位置。

层级

元素的层级由z-index属性指定，值越高层级越大，显示时显示在上层。层级相同时靠后的元素显示在上层。祖先元素即使设置层级，也没有办法盖住后代元素。

字体

文本属性

color设置前景色，一般是指字体颜色。
font-weight，字重，一般用bold加粗，默认为normal。
font-style，可以设置斜体italic。
line-height，行高指文字占有的高度。可以设置像素或整数，整数表示字体高度的倍数，默认行高为1.33。字体框会在行高内垂直居中。
font-size设置字体大小。
font-family指定字体族，有五种预选值serif（衬线字体）、sans-srrif（非衬线字体）、mono-space（等宽字体）、cursive、fantasy。
一般这样写：
1
font-family: 'Courier New', 'Courier', monospace;
会从前至后选择可用的字体。

允许用户从服务端使用字体，@font-face需要注意版权问题。

<style>
@font-face{
    font-family:'xyzfont';
    src: url(xyz.ttf);
}
</style>

可以简写

1	font: bold italic 50px/2 'Courier New', 'Courier', monospace;

text-align水平对齐，可选left，right，center，justify。
vertical-align垂直对齐，可选baseline（默认基线对齐），top，bottom，middle，也可以输入值。

图片也默认使用基线对齐，这时可以使用vertical-align确保图片与父容器贴合。

text-decoration可选none（默认），underline，upperline，line-through。
white-space设置网页如何处理空白，可选值normal，nowarp不换行，pre保留空白。
text-indent设置首行缩进，可以用很大的负值来隐藏文字。
text-overflow设置字体溢出，ellipsis设置省略号。

.box{
    width: 11em;
    border: 1px red solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

震惊！某高校女生一夜刷完《马原2000题》

图标字体

将小的图标设计为字体，便于放大缩小和上色，图标是使用@font-face引入的。

引入Font Awesome：

1	<link rel="stylesheet" href="fontawesome-free-5.12.1-web/css/all.css">

使用图标字体的形式有三种：

类的形式：

1	<i class="fab fa-weixin"></i>

编码的形式：

<style>
    ul{
        list-style: none;
    }
    li::before{
    content:'\f103';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color:blue;
    margin-right: 10px;
    }
</style>

<ul>
    <li>百度一下</li>
    <li>你就知道</li>
</ul>

实体的形式：

1	<span class="fas"></span>

引入Iconfont：

1	<link rel="stylesheet" href="font_1651721_osdsotfjous/iconfont.css">

使用：

1	<span class="iconfont"></span>

背景

背景图

background-color可以设置纯色背景颜色。可以用background-image设置背景图片，可以同时设置这两者。

background-repeat设置背景图片重复方式，默认为repeat（平铺），repeat-x，repeat-y，no-repeat。

background-position设置背景图片的位置，如background-position: top center;也可以直接使用偏移量。

background-clip设置背景颜色的作用范围，默认为border-box，padding-box，content-box。

background-origin设置背景图片的原点，默认为padding-box，border-box，content-box。

background-size设置背景图片的大小，可选cover（比例不变，将元素铺满），contain（比例不变，确保完整），也可以直接设置值。

background-attachment确定背景图片是否随滚动条滚动，默认为scroll，可选fixed。

背景也具有简写background，需要注意必须先写origin再写clip，格式要求“position/size”。

将多个小图片合并成大图片，再通过background-position切换，可以有效解决切换图片时的加载延迟问题。这种技术被称为CSS-Sprite（雪碧图）。

渐变

background-image: linear-gradient(red, yellow)
background-image: linear-gradient(to right, red, yellow)
background-image: linear-gradient(45deg, red, yellow)
background-image: linear-gradient(.875turn, red, yellow)
background-image: linear-gradient(red, yellow, green)
background-image: linear-gradient(red, yellow 30px, green)
background-image: repeating-linear-gradient(red 15px, yellow 40px)
background-image: radial-gradient(red, yellow)= background-image: radial-gradient(ellipse, red, yellow)
background-image: radial-gradient(circle, red, yellow)
background-image: radial-gradient(30px 50px, red, yellow)
background-image: radial-gradient(50px 50px at 0 0, red, yellow)
background-image: radial-gradient(farthest-side at 0 0, red, yellow)
background-image: radial-gradient(closest-corner at 25px 25px, red, yellow)
background-image: repeating-radial-gradient(red 0px, yellow 20px)
background-image: repeating-radial-gradient(30px 40px, red, yellow)

表格

表格和块元素类似，但是可以设置width。

表格整体和单元格也都可以设置边框，border-spacing可以设置边框间距，如果希望单元格之间的边框重合，可以使用border-collapse: collapse。

table{
  width:100%;
  border: 1px solid black;
  border-spacing: 1px;
}
td{
  border: 1px solid black;
}

动力铁轨数\矿车类型	非运矿车	货运矿车	客运矿车	动力矿车
1	单格模型			多格模型
多格（未达到阈值）	多格模型
多格（达到阈值）	不存在	阈值模型		不存在

table{
  width:100%;
  border-collapse: collapse; 
}
td{
  border: 1px solid black;
}

动力铁轨数\矿车类型	非运矿车	货运矿车	客运矿车	动力矿车
1	单格模型			多格模型
多格（未达到阈值）	多格模型
多格（达到阈值）	不存在	阈值模型		不存在

设置隔行变色，可以使用伪类选择器。

1
2
3

tr:nth-child(2n){
  background-color: #eee;
}

事项	支付方式	价格
早餐	微信	6.00
午餐	支付宝	12.00
饮料	微信	4.50
晚餐	支付宝	6.80
雪糕	微信	10.00
图书	微信	51.00

元素的垂直居中也可以使用如下的方式，display: table-cell将元素设为单元格，于是可以使用vertical-align。

.box1{
  width: 200px;
  height: 200px;
  background-color: #bfa;
  display: table-cell;
  vertical-align: middle;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 0 auto;
}

以前的页面布局经常使用表格，但现在不常用了。

动画

过渡

transition:指定过渡时间，参数分别指定过渡的属性和时间。过渡需要具体数值才能计算，不能向auto过渡。

.box{
  width: 100px;
  height: 100px;
  background-color: #bfa;
  transition:all 0.3s;
}
.box:hover{
  width: 200px;
  height: 200px;
}

transition是简写属性：

transition-property指定过渡的属性，多个属性使用逗号隔开，all表示全部属性。
transition-duration指定过渡所需时间，单位为s或ms，可以对不同属性指定不同的时间，用逗号隔开；
transition-timing-function表示过渡的时序函数，默认为ease慢入慢出，linear匀速运动，ease-in慢入，ease-out慢出，ease-in-out慢入慢出。是时序函数使用贝赛尔曲线，可以用cubic-bezier()表示。也可以指定steps()，表示分若干步移动，第二个参数默认为end，表示在时间结束时执行移动，start表示在开始时执行。
transition-delay表示延迟。

.box2{
  transition:all 1s;
}
.box3{
  transition:all 2s;
}
.box4{
  transition:all 2s linear;
}
.box5{
  transition:all 1s linear 1s;
}
.box6{
  transition:all 2s steps(5);
}
.box7{
  transition:all 2s steps(5,start);
}

2s linear

1s liner 1s

steps(5)

steps(5,start)

动画

动画和过渡类似，可以实现动态效果，动画可以自动触发。设置动画效果，必须使用@keyframes设置关键帧，其中from和to表示0%和100%。

@keyframes move{
from{
  margin-left:0px;
}
to{
  margin-right:600px
}

animation-name动画使用的关键帧名。
animation-duration动画执行的时间。
animation-delay动画的延迟。
animation-timing-function动画执行的时序函数。
animation-iteration-count动画执行的次数，可选infinite。
animation-direction动画执行的方向，默认为normal，reverse反向运行，alternate会在重复执行时返回，alternate-reverse反向重复执行并返回。
animation-play-state设置动画的运行状态，默认为running，pause为暂停。
animation-fill-mode，动画的填充模式，默认为none，动画执行完毕回到原位置，可选forwards，动画执行结束后停在结束位置，backwards动画延迟等待时处于动画开始位置。both结合了forwards和backwards。

变形

通过CSS改变元素的形状和位置，不会影响页面的布局。使用transform，在其后使用函数。

translateX()沿X轴平移，百分比相对于自身，下同。
translateY()沿Y轴平移。
translateZ()沿Z轴平移。

可以用translate实现居中。

.box{
  background-color:#bce;
  position:absolute;
  left:50%;
  top:50%;-
  transform:translateX(-50%) translateY(-50%);
}

风雨同行，共克时艰。

块悬浮效果：

.box:hover{
  box-shadow: 0px 15px 30px rgba(0,0,0,.1);
  transform:translateY(-2px);
}

故事发生在从近未来到两百年后的历史跨度上，地球文明被三体用一种叫做智子的超级科技锁死，基础研究因而停滞不前。但人类仍然需要在此基础上不断前进来抵御即将到来的三体人的进攻，守卫自己的家园和人类文明。在更广大的基础上，三体文明和人类文明都是黑暗森林下的猎手，小心翼翼的保护好自己并且清理别人，为文明的存续而挣扎。

网页默认不支持透视，可以用perspective给网页设置视距，。

rotateZ()以Z为轴顺时针旋转。
rotateX()以X为轴顺时针旋转。
rotateY()以Y为轴顺时针旋转。

当元素旋转后，坐标轴也一同旋转。

backface-visbility设置背面是否可见。

translateZ(100px)

rotateZ(90deg)

rotateX(45deg)

rotateY(45deg)

不以中心旋转的物体，可以在外面套一个容器。

transform-origin可以设置变形操作的原点。

设置transform-style: preserve-3d，可以保证父元素及子元素作为一个整体的3d物体进行操作。

scaleY()表示X轴缩放。
scaleY()表示Y轴缩放。
scale()表示XY轴缩放。
scaleZ()表示Z轴缩放，必须对3D物体使用

##　弹性盒

弹性盒也是css中的布局手段，主要用于代替浮动。移动端效果较好，PC端有个别兼容性问题。

要使用弹性盒，必须将元素设置为弹性容器，使用display: flex或display: inline-flex。弹性容器的直接子元素叫做弹性元素。一个元素可以同时是弹性容器和弹性元素。

ul{
  list-style:none;
  padding:0px;
  width:600px;
  border:10px red solid;
  display: flex;

弹性容器

flex-direction指定弹性容器中弹性元素的默认排列方式，默认为row水平排列，可选row-reverse，column，column-reverse。弹性元素的排列方式称为主轴，侧轴与主轴垂直。
flex-wrap设置弹性容器的元素是否自动换行，默认为nowrap，可选wrap，warp-reverse沿副轴反向换行。
flex-flow：flex-direction和flex-wrap的简写属性。
justify-content，如何分配主轴的空白空间，默认为flex-start沿起边排列，可选flex-end沿终边排列，center居中，space-around空白平均分配给元素两侧，space-evenly空白平均分配给元素的间隔及外部，space-between空白平均分配给元素的间隔。

flex-end

space-around

space-evenly

space-between

align-items元素在副轴上如何对齐，默认stretch将每行元素设置为相等高度，flex-start，flex-end，center，base-line。

strentch
div
div
div
div
div
div
div
div
div
div

flex-start
div
div
div
div
div
div
div
div
div
div

center
div
div
div
div
div
div
div
div
div
div

align-content，如何分配副轴的空白空间，默认为stretch，可选flex-start，flex-end，center，space-around，space-evenly，space-between。

space-around
div
div
div
div
div
div
div
div
div
div

弹性元素

align-self覆盖当前弹性元素在容器中设置的align-items属性。
flex-grow指定弹性元素的伸展系数，默认为0，表示不伸展。当弹性容器有剩余空间时，元素按flex-grow的数值比例分配剩余空间。
flex-shrink指定弹性元素的收缩系数，默认为1，表示不收缩。当弹性容器不足时，元素按flex-shrink的数值乘元素的大小比例分配不足空间。
flex-basis指定元素在主轴上的基础长度，默认为auto，相当于使用width或height。
flex：flex-grow，flex-shrink，flex-basis的简写属性。initial相当于默认值1 0 auto，auto相当于1 1 auto，none相当于0 0 auto。
order指定元素的排列顺序。

ul{
  list-style:none;
  padding:0px;
  border:10px red solid;
  display: flex;
}
li{
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  font-size:18px;
}

flex-grow:0
flex-grow:1
flex-grow:3

应用

ul {
  width: 1172px;
  list-style: none;
  padding: 0px;
  display: flex;
}
li {
  line-height: 48px;
  flex-grow:1;
  text-align:center;
}

.header, .footer {
  border: 1px solid #333;
  background: #ccc;
  text-align: center;
}
.container {
    display: flex;
    text-align:center;
}
.left {
  background: #ceb;
  width: 200px;
}
.middle {
  background: #bce;
  flex: 1;
}
.right {
  background: #ebc;
  width: 200px;
}

header

left

left-content

middle

middle-content

right

right-content

footer

响应式布局

响应式布局使网站可以根据不同设备或窗口大小呈现出不同的布局。响应式布局的关键是媒体查询。

媒体类型使用@media 查询规则{}

媒体类型包括all，print打印设备，screen屏幕设备，speech屏幕阅读器。

媒体特性主要使用：min-width最小宽度和max-width最大宽度。

类型和特性的连接可以使用,（或），and（与），not（非）。

常用的断点有768px，992px，1200px。

@media (min-width:"768px") and (max-width:"1200px"){
    .box{
      background-color:#bfa;
    }
  }

less简介

less是一门css预处理语言，是css的增强版。

css支持变量，但兼容性不好。

html{
  --varcolor:#bfa
}
.box{
  color: var(--varcolor);
  width: calc(1000px/2);
}

less中增添了许多新特性，如变量的支持，mixin等。

注释

less的单行注释//，less的注释不会解析到css中，css注释/* */会解析到css中。

变量

@varcolor:#bfa;

.box{
  background-color: @varcolor;
}

变量可以存储类名、路径、属性名。当作为式子的一部分使用时，需要使用花括号。

@myclass:box;

.@{myclass}{
  background-image:url("./@{myclass}/img/1.png");
}

可以把属性值作为变量。

.box{
  width:100px;
  height:$width;
}

运算

1
2
3

.p1{
    width: 100px + 100px;
}

1
2
3

.p1 {
  width: 200px;
}

选择器

.box{//选择器嵌套
    .box2{//后代选择器
        font-size: 1px;
    }
    >.box3{//子元素选择器 
        font-size: 2px;
    }
    &:hover{//父元素选择器,表示当前
        font-size: 3px;
    }
    .outer &{
        font-size: 4px;
    }
    &-ok{//父元素选择器连接字符串
        font-size: 5px;
    }
    & &ing{//多个父元素选择器
        font-size: 6px;
    }
}

.box .box2 {
  font-size: 1px;
}
.box > .box3 {
  font-size: 2px;
}
.box:hover {
  font-size: 3px;
}
.outer .box {
  font-size: 4px;
}
.box-ok {
  font-size: 5px;
}
.box .boxing {
  font-size: 6px;
}

extend

用extend实现继承，实现方式是分组选择器。

.p1{
    width:100px;
}

.p2:extend(.p1){//继承
    height:100px;
}

.p1,
.p2 {
  width: 100px;
}
.p2 {
  height: 100px;
}

mixin

在使用类选择器时在其后加括号，其变为mixin，不会解析到css中。调用时将该mixin混入调用的位置。调用时可以省略括号。

.my-inline-block(){
    display: inline-block;
}

.my-block{
  display: block;
}

.p1{
    .my-inline-block();
    width: 100px;
}

.p2{
    .p1;
    width: 200px;
}

.my-block {
  display: block;
}
.p1 {
  display: inline-block;
  width: 100px;
}
.p2 {
  display: block;
  width: 200px;
}

mixin允许传入参数，这是主要用途。

.my-block(@w, @h,@color:#bfa){
    display: block;
    width: @w;
    height: @h;
    color:@color;//默认参数：#bfa
}

.p1{
    .my-block(200px,300px);//按顺序传参
}

.p2{
    .my-block(@h:300px,@w:200px,red);//按变量名传参
}

.p1 {
  display: block;
  width: 200px;
  height: 300px;
  color: #bfa;
}
.p2 {
  display: block;
  width: 200px;
  height: 300px;
  color: red;
}

less提供了若干预定义mixin。

.p1{
    color: average(red,yellow);
    background-color: darken(pink,20%);
}

.p1 {
  color: #ff8000;
  background-color: #ff5a77;
}

引入

可以引入其他的less文件，相当于复制粘贴，便于模块化处理。

1	@import "my-less1.less"

编译属性

可以在less插件里设置编译属性：

"less.compile": {
  "compress":  true,  // true => remove surplus whitespace
  "sourceMap": true,  // true => generate source maps (.css.map files)
  "out":       false, // false => DON'T output .css files (overridable per-file, see below)
}

compress确定输出的css是否压缩；courceMap会给出css与less的映射表，在调试时可以在检查元素中直接给出less文件的对应行数；out确定是否输出css。

article_txt