伪元素

::before
- 也可以写成:before,前者更标准。选中开始结束标签之间靠近开始标签的位置且在页面中不可选中
::after
- 也可以写成:after,前者更标准。选中开始结束标签之间靠近结束标签的位置且在页面中不可选中
::first-letter
- 也可以写成:first-letter,前者更标准。选中第一个字（实现首字母下沉）
::first-line
- 也可以写成:first-letter,前者更标准。选中第一行（始终选中第一行，随着变化如浏览器窗口大小进行动态选中）

属性选择器

[属性名]
- 选中所有包含该属性的元素如：[title]（title 属性设置当鼠标悬停在元素上的提示文字）
[属性名=属性值]
- 选中所有包含该属性且为该属性值的元素如：[title=“哈哈”]
[属性名^=属性值]
- 选中以某字母开头的元素如：[title^=“h”]
[属性名$=属性值]
- 选中以某字母结尾的元素
[abc*=hhh]
- 选中该属性值abc中包含该hhh的元素

水平、垂直布局问题

子元素在父元素中，水平方向的值必须满足如下等式：
- 左边距（margin-left）+左边框+左内边距+width+右内边距+右边框+右边距=父元素的width
- 不满足等式的浏览器会自动调整
- 水平方向只有左右外边距和宽度能设置成auto（自动）
子元素在父元素中，如果父元素没有设置高度（浏览器会取默认值其值为auto），则父元素会自适应子元素的高度，确保能容纳所有子元素，如果父元素设置了高度且此时子元素的大小超过了父元素会溢出，溢出的部分不会影响页面其他布局。
溢出的部分可使用overflow来处理
- overflow：visible 默认值溢出的内容不会被裁减直接在父元素外部显示
- overflow：hidden 溢出的部分会被裁剪，超出父元素的部分不显示
- overflow：scroll 生成滚动条，可以通过滚动条查看完整内容（且无论有没有溢出都会出现滚动条）
- overflow：auto 根据需要自动生成滚动条，没溢出不生成滚动条

行内元素、内联元素盒模型

内联元素不支持设置宽度和高度（如span），但是垂直方向的padding不会影响页面的布局
内联元素可以设置边框但垂直方向不会影响页面布局

display(案例)

鼠标移入每个标题会显示该标题下的二级标题，不移入不显示

浏览器默认样式

浏览器会给我们没加样式的元素添加默认样式（如：边框、外边距），在开发时我们首先要去掉默认样式，可用reset.css

浮动 float

设置浮动后，元素会向页面左侧或右侧移动
设置浮动后，元素会完全脱离文档流，不再占据文档流中的位置，所以它下面的元素会自动上移
多个块元素同时设置同一属性的浮动（如多个div都设置float：left）会并排显示
设置浮动后元素脱离文档流的特点：
- 元素不设置宽度时（即默认宽度）宽度被内容撑开
- 元素不设置高度时（即默认高度）高度被内容撑开
- 块元素不再独占一行
- 行内元素设置浮动后也会脱离文档流，脱离后行内元素自动变为块元素（如：a标签可以像块元素一样设置宽高），特点和上面一样
- 元素不会在文档流（页面）中占据位置
文字不会被浮动元素所覆盖，而是环绕在浮动元素的四周，借此我们可以实现一个文字环绕图片的效果
float 高度塌陷
- 父元素没有设置高度默认情况下其高度会被子元素撑开，如果此时子元素设置浮动后，子元素会脱离文档流脱离文档流的元素无法撑起父元素的高度导致父元素高度丢失，父元素一旦丢失高度页面其他元素位置也会发生改变
  - 父元素无法被子元素撑开导致布局混乱

解决方案：
- BFC（Block Format Context）块级格式化环境
- BFC是元素的一个隐藏属性，一旦元素开启了BFC它将开启一个独立的布局区域
  - 开启了BFC的元素的垂直外边距不会传递给父元素（一个div的子元素div设置上边距时，父子元素会一起移动，而此时如果给父元素开启BFC则子元素会在父元素内部移动）
  - 开启了BFC的元素不会被浮动的元素覆盖
  - 开启了BFC的元素可以包含浮动的子元素（不会出现高度塌陷）
- BFC无法直接开启，需要通过一些属性开启
  - 设置元素浮动可以开启BFC
  - 将元素设置为行内块元素（display: inline-block）
  - 可以将元素懂得overflow设置一个非visible（非默认值）的值
  - 以上方法都有隐患
- 利用clear属性，用来清除浮动元素对当前元素的影响（原理是给当前元素设置一个与影响当前元素的浮动元素高度一样的外边距）
  - 可选值：
    - none：默认值不清除
    - left：清除左侧浮动元素对当前元素的影响
    - right：清除右侧浮动元素对当前元素的影响
    - both：清除两侧中对当前元素影响最大的一侧
- 最佳解决高度塌陷方案：给父元素的伪元素after设置clear属性（由于after是行内元素所以设置该属性无效果要将其变为块元素，并且content属性不能删，display属性也可选择table）

定位 position

只有当元素设置定位后才能用top、right、left、bottom进行定位
relative：相对定位元素开启后不会脱离文档流，相对于其在文档流中的位置进行定位（相对于自身原始位置）
开启相对定位（开启任意定位）的元素会提高一个层级（z-index，层级相同依据代码结构顺序层叠，父元素层级再高也不会叠在子元素上面）且不会改变元素性质（块级元素还是块级元素，行内元素还是行内元素）
absolute：绝对定位开启后元素完全脱离文档流并改变元素性质（参照float），开启后如果不设置偏移量（left、top等）元素位置不会发生变化。
绝对定位会相对于离它最近的开启了定位（任意非默认值）的祖先元素进行定位，开启绝对定位的元素会提升一个层级
开启定位后的元素布局
- 水平方向：左偏移量（left）+左边距（margin-left）+左边框+左内边距+width+右内边距+右边框+右边距+右偏移量（right）=包含块（离当前元素最近开启了定位的祖先块元素）的width
- 如果不设置左右偏移量默认值都是auto，此时想在包含块内水平居中就得要将左右偏移量设置为 0，再将水平外边距设置成auto（left：0；right：0；margin：0 auto）
- 垂直方向：如果想在包含块内垂直居中就将上下偏移量设置为 0，再将垂直外边距设置成 auto（top：0；bottom：0；margin：auto 0）
- 如果想在包含块内水平垂直都居中，将偏移量设置为 0，外边距设置为 auto（top：0；bottom：0；left：0；right：0；margin：auto）
fixed：固定定位会完全脱离文档流并改变性质（参照float）元素也会提高一个层级
只有设置了定位（任意定位）才能设置z-index属性固定定位

阿里图标库、图片和文字垂直对齐方式

当div里放一张图片时，图片底部会有空隙，这是因为图片默认和文字基线（baseline）对齐
解决办法可以给div设置font-size: 0，但此时div里的文字就看不见了。也可以让图片和文字底部对齐，给img设置vertical-align: bottom属性（文字垂直对齐方式）
当用 a 标签当img标签父元素时，IE8及以下浏览器会在图片周围显示蓝色边框，最好给 a 标签加上boder：0，就可以解决
保留文本初始格式
文字溢出带省略号

背景相关

雪碧图制作

http：//alloyteam.github.io

H5 标签

html

<input
  type="text"
  readonly
  autofocus
  required
  value="嘻嘻嘻"
  disabledautocomplete="off"
/>

readonly ：将属性设置为只读
autofocus ：自动获取焦点
required ：表单设置为必填项（表单内容不能为空）
value：设置默认内容
disabled：表单项变灰不可用
maxlength：表单可输入的最大长度
autocomplete="off"：自动填写关闭（关闭输入历史内容提示框，可在 form 标签设置此属性关闭所有表单历史提示）

base 标签的应用

统一管理a标签跳转方式
- 当页面中 a 标签很多时且需要都设置在新窗口打开，这时可以在head标签下添加base标签
- 这时只需一行代码就可以统一管理当前页面的所有a标签跳转方式

label 标签使用

这时用户点击“用户名”字体时也能使输入框获得焦点，同样input其他属性也可使用如单选按钮
label标签一般和input一起使用，能扩大input选择范围提高用户体验
第二种写法 <label>用户名<inputtype="text"></label>

计算函数和`css`过渡、动画、变形

calc()函数：能计算括号中算式
transition: steps(n,end) 2s、transition:steps(n,start) 2s：例如transition: steps(5,start) 2s，将动画分成 5 份完成，开始快结束慢（设置end就是开始慢结束慢）
transition里的时间函数cubic-bezier贝塞尔曲线，可从https://cubic-bezier.com/#.17,.98,.89,.05网站模拟自定义运动方式
css动画可以实现一些更加复杂的交互效果
要实现css动画，必须要设置关键帧
利用动画完成动图。不过这样写会有问题
- 本来有 8 张图片，现在导致第一张无法显示直接跳过
- 解决方案：应该在动画to（也就是动画执行到100%）里修改为图片最右边的位置（即996px）然后还需要将时间函数修改为 8 段并且是end（不写默认就是end）即原图片有几张就写几段，这里有 8 段
- animation可简写为一行，顺序如下
- css
```
animation: name duration timing-function delay iteration-count direction
  fill-mode play-state;
```
  animation：名称动画执行时间时间函数延迟时间动画循环次数是否轮流反向播放动画不播放时样式指定动画是否暂停
变形tansform
- tansform：translateX/translateY/translateZ：沿 x 轴方向平移。如tansform：translateX（100px）：沿 x 轴平移100px；tansform：translateX（50%）：沿 x 轴平移自己宽度的一半的距离
- 当我们需要给没有设置宽高的元素进行居中时可以利用此属性
- 例如图中box下的div的宽高是被内容撑开，这时就可以使用（注意平移属性书写顺序，顺序不同可能导致不能垂直居中，且可以简写属性如图所示，但还可以简写tansform：translate（-50%，-50%）
- 平移后不会影响页面布局
transform:translateZ：一般都需要设置视距perspective来使用，视距不宜太小一般800px-1000px
旋转
- transform:rotateX(50deg);沿x轴旋转50度一般写需要搭配视距来使用（没有视距也能显示但不真实）
- 使用时还需要加上transform-style:preserve-3d使得3D效果更加真实
- Backface-visibility：是否显示元素背面，默认值visible可见，hidden隐藏，可与变形旋转一起使用
- transform-origin指定元素变形的原点，如transform-origin: top center;如果此时再加上旋转这样元素会以上部中点的位置旋转，也可以指定特定值transform-origin: 20px 60px
- 放大：transform:scaleX(2)沿 x 轴放大 2 倍，transform: scaleY(2)沿 y 轴放大 2 倍，这两个属性不能同时写，否则写在上面的属性会被下面的覆盖，如果想 x 和 y 同时设置就需要使用transform: scale（0.2），这样就同时缩小 5 倍

双飞燕布局(案例)

利用纯css实现左侧内容固定宽度，右侧内容自适应宽度（双飞燕布局），只做了解。兼容到IE6

固定定位小算法(案例)

利用固定定位实现元素响应式固定位置，天蓝色元素始终在蓝色元素的某一位置，无论浏览器视口多大

html

<div class="box2"></div>
<div class="box1"></div>

css

.box1 {
  height: 3500px;
  width: 1000px;
  background-color: #00a4ff;
  margin: 50px auto;
}
.box2 {
  height: 100px;
  width: 50px;
  position: fixed;
  background-color: #00ffff;
  left: 50%;
  top: 50%;
  margin-left: 510px;
}

双飞燕布局改进

html

<div class="outer">
  <div class="left">左边</div>
  <div class="main">右边</div>
</div>

css

.outer {
  width: 100%;
}
.main {
  width: calc(100% - 200px);
  float: left;
  height: 500px;
  font-size: 50px;
  background-color: #00a4ff;
}
.left {
  float: left;
  font-size: 50px;
  width: 200px;
  height: 500px;
  background-color: orange;
}

calc计算函数能计算括号里的算式，注意calc属性里的空格不能省略，否则无法计算，存在兼容性问题，IE9（不包含IE9）以下不支持

渐变颜色

线性渐变

css

div {
  width: 500px;
  height: 500px;
  background-color: bisque;
  background-image: linear-gradient(to top, red, oldlace, bisque);
}

也可以写成

css

background-image: linear-gradient(to top, red, oldlace, bisque);

径向渐变

css

div {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(
    150px 200px,
    rosybrown,
    oldlace,
    orangered
  );
}

前面两个值可以指定横向和纵向的直径

动画实现简单轮播图(案例)

横幅图片自动切换，鼠标移入时停止切换

html

<div>
  <ul>
    <li><img src="./学成在线/imges/pic.png" alt="" /></li>
    <li><img src="./学成在线/imges/pic.png" alt="" /></li>
    <li><img src="./学成在线/imges/pic.png" alt="" /></li>
  </ul>
</div>

css

div {
  position: relative;
  width: 233px;
  height: 155px;
  overflow: hidden;
  margin: 50px auto;
}
div:hover ul {
  animation-play-state: paused;
}
ul {
  position: absolute;
  left: 0px;
  transition: 2s;
  animation: move 12s infinite;
  width: calc(233px * 3);
  height: 155px;
}
li {
  height: 100%;
  float: left;
  list-style: none;
}
@keyframes move {
  0% {
    left: 0;
  }
  50% {
    left: -233px;
  }
  100% {
    left: -466px;
  }
}

多行文本溢出省略

实现多行文本溢出用省略号隐藏,但兼容性差，IE 浏览器不支持

css

width: 100px;
height: 45px;
/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/*强制不换行*/
white-space: nowrap;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

三角形及多边形实现

只需将其中一个边框设置颜色，盒子内容为 0，再将上边框加大即可

css

width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 50px solid #00a4ff;
border-bottom: 0 solid #000000;
border-left: 0 solid #000000;

也可以简写为

css

width: 0;
height: 0;
border-color: transparent #00a4ff transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;

做出直角三角后只需定位即可完成这个效果

其他方式可参考 blog.csdn.net/weixin_29945371/article/details/118627815

html

<style>
  .e {
    width: 100px;
    height: 50px;
    background-color: brown;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
  }
  .e2 {
    margin-top: 20px;
    clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  }
</style>
<body>
  <div class="e"></div>
  <div class="e e2"></div>
</body>

less 基础语法(参考 16 天视频 )

可以直接进行计算，加减乘除都可以

less

div {
  width: 100+200px;
  height: 100px * 2;
  background-color: orange;
}

解析出的css

css

div {
  width: 300px;
  height: 200px;
  background-color: orange;
}

可以直接引用其他属性的值，引用后的值还可以继续运算

less

width: 100/2px;
height: $width;
/*height: $width*2;*/
background-color: blue;

解析出的css

css

width: 50px;
height: 50px;
/*height: 100px;*/
background-color: blue;

可以定义变量，可以存储类名，如果是 class 则要在@前面加点，如果是 id 则加#，也可以存路径
当出现相同变量不同值时，靠下的会把上面的值覆盖

less

@a:100px;
@b:blue;
@classname:box;
@a:200px;
.@{classname}{
	width:100/2px;
    background: url("@{classname}/imges/ad-l.png");
}
div{
	width: 100/2px;
	height: @a;
	background-color: @b;
}

解析出的css

css

.box {
  width: 50px;
  background: url('box/imges/ad-l.png');
}
div {
  width: 50px;
  height: 200px;
  background-color: blue;
}

每一个{}都是一个独立的作用域,此时box2不会取box里的变量 a，但如果box2在 box 里的话，那么会取box里的变量 a 的值，和js作用域类似，逐层查找

less

@a: 1000px;
@a: 200px;
.box {
  @a: 300px;
  width: @a;
}
.box2 {
  width: @a;
}

解析出的css

css

.box {
  width: 300px;
}
.box2 {
  width: 200px;
}

如果在一个作用域里想引用外面的值时可以这样写。
其中 w 前不能加@，不然会报错
此时的@@a 就是@w（写@a 解析的结果为 w，在前面加上@就可以解析出@w）

less

@w: 150px;
.box {
  @a: w;
  width: @@a;
}

解析结果

css

.box {
  width: 150px;
}

混合使用样式（mixins）,能复制一个或多个元素的属性样式，标签选择器不行（box3里不能是标签选择器，如 div）

less

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box2 {
  border: olive solid 1px;
}
.box3 {
  .box();
  .box2();
}

解析结果

css

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box2 {
  border: olive solid 1px;
}
.box3 {
  width: 100px;
  height: 100px;
  background-color: orange;
  border: olive solid 1px;
}

当我们需要使用某个元素里的后代元素的属性时也可以用这种方法，同样不能是标签选择器
在 box 里又写一个选择器表示这个box2元素是 box 的后代元素

less

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  .box2 {
    border-radius: 50%;
  }
}
.box3 {
  .box .box2();
}

解析结果

css

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box .box2 {
  border-radius: 50%;
}
.box3 {
  border-radius: 50%;
}

不过一般mixins不是用来克隆的，一般是用来给其他元素用的如公共样式
如果在公共样式.a后加上括号再用mixins，就不会出现代码重复的问题

less

.a() {
  text-decoration: none;
}
.a2 {
  .a();
}

解析结果

css

.a2 {
  text-decoration: none;
}

mixins写法后面加的括号是用来接收参数的，就像js里的形参,定义了形参后下面调用时需要传参，不然会报错
一般可以用来处理类名相同属性值不同

less

.a(@a,@b) {
  text-decoration: none;
  width: @a;
  height: @b;
}
.a2 {
  .a(100px,200px);
}

解析结果

css

.a2 {
  text-decoration: none;
  width: 100px;
  height: 200px;
}

mixins里的形参可以设置默认值,在形参后面加上冒号就可以设置
当参数有多个时，可以选择传递某一个值，这里传了高度那么宽度就取默认值

less

.a(@a:50px,@b:60px) {
  text-decoration: none;
  width: @a;
  height: @b;
}
.a2 {
  .a(@b:200px);
}

解析结果

css

.a2 {
  text-decoration: none;
  width: 50px;
  height: 200px;
}

用mixins来复制样式会造成代码重复，我们习惯把重复代码提取出来减少代码量，这时可以使用 extend
extend 可以将其他选择器的样式扩展到当前选择器上
在这里如果想连 box 的后代box2的样式一起使用，可以在后面加all，写法：.box3:extend(.box all){}
和上面的方法不同的是.box 可以使标签选择器如：.box3:extend(div){}

less

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  .box2 {
    border-radius: 50%;
  }
}
.box3:extend(.box) {
}

解析结果

css

.box,
.box3 {
  width: 100px;
  height: 100px;
  background-color: orange;
}
.box .box2 {
  border-radius: 50%;
}

子代选择器,&表示当前位置的外层元素，这里&代表ul，如果外面还有一层 div，那么&就表示div ul了

less

ul {
  border: 0;
  & > li {
    float: left;
  }
}

解析结果

css

ul {
  border: 0;
}
ul > li {
  float: left;
}

弹性盒

css3新增的一种布局方式，通过弹性盒可以使一个盒子自适应其容器大小，（IE9以下不支持，不包括IE9）
设置flex后子元素的float、clear、vertical-align属性将失效
弹性容器：弹性元素就是弹性容器，要使用弹性盒，必须先将元素设置弹性容器
设置方法
- display：flex：块级弹性容器
- display：inline-flex：行内弹性容器
弹性元素
- 弹性容器的子元素（除了子元素的其他后代元素不是弹性元素，所以也不具有弹性盒的特性）是弹性元素
- 当父元素变成了弹性容器后，里面的子元素不区分块元素和行内元素（比如和脱离文档流的 a 标签一样能设置宽高），和设置了浮动一样，但是不会脱离文档流
相关属性
flex-direction: row;默认值，让弹性元素在弹性容器中横向排列（自左向右和浮动的left相似），主轴是横向的

html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css

ul {
  border: #1c036c solid 2px;
  display: flex;
  flex-direction: row;
  list-style: none;
}
li {
  width: 100px;
  height: 100px;
}
li:nth-of-type(2n) {
  background-color: #00a4ff;
}
li:nth-of-type(2n-1) {
  background-color: orangered;
}

flex-direction: row-reverse;让弹性元素在弹性容器中横向排列（自右向左和浮动的right相似），里面元素顺序会改变，主轴是横向的
flex-direction: column;让弹性元素在弹性容器中纵向排列（元素自上向下排列），主轴是纵向的
flex-direction: column-reverse;让弹性元素在弹性容器中纵向排列（元素自下向上排列，元素顺序会发生改变）主轴是纵向的
当弹性容器的宽度小于里面弹性元素时，里面的元素不会溢出，而是将里面的弹性元素的宽度自动缩小，使得所有元素宽的总和刚好等于容器的宽度
flex-wrap: wrap;当弹性容器的宽度小于里面弹性元素时在主轴上自动换行，设置nowrap时不换行
当设置了display: flex;默认就是靠左对齐且不换行
flex-flow：column wrap；简写属性可以同时设置flex-direction和flex-wrap
当弹性容器的高度小于里面弹性元素时在主轴上自动换行，并且根据弹性容器宽度自动调整换行后外边距
justify-content设置元素在主轴上的对齐方式。以下都是子元素没有占满父元素内容的情况下
默认值flex-start主轴起边，如果设置flex-direction: row;（元素自左向右靠左边对齐，里面的元素顺序不变）
- flex-end主轴终边，如果设置flex-direction: row;元素自左向右靠右边对齐，里面的元素顺序不变。
- 如果设置flex-direction:row-reverse;元素自右向左靠左边对齐，里面的元素顺序改变。
- justify-content: center;元素居中
- justify-content: space-between;元素之间有相同的边距
- justify-content:space-around;前后两个元素都有间距，相当于给所有元素都设置了相同的左右边距
- justify-content:space-evenly;在各个元素之间设置距离，且距离相等
- justify-content:stretch;再给子元素设置flex-grow: 1;使用可拉伸盒子使其充满父盒子，flex-grow表示设置盒子的伸展
align-items: flex-start;设置辅轴对齐方式为以起边对齐（自上向下）

html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

css

ul {
  border: #1c036c solid 2px;
  display: flex;
  flex-flow: row wrap;
  justify-content: stretch;
  align-items: flex-start;
  list-style: none;
}
li {
  /* width: 100px; */
  height: 100px;
  flex-grow: 1;
}
li:nth-of-type(2n) {
  background-color: #00a4ff;
}
li:nth-of-type(2n-1) {
  background-color: orangered;
}

align-items: center;设置辅轴对齐方式为居中对齐（自上向下）

align-items: flex-end;设置辅轴对齐方式为以终边对齐（自上向下）
align-items: stretch;设置辅轴方向拉伸元素以使其填满（这时候不要给子元素li定高）
align-content: flex-start;：设置辅轴方向的空白分布方式。元素沿着辅轴起边对齐（当父元素不能装下所有子元素换行时）
align-content: flex-end;设置辅轴方向的空白分布方式。元素沿着辅轴终边对齐（当父元素不能装下所有子元素换行时）

align-content: center;设置辅轴方向的空白分布方式。元素沿着辅轴居中对齐（当父元素不能装下所有子元素换行时）

align-content:space-between;设置辅轴方向的空白分布方式。空白在元素中间（当父元素不能装下所有子元素换行时）
align-content:space-around;设置辅轴方向的空白分布方式。空白在元素周围（当父元素不能装下所有子元素换行时）
align-content:space-evenly;设置辅轴方向的空白分布方式。空白在元素周围不过周围空白相等（当父元素不能装下所有子元素换行时）
- 使用环境
flex-grow设置元素增长系数(当所有子元素不能占满父元素时，设置了该属性的盒子会被拉伸直至填满父盒子)

html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

css

ul {
  width: 1000px;
  border: #1c036c solid 2px;
  list-style: none;
  margin: 50px auto;
  display: flex;
}
li {
  width: 100px;
  height: 100px;
}
li:nth-of-type(1) {
  flex-grow: 1;
}
li:nth-of-type(2n) {
  background-color: #00a4ff;
}
li:nth-of-type(2n-1) {
  background-color: orangered;
}

当n个子元素都设置了flex-grow：1且父元素原本没有被占满时，会将父元素多余的空白处平均分成n份，然后再分给设置了该属性的子元素，如果其中一个元素设置了flex-grow：2那么这时会分成n+1份，然后这个元素多分一份，以此类推，设置 3 也是如此
**flex-shrink: 0;设置元素缩小系数。当父元素装不下子元素时，禁止元素缩小使其填满父盒子，这样会导致溢出，必须子元素都设置该属性，如果不设置会默认所有子元素都缩小相等倍数。相当于默认给所有子元素设置flex-shrink: 1;**
当n个子元素都设置了flex-shrink: 1;且子元素原本超过了父元素导致溢出，会将溢出的部分平均分成n份，然后每个设置了该属性的子元素都进行缩小，如果其中一个元素设置了flex-shrink: 1;那么这时会分成n+1份，然后这个元素多缩小一份，以此类推，设置 3 也是如此。就算子元素缩小还是不能填满父元素，那么子元素也不会消失以填满，会溢出。
当所有子元素不一定全部一样大时，这时每个元素缩小多少由元素的flex-basis和flex-shrink共同决定。当flex-shrink相同时flex-basis值越大的缩小的数值也越大
flex-basis: 100px;指定弹性元素的标准大小，一旦元素设置了数值且主轴是横向的则它的宽度自动失效取这个属性设置的数值。如果主轴是纵轴那么它的高度会自动失效取这个属性设置的数值
默认值是 auto 和它的宽度一样（主轴是横向的）
flex简写属性可以同时设置三个值，顺序是flex-grow flex-shrink flex-basis
flex还能简写
- flex：initial；相当于flex：0 1 auto
- flex:auto;相当于flex：1 1 auto
- flex：none相当于flex： 0 0 auto
order可以改变子元素在父元素里的排列顺序

html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

css

ul {
  width: 300px;
  margin: 20px auto;
  list-style: none;
  display: flex;
}
ul li {
  width: 100px;
  height: 100px;
}
li:nth-of-type(1) {
  background-color: #0086b3;
  order: 3;
}
li:nth-of-type(2) {
  background-color: #00ffff;
  order: 1;
}
li:nth-of-type(3) {
  background-color: #55a532;
  order: 2;
}

弹性盒（案例）

利用弹性盒实现布局自适应，随着浏览器窗口的改变，图片会随之缩放，但始终都是 5 个一行

html

<ul>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="./tb.ico" /></a>
  </li>
</ul>

css

* {
  padding: 0;
  margin: 0;
  user-select: none;
}
ul {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  flex: auto;
}
li {
  display: flex;
  justify-content: center;
  flex: auto;
  width: 20%;
}
a {
  width: calc(100% - 20px);
  border: 0;
  text-decoration: none;
  margin: 0 10px;
}
img {
  width: 100%;
}

grid 布局

可参考 doc.houdunren.com

声明容器

css

/* 这种方式声明的容器会独占一行 */
display: grid;
/* 这种方式声明的容器则不会 */
display: inline-grid;

设置行列

html

<style>
  .Warp {
    display: grid;
    width: 300px;
    height: 300px;
    /* 指定栅格系统行的个数(写入几个长度就是分为几行)及各自的长度(长度单位可使用 px、%、fr、vh 等) */
    /* 如果每行长度都一致可简写为 grid-template-rows: repeat(3, 100px); */
    grid-template-rows: 100px 100px 100px;
    /* 指定栅格系统列的个数(写入几个长度就是分为几列)及各自的长度(长度单位可使用 px、%、fr、vw 等) */
    /* 如果每行长度都一致可简写为 grid-template-columns: repeat(3, 33%); */
    grid-template-columns: 33% 33% 33%;
  }
  .d {
    /* 子元素可以设置宽高若不设置则占满栅格系统 */
    width: 50px;
    padding: 10px;
    background-color: blueviolet;
    /* 背景只将内容铺满 */
    background-clip: content-box;
    box-sizing: border-box;
    border: black 1px solid;
  }
</style>
<body>
  <div class="Warp">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
  </div>
</body>

repeat 使用

使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值

css

/* 如下写法等同于 grid-template-rows: 50% 50%; 相当于重复书写两个 50% */
grid-template-rows: repeat(2, 50%);
/* 如下写法等同于 grid-template-columns: 100px 50px 100px 50px; 相当于重复书写两个 100px 50px */
grid-template-columns: repeat(2, 100px 50px);

auto-fill 响应式

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格而不用固定分为多少行/列

css

.wrapper-2 {
  display: grid;
  /* 只要容器放得下尽量展示在一行/列，放不下的会自动换行 */
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

比例划分

使用 fr 单位设置元素在空间中所占的比例

css

/* 如下写法是将容器分为 2 行，第一行占容器高度的 1 份，第二行占 2 份 */
grid-template-rows: 1fr 2fr;
/* 如下写法是将容器分为 4 列，第一列占容器宽度的 1 份，第二列占 2 份，第三列占 1 份，第四列占 2 份 */
grid-template-columns: repeat(2, 1fr 2fr);
/* 如下写法是将容器分为 3 列，第一列占容器宽度的 1 份，第三列占 3 份，剩余空间全部由第二列占有 */
grid-template-columns: 1fr auto 3fr;

长度限制

minmax 表示栅格系统某一行/列长度范围

css

/* 表示每行的长度范围在 50px - 75px 之间 */
grid-template-rows: repeat(2, minmax(50px, 75px));

间距

css

.Warp {
  display: grid;
  width: 300px;
  height: 300px;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  /* 控制每行的间距，如果每行长度是固定长度那么容器内容会超出容器，内容可能会盖住下一行的元素 */
  row-gap: 20px;
  /* 控制每列的间距，如果每列长度是固定长度那么容器内容会超出容器 */
  column-gap: 10px;
  /* 上面两条样式可简写为如下写法 */
  gap: 20px 10px;
}

元素定位

栅格线定位

根据栅格线序号填充元素，行/列序号从上至下/从左至右由 1 开始依次累加

html

<style>
  .Warp {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 1fr);
  }
  .d1 {
    background: red;
    /* 起始行数 */
    grid-row-start: 1;
    /* 结束行数 */
    grid-row-end: 2;
    /* 起始列数 */
    grid-column-start: 1;
    /* 结束列数 */
    grid-column-end: 3;
  }
  .d2 {
    background: red;
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
  }
</style>
<body>
  <div class="Warp">
    <div class="d1"></div>
    <div class="d2"></div>
  </div>
</body>

特殊情况

当给定值不为整数时，那么此条样式不生效，默认会和设置 1 样式一样

css

/* 这条样式不生效，浏览器表现出来的样式就和 grid-row-start: 1; 一样 */
grid-row-start: 2.5;

偏移量定位

使用 span 可以设置包含栅格的数量

html

<style>
  .Warp {
    display: grid;
    width: 300px;
    height: 300px;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 1fr);
  }
  .d1 {
    background: red;
    /* 起始行，当起始行是 1 时可以省略不写 */
    grid-row-start: 2;
    /* 表示从起始行填充几格 */
    grid-row-end: span 2;
    /* 起始列，当起始列是 1 时可以省略不写 */
    grid-column-start: 2;
    /* 表示从起始列填充几格 */
    grid-column-end: span 1;
  }
</style>
<body>
  <div class="Warp">
    <div class="d1"></div>
  </div>
</body>

简写方式

可以使用 grid-row 设置行开始结束栅格线，使用 grid-column 设置列开始结束栅格线。

css

grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;

/* 如上可简写为如下写法，简写方式可以使用栅格线序号也可以使用 span 偏移量 */
grid-row: 2/4;
grid-column: 1 / span 2;

grid-area

grid-area更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。
语法结构：grid-row-start / grid-column-start / grid-row-end / grid-column-end。

css

grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;

/* 如上可使用区域定位简写为如下写法，简写方式可以使用栅格线序号也可以使用 span 偏移量 */
grid-area: 2/1/4 / span 2;

排列方式

栅格排列

html

<style>
  .Warp {
    display: grid;
    width: 400px;
    height: 100px;
    /* 当分的份数长度不足以填满容器时可以设置栅格排列方式 */
    grid-template-columns: repeat(4, 60px);
    /* 和 flex 布局的排列对齐方式相似,如下设置栅格垂直居中对其，水平贴边留缝，注意带 content 是设置栅格排列的样式 */
    justify-content: space-between;
    align-content: center;
  }
  .d1 {
    background: red;
    height: 60px;
  }
</style>
<body>
  <div class="Warp">
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
  </div>
</body>

元素排列

控制所有栅格内元素的对齐方式

html

<style>
  .Warp {
    display: grid;
    width: 400px;
    height: 100px;
    grid-template-columns: repeat(4, 100px);
    /* 和 flex 布局的排列对齐方式相似，带 items 的就是控制元素对齐方式 */
    justify-items: center;
    align-items: center;
  }
  .d2 {
    background-color: blueviolet;
    /* 当元素不能填满栅格时可以使用对齐方式 */
    width: 60px;
    height: 60px;
  }
  .d3 {
    /* 也可以对某一个栅格设置对齐方式，注意是带 self 的就是控制某一个元素的对齐方式 */
    justify-self: end;
    align-self: end;
  }
</style>
<body>
  <div class="Warp">
    <div class="d1 d3">
      <div class="d2"></div>
    </div>
    <div class="d1">
      <div class="d2"></div>
    </div>
    <div class="d1"><div class="d2"></div></div>
    <div class="d1"><div class="d2"></div></div>
  </div>
</body>

组合简写

使用语法：垂直对齐方式水平对其方式

css

justify-content: space-between;
align-content: center;
/* 可以简写为如下样式，用于控制栅格对齐，使用语法：垂直对齐方式  水平对其方式 */
place-content: center space-between;

justify-items: start;
align-items: center;
/* 可以简写为如下样式，用于控制元素对齐，使用语法：垂直对齐方式  水平对其方式 */
place-items: center start;

justify-self: end;
align-self: end;
/* 可以简写为如下样式，用于控制某一元素对齐，使用语法：垂直对齐方式  水平对其方式 */
place-self: end;

移动端开发

快捷键meta加冒号加vp再按 tab 键
做移动端时必须写，pc端不考虑移动端时写不写都行
因为手机屏幕分辨率都不一样，所以我们在pc端使用的css像素就不好用了，这时我们可以使用vw这种单位，1vw=当前屏幕最佳视口大小的百分之一
1vw=当前屏幕最佳视口大小的百分之一移动端初始化特殊样式，只做解释Normalize.css中已经有这些代码

css

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,
a {
  -webkit-touch-callout: none;
}

引入Normalize.css用于移动端页面初始化
适配所有屏幕可以使用flexible.js，可以解决使用媒体查询繁琐问题，使用时注意给 body 设置最大最小宽度，设置后还需限制html的字体大小有一个限度

css

@media (min-width: 750px) {
  html {
    font-size: 50px !important;
  }
}

媒体查询

通过媒体查询我们可以为不同的设备，不同的屏幕大小设置不同的样式

css

@media 查询条件{
    样式
}
查询条件类型
all 适用于所有设备
print 适用于打印样式
screen 适用于屏幕

css 轮播图改进（案例）

使用动画实现无缝衔接效果

html

<div class="jk">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css

.jk {
  width: 300px;
  height: 200px;
  background-color: #e4e4e4;
  margin: 150px auto;
  overflow: hidden;
}
ul {
  width: 1800px;
  height: 200px;
  animation: move 10s infinite;
}
.jk li {
  width: 300px;
  height: 200px;
  float: left;
}
.jk li:nth-of-type(1) {
  background-color: #00a4ff;
}
.jk li:nth-of-type(2) {
  background-color: #63a35c;
}
.jk li:nth-of-type(3) {
  background-color: orange;
}
.jk li:nth-of-type(4) {
  background-color: #00a4ff;
}
.jk li:nth-of-type(5) {
  background-color: #63a35c;
}
.jk li:nth-of-type(6) {
  background-color: orange;
}
@keyframes move {
  33% {
    transform: translateX(-17%);
  }
  66% {
    transform: translateX(-35%);
  }
  100% {
    transform: translateX(-50%);
  }
}

回到顶部过渡动画

html

<style>
  body {
    /* 当页面触发滚动操作时（锚点跳转）以平滑过渡的形式滚动到指定位置 */
    scroll-behavior: smooth;
  }
</style>
<body>
  <a id="top" href="#bottom">去底部</a>
  <!-- 中间许多内容 -->
  <a id="bottom" href="#top">回到顶部</a>
</body>

滚动回弹

html

<style>
  .box {
    width: 300px;
    height: 100px;
    /* 监控 y 轴滚动也可以监控 x 轴 */
    scroll-snap-type: y mandatory;
    overflow: auto;
  }
  .box .item {
    width: 200px;
    height: 200px;
    /* 当滚动距离并没超过一个盒子的高度的一部分会自动回滚到该盒子的滚动起点 */
    scroll-snap-align: start;
    background-color: pink;
    font-size: 40px;
  }
  .item:nth-child(2) {
    background-color: aqua;
  }
  .item:nth-child(3) {
    background-color: red;
  }
</style>
<body>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>

css3 动画网站

webhek.com/post/css3-animation-sniplet-collection/#/

lhammer.cn/You-need-to-know-css/#/

csscoco.com/inspiration/#/./init

Bootstrap 使用

bootstrap 默认把设置了container类名的容器分成 12 份
.container：响应式布局容器 .container-fluid：流式布局容器百分比宽度（占全部视口），适合移动端开发
设置了 row 类名表示把一行内分成 12 份，具体在多大屏幕可以自定义设置多少份
col-lg大屏幕下的份数，col-md：中等屏幕下份数,col-sm:小屏幕下的份数,col-xs:超小屏幕下的份数
列嵌套
col-md-offset：列偏移如：col-md-offset-4：向右偏移 4 份
我们最好在外层加一个.row的盒子，这样就能将父元素的内容占满而且高度也和父元素一样高
我们可以在一个已经划分份数的盒子里再嵌套一个盒子，如下图。这时会把这个盒子又分为 12 份
列偏移可以使元素向右偏移（移动）
列排序可以使使元素向左向右移动，push 是向右移动，pull 是向左移动
相关属性
响应式工具 visible：显示…（visible-lg：只在大屏幕显示） hidden：隐藏（hidden-md：在中等屏幕下隐藏）

伪元素 ​

属性选择器 ​

水平、垂直布局问题 ​

行内元素、内联元素盒模型 ​

display(案例) ​

浏览器默认样式 ​

浮动 float ​

定位 position ​

阿里图标库、图片和文字垂直对齐方式 ​

背景相关 ​

雪碧图制作 ​

H5 标签 ​

base 标签的应用 ​

label 标签使用 ​

计算函数和css过渡、动画、变形 ​

双飞燕布局(案例) ​

固定定位小算法(案例) ​

双飞燕布局改进 ​

渐变颜色 ​

动画实现简单轮播图(案例) ​

多行文本溢出省略 ​

三角形及多边形实现 ​

less 基础语法(参考 16 天视频 ) ​

弹性盒 ​

弹性盒（案例） ​

grid 布局 ​

声明容器 ​

设置行列 ​

repeat 使用 ​

auto-fill 响应式 ​

比例划分 ​

长度限制 ​

间距 ​

元素定位 ​

栅格线定位 ​

特殊情况 ​

偏移量定位 ​

简写方式 ​

grid-area ​

排列方式 ​

栅格排列 ​

元素排列 ​

组合简写 ​

移动端开发 ​

媒体查询 ​

css 轮播图改进（案例） ​

回到顶部过渡动画 ​

滚动回弹 ​

css3 动画网站 ​

Bootstrap 使用 ​

伪元素

属性选择器

水平、垂直布局问题

行内元素、内联元素盒模型

display(案例)

浏览器默认样式

浮动 float

定位 position

阿里图标库、图片和文字垂直对齐方式

背景相关

雪碧图制作

H5 标签

base 标签的应用

label 标签使用

计算函数和`css`过渡、动画、变形

双飞燕布局(案例)

固定定位小算法(案例)

双飞燕布局改进

渐变颜色

动画实现简单轮播图(案例)

多行文本溢出省略

三角形及多边形实现

less 基础语法(参考 16 天视频 )

弹性盒

弹性盒（案例）

grid 布局

声明容器

设置行列

repeat 使用

auto-fill 响应式

比例划分

长度限制

间距

元素定位

栅格线定位

特殊情况

偏移量定位

简写方式

grid-area

排列方式

栅格排列

元素排列

组合简写

移动端开发

媒体查询

css 轮播图改进（案例）

回到顶部过渡动画

滚动回弹

css3 动画网站

Bootstrap 使用