web前端——html+css知识点总结(下)

圆角

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

一个值：水平和垂直半径
两个值：水平半径 垂直半径

border-radius:20px
一个值：四个角的水平和垂直半径
两个值：左上右下 右上左下（水平和垂直半径）
三个值：左上 右上左下 右下（水平和垂直半径）
四个值： 左上 右上 右下 左下（水平和垂直半径）
八个值：左上 右上 右下 左下（水平半径）/左上 右上 右下 左下(垂直半径)
斜线前面是水平半径，后面是垂直半径
椭圆形，只需要设置圆角是50%
单位：px %

盒子阴影

盒子阴影
box-shadow：
阴影水平的位置 可以负值 正值向右侧移动 负值向左侧移动 必写
阴影垂直的位置 可以负值 正值向下侧移动 负值向上侧移动 必写
阴影模糊的值 不可以负值
阴影的尺寸 可以负值
阴影的颜色
内外阴影 inset(内阴影)
多个阴影中间用逗号隔开

文字阴影

text-shadow:
阴影水平的位置 可以负值 正值向右侧移动 负值向左侧移动 必写
阴影垂直的位置 可以负值 正值向下侧移动 负值向上侧移动 必写
阴影模糊的值 不可以负值
阴影的颜色 不写的话是和文字颜色一样的
多个阴影中间用逗号隔开

背景尺寸

background-size:
两个值：背景图片的宽度 背景图片的高度
一个值：背景图片的宽度 高度
contain; 图片放大或缩小到能够在盒子里完全显示出来，但是可能盒子的一个部分是空白的
cover 图片放大或缩小到能够完全覆盖整个盒子，图片的一部分可能是看不见的
单位：px %

背景的定位区域

background-origin
content-box; 内容区域
border-box; 边框区域
padding-box; 内边距区域（默认值）

背景的剪裁（绘制）区域

background-clip
content-box; 内容区域
border-box; 边框区域（默认值）
padding-box; 内边距区域

多个背景中间用逗号隔开
先写的在前面，后写的在后面

线性渐变

background: linear-gradient(red,blue);
渐变的颜色至少写两个
background: linear-gradient(red 100px,blue 200px , yellow 300px);
从0到100 是纯红色
100到200是红蓝渐变
200到300是蓝黄渐变
300以上是纯黄色
background: linear-gradient(to right,red,blue);
可以设置渐变的方向
to right
to left
to left top
to right bottom

60deg(单位deg表示角度)

background: repeating-linear-gradient(red 50px,blue 100px);
重复的线性渐变，重复的是50到100的位置

径向渐变

background: radial-gradient(red,blue)
渐变的颜色至少写两个
background: radial-gradient(red 50px,blue 100px)
从圆心到方圆50px范围内是纯红色
50到100px范围是红蓝渐变
100px以外是纯蓝色
background: radial-gradient(at center top,red,blue)
设置圆心的位置
at left top
at right bottom
at 100px 200px
at 100% 100%

background: repeating-radial-gradient(red 50px,blue 100px)重复的径向渐变

box-sizing

box-sizing: border-box;跟怪异盒模型一样
box-sizing: content-box;跟标准盒模型一样

用户调整元素尺寸

resize: horizontal;可以改变宽度
resize: vertical;可以改变高度
resize: both;宽度高度都可以改变
前面三个必须配合overflow：hidden/scroll/auto
resize: none; 不能改变元素的宽高

多栏布局

column-count: 3; 栏目数量
column-width: 200px; 栏目宽度
column-gap: 100px; 栏目与栏目之间的间隙
column-rule: 10px dotted red; 栏目与栏目之间的线
column-span: 1; 横跨的栏目数量：all

---

选择器

选择器分为三类:结构伪类选择器、属性选择器、状态伪类选择器

常用结构伪类选择器:

:first-child:
如p:first-child选择属于父元素的第一个子元素的每个<p>元素。
:nth-child(n) 选择指定的元素 n 可以是数字也可是数学公式 odd奇数 even偶数
:last-child
:nth-last-child(n)
:only-child

:first-of-type
p:first-of-type p标签的父元素里的第一个p

:nth-of-type(n) n 可以是数字也可是数学公式 odd奇数 even偶数
:last-of-type
:nth-last-of-type(n)
:only-of-type

属性选择器
[attribute^=value] attribute 属性名 value属性值 含有xx属性并且是以XX为开头的
[attribute$=value]含有xx属性并且是以XX为结束的
[attribute*=value]含有xx属性并且是只要属性值里含有xx就能选中

状态伪类选择器
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 选中的表单元素（只用在单选框和复选框里的）

---

弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

一、旧版弹性盒子

1. 给容器设置的属性
   (1) display：-webkit-box; 让元素变成弹性盒子
   不给容器设置高度的话，高度可以由内容撑开
   如果不给项目设置宽度的话，宽度由内容撑开
   如果不给项目设置高度的话，高度和容器相同
   如果给容器设置成弹性盒子，子元素水平排列
   (2) -webkit-box-orient
   -webkit-box-orient: horizontal;项目水平排列
   -webkit-box-orient: vertical;项目垂直排列
   (3) -webkit-box-direction: reverse;让项目倒叙排列
   (4)-webkit-box-pack 项目在主轴的排列方式
   -webkit-box-orient: horizontal;主轴是水平方向的时候
   -webkit-box-pack: end;
   -webkit-box-pack: center;
   -webkit-box-pack: justify;
   (5)-webkit-box-align项目在交叉轴的排列方式
   -webkit-box-orient: horizontal;主轴水平方向，交叉轴垂直方向
   -webkit-box-align: baseline;
   -webkit-box-align: end;
   -webkit-box-align: center;

2. 给项目设置的属性
   (1)-webkit-box-flex: 项目分配的分数

.box div:nth-child(1){width: 100px;}
.box div:nth-child(2){-webkit-box-flex: 2;}
.box div:nth-child(3){-webkit-box-flex: 1;}

第一个项目是固定的100px
第二个项目和第三个项目把剩余空间分配成3份
第二个项目占2/3
第三个项目占1/3
(2)**-webkit-box-ordinal-group:**项目排列到第几个位置

二、新版弹性盒子

1. 给容器设置的属性
   (1)display: flex;
   (2)display: inline-flex;
   (3)flex-direction 设置主轴的方向
   flex-direction: row;主轴是水平方向，起始端在左侧（默认）
   flex-direction: row-reverse;主轴是水平方向，起始端在右侧
   flex-direction: column;主轴是垂直方向，起始端在上面
   flex-direction: column-reverse;主轴是垂直方向，起始端在下面
   (4)justify-content当主轴是水平方向，起始端在左侧的时候flex-direction: row;
   justify-content: flex-end;
   justify-content:center;
   justify-content:space-around;项目与项目之间的距离是两边的二倍
   justify-content:space-between; 两端对齐
   (5)align-items 项目在交叉轴的位置
   flex-direction: row; 主轴是水平方向，交叉轴是垂直方向，起始端在上面
   align-items: flex-end;
   align-items:baseline;基线对齐
   (6)flex-wrap项目一行放不下是否换行
   flex-wrap: wrap;
   flex-wrap: wrap-reverse;
   (7)align-content项目多行的情况，如何排列
   align-content:flex-start;
   align-content:flex-end;
   align-content:center;
   align-content:space-around;
   align-content:space-between;
2. 给项目设置的属性
   (1)flex: 给项目分配的份数
   (2)order 项目排列到第几个
   (3)align-self 设置单独一个项目在交叉轴的排列方式
   给容器align-items:flex-end;
   给第二个项目设置align-self: flex-start;
   (4)flex-shrink 项目缩小的比例
   0 原来的大小
   1 默认值

一共有8个项目，每个项目是100px的宽度，一共是800px
容器宽度是600px,所以有200px超出了容器，200px配到到项目里
2:1:1:1:1:1:1:1
一共的权值：
2*200+1*200+1*200+1*200+1*200+1*200+1*200+1*200=1800
 
第一个项目
(2*200/1800)*200=44.44
100-44.44=55.56
第二个项目
（1*200/1800）*200=22.22
100-22.22=77.78
 

(5)flex-grow 项目放大的比例
0 是默认值

容器宽度是600px
有三个项目 每个项目宽度是100px，一共宽度是300，剩余空间是300
 
给第一个和第二个项目设置flex-grow:1
第一个项目宽度250
第二个项目宽度250
 
给第一个项目设置flex-grow:1
给第二个项目设置flex-grow:2
第一个项目宽度 200
第二个项目宽度 300

---

css预处理器（less）

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

好处：

• 结构清晰，便于扩展，适应性强，可读性强
• 可以方便地屏蔽浏览器私有语法差异
• 可以轻松实现多重继承
• 完全兼容 CSS 代码
• 减少重复的机械劳动，便于维护

注释

• // 注释1 不会被编译到css文件里
• /注释2/ 可以被编译到css文件里

2. 变量
3. 嵌套（&引用父元素）
4. 混入 混合
5. 继承
6. 运算
7. 导入其他文件

---

移动端布局

1. 固定布局: 在里把viewport加好，根pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白。
   优点：思路沿用PC端，上手简单。
   缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差
2. 流式布局:重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，。
   优点：流动布局可以很好解决自适应需求
   缺点：通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
3. 响应式做法:根据目标用户的访问设备的主要类型做三种或四种布局。 每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。
   优点：可以相对精确的控制显示效果
   缺点：可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
4. rem布局 rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。

<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scable=1.0,minimum-scable=1.0">  
<script>
        var deviceWidth = document.documentElement.clientWidth;
        if(deviceWidth > 720) deviceWidth = 720;
        document.documentElement.style.fontSize = deviceWidth/7.2 + 'px';   
</script>
/*
    viewport 视口     
    width=device-width  宽度等于设备的宽度
    user-scalable=no  是否允许用户缩放
    initial-scale=1.0 初始缩放倍数
    maximum-scable=1.0  最大缩放
    minimum-scable=1.0 最小缩放
*/

最大最小宽高
min-width:1000px 最小宽度是1000px 可以大于等于这个宽度 不可以小于这个宽度
max-width: 800px; 最大宽度是800px 可以小于等于这个宽度 不可以大于这个宽度
min-height:200px 最小高度是200px 可以大于等于这个高度 不可以小于这个高度
max-height: 200px; 最大高度是200px 可以小于等于这个高度 不可以大于这个高度

响应式

一个网站可以兼容多个终端。
页面的设计与开发应当根据用户行为以及设备环境进行相应的响应和调整。 响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
响应式布局是根据设备屏幕宽度不同适当调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。
响应式原理：
媒体查询是响应式的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面
优点：

1. 减少工作量，设计，代码，内容都只需要一份，多出来的工作量只是js脚本，css样式做一些改变
2. 节省时间
3. 每个设备都能得到正确的设计

缺点：
4. 会加载更多的样式和脚本资源
5. 设计比较难精准定位和控制
6. 老版本浏览器兼容不好

步骤：

1. meta标签的设置

2. 使用媒体查询适配对应的样式
   根据用户的设备做三种或四种布局，分别设置一套样式

3. 响应式图片和文字

常见设备划分

超小屏（手机）	小屏设备(平板电脑)	中屏设备（笔记本和台式电脑）	大屏设备（大台式电脑）
768px以下	768px—992px	992px—1200px	1200px以上

---

媒体查询

//大于1000 1.css
<link rel="stylesheet" href="1.css" type="text/css" media="screen and (min-width:1000px)"> 大于1000 1.css
//大于600 小于1000 2.css
<link rel="stylesheet" href="2.css" type="text/css" media="screen and (max-width:1000px) and (min-width:600px)">
//小于600 3.css
<link rel="stylesheet" href="3.css" type="text/css" media="screen and (max-width:600px)">
//横屏
<link rel="stylesheet" href="1.css" type="text/css" media="screen and (orientation:landscape)">
//竖屏
<link rel="stylesheet" href="3.css" type="text/css" media="screen and (orientation:portrait)">

在css 里设置媒体查询

 @media screen  and (max-width:1000px) and (min-width:600px){
    body{
        background: pink;
    }
    .box{
        column-count: 2;
    }

}
@media screen and (max-width:600px){
    body{
        background: yellow;
    }
    .box{
        column-count: 1;
    }
} 

移动端特殊处理

1、超小字体处理transform: scale()
2、iphone及ipad下输入框默认内阴影-webkit-appearance: none;
3、ios和android下触摸元素时出现半透明灰色遮罩
-webkit-tap-highlight-color: rgba(0,0,0,0)
4、动画定义3D启用硬件加速
5、Retina屏的1px边框 border-width:thin
6、圆角bug：部分Android手机圆角失效background-clip: content-box;
7、Input 的placeholder会出现文本位置偏上的情况 padding-top

单行文本变点状

white-space: nowrap; //强制文本不换行
overflow: hidden;
text-overflow: ellipsis; //文本超出的部分变点状

多行文本变点状方法一

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;

方法二、

.box{
line-height: 30px; 
height: 120px; //高度必须是行高的倍数，几行文本变点状倍数就是几
overflow: hidden;
position: relative;
}
.box:after{
content: '......';
position: absolute;
right:4px;
bottom: 0;
background: #fff;
padding-left: 3px;
}

长单词换行

word-break: break-all; 长单词被完全打破了，当前这行能放满，放不下再换行
word-wrap: break-word;长单词会先换一行，然后第二行开始放满再换行

---

过渡

1. transition-property: 参与过渡的属性
   多个属性的话中间用逗号隔开
   所有属性都参与过渡的话就写all

2. transition-duration:
   过渡的持续时间
   多个时间的话中间用逗号隔开(和参与过渡的属性是一一对应的)
   单位 s ms 500ms=0.5s=.5s

3. transition-delay:
   过渡的延时时间
   多个时间的话中间用逗号隔开(和参与过渡的属性是一一对应的)
   单位 s ms

4. transition-timing-function:
   过渡的速度变化曲线
   
   多个变化的话中间用逗号隔开(和参与过渡的属性是一一对应的)
   复合写法transition: width 1s linear 2s;
   中间用空格隔开
   如果各个属性过渡的效果不一样，中间用逗号隔开
   transition: width 1s linear 2s,height 2s ease-in 3s;
   过渡的持续时间是必须写的

元素的转换

1. 平移
   transform: translate(x,y)
   两个值的时候，第一个值表示x轴的位置，第二个值表示y轴的位置
   一个值的时候：这个值表示x轴的位置
   transform: translateY()仅沿y轴平移
   transform: translateX()仅沿x轴平移
   正值：向右向下平移
   负值：向左向上平移

2. 缩放
   transform: scale(x,y);
   两个值的时候：第一个值表示x轴缩放的倍数，第二个值表示y轴缩放的倍数
   一个值的时候：表示x和y轴同时缩放的倍数
   transform: scaleX()表示x轴缩放的倍数
   transform: scaleY()表示y轴缩放的倍数
   负值表示先翻转后缩放

3. 旋转
   transform: rotate();
   单位：deg 角度
   正数：顺时针
   负数：逆时针

4. 倾斜
   transform: skew();
   单位：deg 角度
   两个值的时候，第一个值表示x轴倾斜的角度，第二个值y轴倾斜的角度
   一个值的时候：表示x轴倾斜的角度
   transform: skewX()x轴倾斜的角度
   transform: skewY()y轴倾斜的角度

5. 改变元素变换的基准点
   transform-origin:x y
   两个值的时候第一个值表示x轴的位置，第二个值表示y轴的位置
   一个值的时候：第二个值默认是center
   可以写left right top bottom center
   还可以写px %
   复合写法 中间用空格隔开

6. 3d

transform: rotate3d(1,0,0,30deg); //沿x轴旋转
transform: rotate3d(0,1,0,30deg); //沿y轴旋转
transform: rotate3d(0,0,1,30deg); //沿z轴旋转
transform: rotateX(); //沿x轴旋转
transform: rotateY(); //沿Y轴旋转
transform: rotateZ(); //沿Z轴旋转

看如何旋转
方法一：左手定则
手握着轴，大拇指指向正值或者负值的方向，看其他四个手指头的根到尖的方向
方法二：
x轴在元素的右侧看，顺时针就是正值，逆时针就是负值
y轴在元素的下面看，顺时针就是正值，逆时针就是负值

transform: translateZ() //沿着z轴平移
transform:scaleZ();  //沿着z轴缩放

8. Perspective
   景深 让子元素有近大远小的效果
   舒服的值500到1000

9. transform-style: preserve-3d
   让子元素保留其3d的位置

动画

animation-name: //动画的名字（必写）
animation-duration: //动画的持续时间（必写）
animation-timing-function: //动画的速度变化曲线
animation-delay: //动画延时时间
animation-iteration-count: infinite; //动画循环次数 infinite是无限循环
animation-direction: alternate; //动画反向运动

@keyframes 动画的名字{
	from{}
	to{}
}
//如果只有两个状态，可以写from 和 to

animation-play-state: paused; //动画暂停
animation-play-state: running; //动画播放

animation-fill-mode

属性值	等待	结束
forwards	初始值	100%
backwards	0%	初始值
both	0%	100%
none(默认值)	初始值	初始值