web学习笔记5

web学习笔记5

背景处理

1、背景颜色渐变

background-image: linear-gradient();
background-image: radial-gradient();

linear-gradient(渐变角度，颜色1 开始位置 结束位置，颜色2 开始位置 结束位置，颜色···)，背景颜色的渐变有线性渐变和径向渐变两种，线性渐变的默认是从上到下的渐变，角度参数可以调整。径向渐变没有角度。

2、背景图尺寸

background-size: ;

调整背景图的尺寸的大小，单位可以使用px vw %等

版心

版心是pc网页中经常用到一种布局方式，因为每个用户的页面尺寸大小不一样（版心的尺寸满足需要适配最小的屏幕尺寸），设置版心将几乎全部的内容写在版心当中，能够最大限度的进行适配，保证大部分用户能够正常显示页面，例如京东，淘宝等的页面都应用了版心。

布局

1、文档流布局

页面元素按照自身的特性依次排列，不会出现较大的空隙或出现叠螺的情况，例如块级元素在页面中从上到下排列，行内和行内块元素从左到右排列。

2，浮动布局

float:left;
float:right;

浮动布局在能够帮助我们在页面中对div这种块级元素，修改其位置使得我们的页面布局更加好看。但是，浮动布局失去文档流，将布局空间让出来，这样就会导致父节点失去支撑内容，造成父节点失高。
浮动会让元素变块，包括行内和行内块都会变成块级元素

css技巧

1、元素隐藏

1. 透明度（背景颜色透明，元素透明度）
2. display:none；（显示模式）
3. visibility: hidden;（可见度隐藏）

2、美化与修饰

1. cursor: pointer; 光标变成手型
2. list-style: none; 消除列表标识符
3. outline: none; 外轮廓线消除
4. border-radius: 2px; 边框圆角
5. box-shadow: x轴位移量 y轴位移量 羽化值 阴影范围 颜色; 阴影

文字处理

font-size: ;/*字体尺寸*/
font-family: ;/*字体型号*/
font-weight: ;/*字体字重*/
color: ;/*字体颜色*/
text-decoration: none;/*去除文字修饰线*/
text-align: center;/*文字水平居中*/
line-height: ;/*行高  可以用于垂直方向对齐*/
text-indent:;/*首行缩进*/

white-space: nowrap;  强制不换行
overflow: hidden; 溢出隐藏
text-overflow: ellipsis; 溢出的文字替换成省略号,告诉用户文字还没完

定位

position

属性值	意义
position: static;	静态定位，默认值
position: relativ;	相对定位，不脱离文档流，可能会出现div的遮挡；z-index解决，值越大，显示层级越高
position: absolute;	绝对定位，脱离文档流
position: fixed;	固定定位，脱离文档流

position: absolute;绝对定位，相对于的是最近的非静态定位的祖先节点进行位置变换，如果没有非静态定位的祖先节点，则以body作为参考。因此在我们进行定位布局的时候，通常有一个口诀：子绝父相。

高级选择器

1、结构性伪类选择器

1. div:nth-child()
2. div:first-child 第一个div
3. div:last-child 选择最后一个div

2、属性选择器

[属性名] 选中包含指定属性名的元素
[属性名=“属性值”] 选中包含指定属性名且值为指定值的元素
[属性名^=“开头字段”] 选中包含指定属性名，且值为指定开头的元素
[属性名$=“结尾字段”] 选中包含指定属性名，且值为指定结尾的元素
[属性名*=“包含字段”] 选中包含指定属性名，且值包含指定值的元素
注意：这里的包含注意区分大小写

布局-弹性布局

display:flex;添加在需要布局的父级（容器）当中，对子项目进行位置排列的控制。它的属性是我们能够进行布局的关键。

1. flex-direction: 用于布局当中设置主轴的方向
   • row：从左到右
   • row-reverse：从右到左
   • column：从上到下
   • column-reverse：从下到上
2. flex-warp：实现块级元素的是否换行
   • nowarp：默认nowarp，也就是不换行
   • warp：实现换行，当父级宽度不够容纳块级横向排列时，便会自动换行
3. align-items：定义在交叉轴上的对齐方式
   • center：交叉轴的水平对齐，可用于块级元素的快速水平垂直居中
   • flex-start：交叉轴起点对齐
   • flex-end：交叉轴终点对齐
   • baseline: 项目的第一行文字的基线对齐
   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
4. justify-content：主轴上的对齐方式
   • flex-start（默认值）：左对齐
   • flex-end：右对齐，
   • center： 居中
   • space-between：两端对齐，最左端和最右端的项目贴父级 中间的项目均分剩下的位置。
   • space-around：所有项目均分宽度

技巧
子项目的快速居中对齐

justify-content: center;
align-items: center;

动画-过渡/变换

1，过渡

transition: 时间 时间 属性;
第一个时间参数表示的是元素属性的过渡时间
第二个参数是延迟执行时间 ，不写默认不延迟
第三个参数是过渡属性（不是所有的属性都可以过渡，具体可过度属性可以查看https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties），不写默认全部属性
多组过渡属性之间用逗号隔开，还可以选择过渡风格，如线性过渡等。

2，变换

transform: ;变换可以让我们从多个维度改变元素样式

参数	值意义
translate()	位移函数
rotate()	旋转
scale()	缩放