css

CSS

目录

• CSS
  • css写法
    • 选择器
    • 优先级
  • 盒模型(margin塌陷)
    • 标准流
    • 浮动
    • 定位
  • css的属性
    • CSS3动画属性
  • css3布局
    • 三栏布局
    • 水平居中
    • 隐藏盒子
    • 页面渲染
  • 字体
  • SASS
  • 疑问

css写法

----------------------------------------------------------------------
1. 注释：/*  */ 在html文件里，要写在<style>标签里面才算生效
2. 用分号分隔属性
3. 缩进一定要写对，否则会显示错
----------------------------------------------------------------------
/* 行内样式 */
<p style="color:white;background-color:red">我</p>
/* 内嵌样式（内联样式）: 用<style>标签 */
<style type="text/css">
    p {
        font-weight: bold;
        font-style: italic;
        color: red;
    }
</style>
/* 外链样式: 先在 html 页面的同级目录下新建一个a.css文件，css文件里不用写<style>标签了，直接写里面的内容，再在页面的 head 标签里引入样式表文件 */
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
/* stylesheet定义的样式表, alternate stylesheet候选的样式表(备选一定要有title) */

去除css默认样式

/* CSS Reset：将所有的默认样式清零 */
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
/* Normalize.css：不同浏览器的默认样式不一致，那么，Normalize.css就将这些默认样式设置为一致 */

选择器

CSS选择器

#id {} 井号后面跟id名
.class {} 点后面跟类名
* {} 设置所有标签的格式
div p {} div后代中所有的p标签的格式
p.class1 {} 是p，同时class名是class1，的标签
p,div,#id {} 这几种标签都是这个格式
div > p {} div的儿子p标签的格式，不能是孙子
ul li:last-child {} 序列里的最后一个li标签，只能用在序列里
p + a {} p标签的下一个兄弟a标签的格式
div ~ p {} div标签后面所有的兄弟标签的格式

CSS伪类选择器：

1. a{}、a:link{} 、a:visited{} 、a:hover{} 、a:active{} css中a标签写在伪类的前面，这四种状态如果要写，必须按照固定的顺序写
2. a{}定义的样式针对所有的超链接(包括锚点); a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

• 静态伪类：只能用于超链接的样式
  • a:link{} :link超链接点击之前
  • a:visited{} :visited链接被访问之后
• 动态伪类：所有标签都适用的样式
  • a:hover{} “悬停”：鼠标放到标签上的时候
  • a:active{} “激活”： 鼠标点击标签，但是不松手时
  • input:focus{} 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

CSS3属性选择器

/* 通过属性选元素 */
/* CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容 */
E[title] /* 选中含title属性的E元素 */
E[title="abc"]/* 选中title="abc"的E元素 */
E[attr~="abc"] /* 选择 attr 多个属性值其中一个为val的E元素（"abc defg"以空格分隔的） */
E[attr|="abc"] /* 选择attr="abc" 或 attr="abc-defg"（“-”分隔的）。 */
E[title^="abc"] /* 选中属性值以 abc 开头的title 属性的E元素 */
E[title$="abc"] /* 选中属性值以 abc 结尾的title 属性的E元素 */
E[title*="abc"] /* 选中属性值中包含 abc 的title 属性的E元素 */
/* 用法 */
.attr2 a[class~="download"] {
    color: red;
}

CSS3伪类选择器

E:first-child /* 匹配E的父元素里的第一个子元素E */
E:last-child /* 匹配E的父元素里的最后一个子元素E */
E:nth-child(n) /* 匹配E的父元素里的第n个子元素E。注意，编号是从1开始的，n<1则无效，写n则选择全部E元素；写2n+1则表示选择所有的奇数位E元素；写7n则表示选择所有7倍数位的E元素；写-n+5则表示选择前5个E元素 */
E:nth-last-child(n) /* 匹配E的父元素的倒数第n个子元素E，写-n+5则表示选择后5个E元素 */
E:first-of-type /* 匹配同类型中的第一个同级兄弟元素E */
E:last-of-type /* 匹配同类型中的最后一个同级兄弟元素E */
E:nth-of-type(n) /* 匹配同类型中的第n个同级兄弟元素E */
E:nth-last-of-type(n) /* 匹配同类型中的倒数第n个同级兄弟元素E */
E:empty /* 匹配没有任何子节点（包括空格等text节点）的元素E */
E:target /* 匹配相关URL指向的E元素。要配合锚点使用 */
E:not(s) /* 匹配不含有s选择符的元素E */

CSS3伪元素选择器

/* 通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。 */
E::before /* 在元素 E 里的最上面插入内容，配合content属性一起使用 */
E::after /* 在元素 E 里的最下面插入内容，配合content属性一起使用 */
span::after{
    content:"永不止步";
    color:yellowgreen;
}

E::first-letter /* 设置元素 E 里面的第一个字符的样式 */
E::first-line /* 设置元素 E 里面的第一行的样式 */
E::selection /* 设置元素 E 里面被鼠标选中的区域的样式 */

优先级

1. 优先选择，作用在本身标签的css中权重最大的，权重相等就挑写在最后的css；没有作用在自身标签的css，就选离自身标签最近的标签的css，一样近就挑写在最后的css
   • 作用在本身标签：如果是文字，就是直接包裹文字的标签
   • 权重计算：#是一级，.是二级，其他三级，一级绝对碾压后面几级，二级也是。【不用管什么选择方式，只要数有几个#几个.几个其他就好，同级数量多的优先】
   • p{color:green !important;} 后面写上!important，如果作用在本身标签，那它就是特级，碾压其他，不作用本身，权重为0；如果p标签里还有别的属性，但没加!important，那这个属性还是要计算权重，听权重最大的css

盒模型(margin塌陷)

css盒模型：

从里到外依次是：内容、内边距（padding）、边框（border）、外边距（margin）

width和height
在标准盒模型中,指的是内容的宽度、高度；在IE盒模型中，指的是 内容区域+padding+border 的宽度和高度

盒子的宽高
盒子的实际宽度 = 内容的width + padding + border

padding内边距

如果内容区域设置了背景、颜色或者图片，这些样式将会延伸到 padding内边距上。

小属性写在大属性下面，则可覆盖(所有有综合属性的都有小属性大属性)
大属性
padding:50px 内边距，四边都空出指定值
padding:30px 20px 40px 100px; (上 右 下 左)（顺时针方向)
padding:10px 20px 30px; 只写三个值，则顺序为：上 右和左 下
padding:30px 40px; 上和下 左和右,等价于 30px 40px 30px 40px;
小属性
padding-top: 30px; 还有 padding-right、padding-bottom等等

border边框
border: 2px solid red; 综合属性（大属性），前两个一定要写
border-style: solid; solid实线 dashed虚线 dotted点线
border-left: none; 没有左边框

margin外边距
用来分隔相邻元素

1. margin塌陷：在标准流中，上下相邻的块元素的垂直方向的margin会塌陷，取最大的margin显示，而左右的margin不受影响；浮动就累加显示。上下嵌套的块元素，父盒子没有设置border或padding分隔，那么嵌套层的最上边和最下边的margin会塌陷
2. BFC：解决 margin 塌陷的办法，一个独立的渲染区域。计算BFC的高度时，浮动元素也参与计算
   • float: left;给父元素设置浮动，能解决嵌套父子的边界塌陷
   • position: absolute / fixed;设置成绝对定位元素
   • display: inline-block; 设置成行内块,两个盒子之间会存在间隙
   • display: table / table-cell / table-caption设置成表格单元
   • display: flex / inline-flex设置成弹性盒子
   • overflow: hidden;相邻或嵌套的俩元素设置其中一个，可解决它俩的边界重叠。设置它还可解决标准流盒子和浮动盒子重叠的问题
3. margin: 0 auto; 上下为0，左右自动，表示盒子居中 ；只有在标准流中才能使用，且使用它的盒子一定要明确的设置width
4. 连续浮动的元素，IE6中队首会出现双倍margin的bug，解决办法是让浮动方向和margin方向相反。float: left; margin-right: 40px;

标准流

1. 行内元素：除了p之外，所有的文本级标签（p、span、a、b、i、u、em），都是行内元素。p是个文本级，但是是个块级元素。【可以和别人并排，不能设置宽、高。默认的宽度，就是文字的宽度】
2. 块级元素：所有的容器级标签（div、h系列、li、dt、dd）都是块级元素，还有 p 标签。【霸占一行，能接受宽、高】
3. 内联块inline-block：如form表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）

• 块级元素 可以包含行 内元素
• 行内元素 一般不能包含 块级元素（在 HTML5 中，a > div 是合法的， div > a > div是不合法的）
• 块级元素 不一定能包含 块级元素（ p 标签中不能包含 div）

div{display: inline;} 块级元素转换为行内元素
div{display: block;} 行内元素转换为块级元素
display: inline-block; 内联块

div中：padding控制span与div边框的距离；line-height控制上下两行span之间的间距

span中：margin控制同一行左右两个span的间距

浮动

一般都把浮动关在不浮动的盒子里
div{float: left;} 设置浮动

1. 浮动元素脱离标准流，不区分行块，都能设置宽高，也就是没有浮动元素会换行的说法
2. 所有浮动元素在一个层面进行排列，非浮动元素在另一层面按标准流排列，彼此会有遮挡，但标准流中的文字不会被浮动的盒子遮挡
3. 一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度
4. 浮动元素的祖先标签是标准流限制宽度的，浮动元素的总宽度，超出了它的父辈标签的宽度，会掉下来。
5. 标准流里，父标签没有设置高度，儿子标签有高度，那么父标签能被儿子撑出高度。但儿子是浮动标签的，父标签是不能被儿子撑出高度的。
6. 浮动元素的盒子有高度，那么盒子内部会有浮动，且不会影响别的盒子的浮动。

清除浮动：清除浮动盒子与浮动盒子之间的影响

• 加高法（固定高度）：将浮动盒子框在标准流的盒子里，再给标准流的盒子设置>=浮动儿子的高度，这才能给浮动儿子足够的空间浮动
• clear:both;法（自适应内容高度）：给不浮动的盒子增加clear:both;（不允许左侧和右侧有浮动对象）表示自己的内部元素不受其他盒子的影响，但是margin会失效，两个盒子之间会没有空隙
• 隔墙法（算自适应吧）：在两个盒子之间，再放一个不浮动的盒子，这个盒子设置高度、设置clear:both;。但是第一个盒子，还是没有高度
• 内墙法（自适应内容高度，且浮动可竖着来）：隔墙法的升级版，在第一个盒子里增加一个不浮动的盒子，且设置这个盒子的高度和设置clear:both;，这样第一个盒子就能有高度了
• overflow:hidden;法（自适应内容高度）：给不浮动的盒子增加overflow:hidden;，玄学，本意是将所有溢出盒子的内容隐藏掉，但这可以让不浮动的父亲被浮动的儿子撑出高度

/* 最推荐的清除浮动法 */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1; /*兼容IE/7/6*/
}

浮动的兼容：

1. IE6不支持小于12px的盒子，解决办法是将盒子的字号大小，设置为小于盒子的高，然后这么写
   height: 10px; _font-size:0; 在属性前加个下划线就是专属IE6的，只有IE6才能识别
2. IE6不支持用overflow:hidden;来清除浮动，解决办法
   overflow: hidden; _zoom:1; 多加一条语句就行

定位

子绝父相：子孙会根据祖先的框（从padding开始）定位

1. 绝对定位：脱离了标准流；

   • absolute:父级标签中有position: absolute/relative属性，才会依据父容器进行偏移，否则以body为参考进行偏移;

   • 以body为参考：如果是top，代表以页面的左上角为参考点，而不是浏览器的左上角，也就是拉动滚动条，不会跟着移动。

   • 以body为参考：如果是bottom，代表以浏览器的首屏的左下角为原点，也是拉动滚动条，不会跟着移动。

2. 相对定位：不脱离标准流，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。以它原来的位置为基准偏移

3. 固定定位：脱离标准文档流。始终是以 body 为依据偏移，就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。IE6不兼容

div{
    position: absolute; /* absolute绝对定位、relative相对定位、fixed固定定位 */
    left: 50px; /* 子绝父相里，left定左边线位置，右边线位置可由width控制或用right，距右边多远这样 */
    right: 50px; 
    top: 50px; /* 纵坐标可以是top或bottom */
    width: 200px;
    z-index: 2; /* 控制层级数。只有定位了，才能有z-index属性，没有单位，谁大谁在上显示，祖先有这个值的，听祖先的 */
    } /* 格式一定要这么写，代表以左上角为原点的偏移 */

/* 居中 */
div {
    width: 600px;
    height: 60px;
    position: absolute;
    left: 50%;  /* 以父盒子的中间的左上角开始 */
    top: 0;
    margin-left: -300px; /* 写法1：向左移动内容的宽度（600px）的一半 */
    transform: translate(-50%); /*  写法2：向左移动内容的宽度（600px）的一半 */
} /* 让绝对定位中的盒子在父亲里居中，可以这么设置子盒子 */

/* 扩大点击热区 */
.button {
	position: relative;
	/* [其余样式] */
}
.button::before {
	content: '';
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
}

css的属性

----------------------------------------------------------------------------------------------------
1. css中的单位必须写（绝对单位：1 in英寸=2.54cm=25.4mm=72pt点或英镑=6pc皮卡，30deg顺时针方向30°）（相对单位：像素 px 或 em 或 %，相对周围的文字的大小。rem根元素(即html元素)的倍数）；html只有一种单位就是像素px，所以可以省略
2. 行高、字号，一般都是偶数
3. 想要让只有一行的文本在这行里竖直方向居中显示，可设置 行高 和padding，padding=（盒子高-行高*行数）/2
4. 页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman
----------------------------------------------------------------------------------------------------
/* font 字体属性 */
p{
    font-weight: bold;	/* bold粗体，normal正常，400是nomal，700是bold */
    font-size: 50px; /* 字号，font-size:100% 的意思是：让它们和父亲一样大，避免在不同的浏览器中显示大小不一致 */
    line-height: 30px; /*  行内元素的行高。行内元素尽量不要设置字号属性，高和行高儿子都会把父亲撑开，但背景图不会 */ */
    font-family: "Times New Roman","幼圆","黑体"; 	/* 字体类型：英文字体要在中文前面，中文匹配不了Roman，自动匹配后面的幼圆，没有幼圆字体就匹配黑体，再没有就匹配默认 */
    font: 400 14px/200% "宋体"; /* 这些可写成一行（格式 font: 是否加粗 字号/行高 字体  至少要有字号和字体），百分比的行高表示是字号的百分之多少，行高大于字号，所以大于100% */
    vertical-align: middle; /* 指定行级元素(图片、表格、文本)的垂直对齐方式。可达到去掉图片底侧默认的3像素空白缝隙的效果 */
    font-style: italic ;		/* italic表示斜体，normal表示不倾斜 */
    font-variant: small-caps;  /* 小写变大写 */
}

/* 文本属性 */
letter-spacing: 0.5cm; /* 单个字母之间的间距 */
word-spacing: 1cm; /* 单词之间的间距 */
text-decoration: none; /* 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线 */
text-transform: lowercase; /* 单词字体大小写。uppercase 大写、lowercase 小写、capitalize 每个单词首字母大写 */
color:red; /* 字体颜色 */
text-align: center; /* 在当前容器中的对齐方式。属性值可以是：left、right、center、justify */
direction: ltr; /* 设置文本方向：ltr从左到右 rtl从右到左 */
text-decoration: underline; /* 向文本添加修饰none underline overline Line-through blink */
text-indent: 2em; /* 首行缩进两个汉字，em单位代表一个汉字的宽度 */
white-space: ; /* 设置元素中空白的处理方式normal pre nowrap */
/* 让文字只显示一行，超出显示省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* 让文字最多只显示两行，超出后显示省略号 */
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

/* 文字换行*/
1. CJK 指中文、日文、韩文
2. 带`分隔符`的`短`的文本（如英文）
3. `长`串超过盒子宽度的文本（如url、超长英文单词）
/* 盒子宽度固定，文本总长度超出固定宽度，会不会自动断开换行 */
overflow-wrap: normal; /* normal 1和2换行3不换；break-word 1和2和3都会正确换行 */
word-break: normal; /* normal 1和2换行3不换；break-all 1和2和3都会换行，但2会被错误切开换行；keep-all 2换行1和3不换； */
/* 1. 空白符会合并；2. 换行符会作为空白符处理；3.遇到换行符会换行 */
white-space：normal; /* normal 1和2且换行；nowrap 1和2但不自动换行；pre 3但不自动换行；pre-wrap 3且会自动换行；pre-line 1和3且会自动换行  */
hyphens: none; /* none只会在有空白符的地方换行；manual只有在空白符和连接符的时候会换行；auto自动判断断行位置，会自动在断行处加上连接符 */


/* 列表属性 */
ul li{
	list-style-image:url(images/2.gif) ;  /*列表项前设置为图片*/
	margin-left:80px;  /*公有属性*/
}

/* overflow属性 */
overflow: visible;/*
visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
hidden：不显示超过对象尺寸的内容。
auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。 */

/* 上下滚动，不显示滚动条 */
.sku_list {
	margin-left: 25rpx;
	display: flex;
	flex-wrap: wrap;
	height: 617rpx;
	overflow: hidden;
	overflow-y: scroll;
	/* 去掉滚动条 */
	&::-webkit-scrollbar {
		display: none;
	}
}

/* cursor光标的属性，就光标的样子之类 */

/* 图片的属性 */
<img src="3.jpg" style="filter:gray()"> /* 图片变成灰度图，图片是插在盒子的内容区域的 */

/* 其他属性 */
outline-style:none /* 去掉轮廓，fieldset, img,input,button等标签可设置 */

/* 背景属性 */
div只设置高度，不设宽度，那么宽度是会随着浏览器窗口变化而变化的，此时给div添加背景图片，背景图片也会跟着动，可以用来展示超宽图片，这样就不会显示滚动条
/* 十六进制表示法 #f00=#ff0000
#000   黑
#fff   白
#f00   红
#222   深灰
#333   灰
#ccc   浅灰 */
/* HSLA 表示法 hsla(240,50%,50%,0.4)
H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
S 饱和度，取值范围 0%~100%。值越大，越鲜艳。
L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
A 透明度，取值范围 0~1。 */
background-color:#ff99ff; /* 设置背景颜色【将填充所有border以内的区域】。单词（blue）、rgb表示法（rgb(255,0,0)）、十六进制表示法、RGBA 表示法（rgba(0, 0, 255, 0.3)最后一个是透明度，取值0-1）、HSLA 表示法 */
opacity: 0.3; /* 当盒子设置半透明的时候，会影响里面的子盒子 */
background: transparent; /* 单独设置透明度，但透明度不可调节 */
background:red url(1.jpg) no-repeat 100px 100px fixed,
url(images/bg1.png) no-repeat left top; /* background是综合属性，就是可以把一些背景属性按这个格式写在这里。可以设置多个背景，用逗号隔开就好 */
background-image:url(images/2.gif); /* 将图像设置为背景。background-image是css属性，能更灵活的设置位置关系，而img不能；img是html标签，能更好的SEO，会优先加载 */
background-image: linear-gradient(to bottom或30deg, yellow, green); /* 设置线性渐变，向右或给角度，从黄变绿。 */
background-image: linear-gradient(30deg, yellow 0%, red 40%,green 70%, blue 100%); /* 设置线性渐变，设置在什么位置变色。 */
background-image: radial-gradient(100px at center,yellow ,green); /* 设置径向渐变，辐射的半径大小（还可以100px 50px就是椭圆）, 中心的位置（还可以at 50px 50px）, 起始颜色, 终止颜色 */
background-size: 500px或50% 500px或50%; /* 设置背景图片的尺寸，百分比的话是相对于容器的大小 */
background-size: cover; /* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域留白。 */
background-repeat: no-repeat; /* 设置背景图片是否重复及如何重复，默认平铺满（平铺会拉伸图片）、no-repeat不要平铺、repeat-x横向平铺、repeat-y纵向平铺 */
background-origin: padding-box; /* 控制背景从什么地方开始显示，padding-box从内边距开始（默认），border-box从边框开始，content-box从内容区域开始 */
background-clip: content-box; /* 超出的部分，将裁剪掉 */
background-position:center或100px top或-50px; /* 设置背景图片在当前容器中的位置，如果是数字就是以左上角为原点 向右偏移量 向下偏移量;如果以单词描述就是 描述左右的词 描述上下的词; */
background-attachment:scroll; /* 设置背景图片是否跟着滚动条一起移动。 属性值可以是：scroll（跟着滚动，默认）、fixed（背景会被固定住，不会被滚动条滚走） */
clip-path: circle(50px at 100px 100px); /* 裁剪出圆形区域，clip-path即使做了任何裁剪，容器的占位大小是不变的 */
clip-path: polygon(50% 0%，100% 50%，50% 100%，0% 50%，10% 10%); /* 按上右下左的顺序裁剪出一个多边形 */

/* CSS3处理兼容问题：私有前缀 */
/* 如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题 */
-webkit- /* 谷歌 苹果 */
-moz- /* 火狐 */
-ms- /* IE */
-o- /* 欧朋 */
background: -webkit-linear-gradient(left, green, yellow) /* 线性渐变 */

/* CSS3设置文本的阴影 */
text-shadow: 20px 27px 22px pink, 1px 1px 1px #000; /* 可设置多个阴影，每个阴影之间用逗号隔开。参数：水平位移（正值向右、负值向左） 垂直位移（正值向下、负值向上） 模糊程度（不能为负值） 阴影颜色 */
允许开发人员指定盒子宽度和高度的计算方式
box-sizing: content-box; /* 外加模式（css默认）表示设置 width 和 height 是内容区域的宽高，改变padding 和 border 的大小，只会改变总宽高，不会改变内容区域大小 */
box-sizing: border-box; /* 内减模式 表示设置 width 和 height 是盒子的总宽高，改变padding 和 border 的大小，只会改变内容区域大小，不会改变总宽高 */

/* CSS3边框圆角 */
/* 单个角的设置 */
border-top-left-radius: 60px 120px; /* 在左上角距离边框水平半径60px，垂直半径120px画一个椭圆 */
/* 4个角一起设置 */
border-radius: 60px / 120px; /* 水平半径/垂直半径，每一个角都是这个 */
border-radius: 10px 100px / 120px; /* 从左上角开始顺时针走，左上角10/120，右上角100/120，剩下没设置的角跟对角走，如果只设置了一个角，所有角都跟它走 */
border-radius: 20px 60px 100px 140px; /* 左上角半径为20的圆，右上角半径为60的圆，以此类推 */
border-radius: 10%; /* 取长的10%和宽的10%画椭圆，四个角都是这个 */

/* CSS3边框阴影 */
/* 设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局 */
box-shadow: 15px 21px 48px -2px #666; /* 水平位移（正值向右、负值向左） 垂直位移（正值向下、负值向上） 模糊程度（不能为负值） 阴影大小 阴影颜色 */
box-shadow:3px 3px 3px 3px #666 inset; /* 内阴影，不写inset默认外阴影 */

/* CSS3边框图片 */
border-image-source: url("images/border.png"); /* 边框图片的路径*/
border-image-slice: 30 30 30 30; /* 切割边框图片，距离上30切一刀，然后右下左。切割完后，四个角不动，其余部分配合拉伸，让它成为边框 */
border-image-width: 20px; /*图片边框的宽度。边框背景图片每条边的宽度应该跟对应的边框宽度（即border-width）相同*/
border-image-repeat: stretch; /* 边框图片的平铺。参数：repeat（正常平铺，但是可能会显示不完整）；round（平铺，为了保证图片完整会有稍稍变形）；stretch（拉伸显示） */
/* 综合写法 */
border-image: url("images/border.png") 30/20px round; /* 综合写法 */

CSS3动画属性

/* 平滑过渡（补间动画） */
transition-property: width; /* 设置当宽度发生变化时，补间动画。如果希望所有的属性都发生过渡，就用all。 */
transition-duration: 1s; /* 过渡的持续时间 */
transition-timing-function: linear; /* 运动曲线。属性值（linear 线性、ease 减速、ease-in 加速、ease-out 减速、ease-in-out 先加速后减速） */
transition-delay: 1s; /* 过渡延迟。1s后再执行这个过渡动画。 */
/* 综合写法 */
transition: all 3s linear 0s; /* 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间 */

/* 2D 转换 */
transform: scale(2, 0.5); /* 缩放。 水平方向的缩放倍数，垂直方向的缩放倍数。如果只写一个值就是等比例缩放。大于1表示放大，小于1表示缩小。不能为百分比 */
transform: scaleX(-1); /* x轴对称翻转 */
transform: rotate(90deg) scaleX(-1); /* 旋转以后再翻转 */
transform: translate(-50%, -50%); /* 位移。水平位移（左负右正）, 垂直位移（上负下正）。百分比是移动自身的50%，如果只写一个值，则表示水平移动 */
transform: rotate(405deg); /* 旋转。正值 顺时针；负值：逆时针。默认是以盒子的正中心为旋转的坐标原点的。旋转好几圈时和transition过渡连用，否则会一步到位 */
transform-origin: center bottom;  /* 设置旋转坐标原点。水平坐标 垂直坐标。或50px 50px这么写 */

/* 3D转换 */
/* 左手坐标系。浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴 */
/* 旋转 */
transform: rotateX(360deg); /* 绕 X 轴旋转360度，动画效果要+过渡 */
transform: rotateY(360deg); /* 绕 Y 轴旋转360度 */
transform: rotateZ(360deg); /* 绕 Z 轴旋转360度 */
/* 移动 */
transform: translateX(100px); /* 沿着 X 轴移动 */
transform: translateY(360px); /* 沿着 Y 轴移动 */
transform: translateZ(360px); /* 沿着 Z 轴移动，动画效果要+透视 */
/* 透视 */
perspective: 500px; /* 视觉上实现3D效果。1.设置给父元素，作用于所有3D转换的子元素 2.设置给自己 */
/* 3D呈现 */
transform-style: preserve-3d; /* 某个图形是由多个元素构成的，可以给这些元素的父元素设置这个来使其变成一整3D图形 */
transform-style: flat; /* 让子盒子变2D */


/* 定义动画1，写在style里 */
@keyframes 动画名{
    from{ /* 初始状态 */
        transform: translateX(0px) rotate(0deg);
    }
    to{ /* 结束状态 */
        transform: translateX(500px) rotate(555deg);
    }
}
/* 定义动画2，写在style里 */
@keyframes 动画名{
    0% {
        transform: translateX(500px) translateY(0px);
        background-color: red;
    }
    50% {
        transform: translateX(500px) translateY(200px); /* 移动是以原始坐标为原点移动的，0%时和50%时一样，所以会显得没动 */
        background-color: green;
    }
    100% {
        transform: translateX(0px) translateY(0px);
        background-color: red;
    }
}
/* 调用动画 */
.box {
    /* animation: 动画名称 持续时间 [执行次数(infinite 表示无限次)  是否反向  运动曲线 延迟执行] （综合属性，前两个必写，且顺序固定） */
    animation: move1 1s  alternate linear 3;
    /* 单个属性 */
    animation-name: move1; /* 动画名 */
    animation-duration: 4s; /* 持续时间 */
    animation-iteration-count: 1; /* 执行次数 */
    animation-direction: alternate; /* 动画的方向 normal 正常，alternate 反向 */
    animation-timing-function: ease-in; /* 运动曲线，参照上面的运动曲线。它还可以填steps(60), 会像逐帧动画一样，不连续，分60下完成 */
    animation-delay: 1s; /* 延迟执行 */
    animation-fill-mode: forwards; /* forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态 */
}

css3布局

/* flex 布局的子元素不会脱离文档流 */
display: flex; 或 display:inline-flex; /* 弹性盒子声明 */
flex-direction: row; /* 设置水平方向（主轴）上的排列方式。row 从左到右排列（默认）、column 从上到下排列、row-reverse	从右向左排列、column-reverse 从下到上排列 */
flex-wrap: nowrap; /* nowrap默认不换行，所有元素全挤在一行；wrap会换行，第一行在上方 ；wrap-reverse换行，第一行在下方 */
justify-content: flex-start; /* 设置子元素在水平方向（主轴）上的对齐方式。flex-start 往左对齐、flex-end 往右对齐、center 居中对齐、space-around 两端都不贴到对齐、space-between 两端都贴到对齐 */
align-items: flex-start; /* 设置子元素在垂直方向（侧轴）上的对齐方式。stretch 默认子元素被拉伸以适应容器；flex-start 顶部对齐、flex-end 底部对齐、center 居中对齐， baseline 基线 默认同flex-start   */
order: 1; /* 设置子元素的顺序 */
align-self: flex-start;/* 在弹性子元素上使用。覆盖容器的 align-items 属性。 */
flex: 1 1 auto; /* 综合写法。第一个参数为剩余空间(父宽-所有子宽)按比例分配，设有两子第一参分别为1和2，则分配剩余空间的1/3和2/3，如果第一参之和不满1，如0.1和0.2，那就分配剩余空间的0.1和0.2。第二个参数为空间不够了，要按比例缩小空间。flex-basis默认为auto即原本大小，设置后项目将占据固定空间。只写了1项代表设置了flex-grow，以此类推 */

/* grid 网格布局 */
/* grid 布局只对它的子元素生效，子元素的子元素不生效，且子元素的子元素float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效 */
div{
    display: grid; /* 块级标签采用网格布局用grid，行内元素用inline-grid */
    width: 100%;
    grid-template-rows: repeat(3, 33.33%); /* repeat(auto-fill, 100px) 自动填充100px的单元格，直到这列容不下为止*/
    grid-template-columns: 300px auto 300px;  /* 设置3栏布局 。 1fr 2fr 表示后者是前者的两倍*/
    grid-auto-rows: 50px; /* 已经写好了grid-template-rows&columns，比如3*3的网格，再写这行，表示新增的第4行，行高统一为50px */
    /*子元素 的位置是可以指定的 */
    grid-column-start: 2; /* 列，从第二根网格线开始 */
    grid-column-end: 4; /* 到第4根网格线结束 */
    grid-row-start: span 2; /* 还可这么设置，表示占两行单元格 */ 
    grid-row-end: 4; 
    grid-column: 1 / 3; /* 简写。start，end */
    grid-row: 1 / 2;
    grid-area: 1 / 1 / 3 / 3; /* 简写。<row-start> / <column-start> / <row-end> / <column-end> */
    
    grid-row-gap: 20px; /* 行间距 */
    grid-column-gap: 20px; /* 列间距 */
    grid-gap: 20px 20px; /* 简写。行间距，列间距 */
    grid-auto-flow: column; /* 默认是row，先填满行后列，column是先填满列后行。row dense表示"先行后列"，并且尽可能紧密填满。column dense，表示"先列后行"，并且尽量填满空格 */
    justify-self: start | end | center | stretch; /* 设置单个单元格中内容的水平对齐方式 */
    align-self: start | end | center | stretch; /* 设置单个单元格中内容的垂直对齐方式 */
    justify-items: start | end | center | stretch; /* 设置所有单元格中内容的水平对齐方式，左对齐，右对齐，居中，拉伸占满整个单元格 */
    align-items: start | end | center | stretch; /* 设置所有单元格中内容的垂直对齐方式，上对齐，下对齐，居中，拉伸占满整个单元格 */
    place-items: start end; /* 简写。垂直对齐方式，水平对齐方式 */
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly; /* 把网格线划分的单元格看成一个整体，这个整体在它的容器里的水平对齐方式 */
    align-content: start | end | center | stretch | space-around | space-between | space-evenly; /* 把网格线划分的单元格看成一个整体，这个整体在它的容器里的垂直对齐方式 */
}

/* 设置页面的宽高，撑满屏幕 */
.app {
	width: 100vw;
	min-height: 100vh;
}

用内联块display: inline-block布局，两个盒子之间会存在间隙

• 办法1：设置父元素的字体大小为0，即font-size: 0，然后设置子元素div1、div2的字体font-size: 12px。
• 办法2：在写法上，去掉div1和div2之间的换行。改为

<div class="div1">div1</div><div class="div2">div2</div>

三栏布局

1. 浮动布局：设置左盒子浮动、右盒子浮动。
2. 绝对定位布局：设置子绝父相，左中右盒子各设置绝对定位
3. 弹性布局：设置父盒子为弹性盒子，设置左右盒子宽度，中间盒子设置用完剩余空间的flex属性
4. 表格布局：父盒子设置display: table，设所有子盒子为表格里的单元display: table-cell，设置左右盒子宽。
5. 网格布局：设置display: grid; 设置总宽，网格行宽、列宽

水平居中

/* 行内元素水平居中 */
text-align: center; /* 可用 display:inline-block; 设置成行内元素，再用这个*/

/* 行内元素垂直居中 */
/* 让文字的行高 等于 盒子的高度，可以让单行文本垂直居中 */
height: 20px;
line-height: 20px;

/* 块级元素水平居中 */
margin: auto; 或者 margin: 0 auto;

/* 在父容器中水平垂直居中 */
/* 方式一：绝对定位 + translate（前面有写） */
/* 方式二：flex 布局 + margin: auto（前面有写） */

隐藏盒子

overflow：hidden; /* 方式一：隐藏盒子超出的部分 */
display: none; /* 方式二：隐藏盒子，而且不占位置(用的最多) */
visibility: hidden; /* 方式三：隐藏盒子，占位置；visible让盒子重新显示 */
opacity: 0;  /* 方式四：设置盒子的透明度（不建议，因为内容也会半透明），占位置 */
Position: top/left/...-999px /* 方式五：把盒子移得远远的，占位置 */
margin-left: 1000px; /* 方式六 */

页面渲染

• 重排（reflow）：需要整个页面的dom tree(DOM树)和render tree(CSS渲染树)全部重新渲染保证页面显示正确

  1. 添加或者删除可见的DOM元素（如设置display属性）
  2. 元素位置改变（如动画中用left/top移动位置，用translate移动则不会重排）
  3. 元素尺寸改变（大小，外边距，边框）
  4. 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
  5. 页面渲染初始化（无法避免）
  6. 浏览器窗口尺寸改变（resize事件发生时）
  7. 读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

• 重绘（repaint）：只需要对render tree(CSS渲染树)进行重新渲染

字体

支持程度比较好，甚至IE低版本的浏览器也能支持。

查字体是否可免费商用
https://fonts.safe.360.cn/

下载字体:
http://www.zhaozi.cn/
https://www.webfont.com/onlinefont/index
https://www.iconfont.cn/webfont#!/webfont/index

下载图标字体：
https://www.iconfont.cn/
https://fontawesome.dashgame.com/
https://www.bootcss.com/p/font-awesome/

/* 第一步：声明字体(字体下载后的说明文档里有) */
@font-face {font-family: 'my-web-font';
    src: url('font/webfont.eot'); /* IE9*/
    src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/webfont.woff') format('woff'), /* chrome、firefox */
    url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/* 第二步：定义一个类名，谁加这类名，就会使用 webfont 字体*/
.webfont{
    font-family: 'my-web-font';
}

SASS

Less/Sass是语法、Compass是框架、CSS是目标
sass 有两种后缀名文件
1 .sass：对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔
2 .scss：是css语法的超集，可以使用大括号和分号

sass main.scss main.css //将scss文件转化为css文件
sass-convert main.scss main.sass //将.scss转化为.sass

新建一个文件_variables.scss（文件名前面的下划线，意为声明成局部文件），这个文件专门用来存放变量，然后在其他的文件引入_variables.scss即可。

// 用 $ 声明变量
$font1: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
$font2: Arial, Verdana, Helvetica, sans-serif;
// 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
border-#{$side}-radius: 5px;
// 允许计算
margin: (14px/2);
// 允许嵌套
// 使用&引用父元素
a {
    &:hover { color: #ffb3ff; } //等价a:hover
}
// 可继承另一个选择器的css
.class2 {
    @extend .class1;
    font-size:120%;
}
//用@mixin定义可重用的代码块
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}
div {
    @include left(20px); //使用@include命令，调用这个mixin
}
// 提供了一些内置的颜色函数
complement(#cc3)
lighten(#cc3, 10%)
// 条件语句
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
// 循环语句
@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

//函数
@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

新建main.scss,引入变量文件

@import "variables";    // 引入变量文件
.div1{
    font-family: $font1;
}

疑问