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、元素隐藏
- 透明度(背景颜色透明,元素透明度)
- display:none;(显示模式)
- visibility: hidden;(可见度隐藏)
2、美化与修饰
- cursor: pointer; 光标变成手型
- list-style: none; 消除列表标识符
- outline: none; 外轮廓线消除
- border-radius: 2px; 边框圆角
- 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、结构性伪类选择器
- div:nth-child()
- div:first-child 第一个div
- div:last-child 选择最后一个div
2、属性选择器
[属性名] 选中包含指定属性名的元素
[属性名=“属性值”] 选中包含指定属性名且值为指定值的元素
[属性名^=“开头字段”] 选中包含指定属性名,且值为指定开头的元素
[属性名$=“结尾字段”] 选中包含指定属性名,且值为指定结尾的元素
[属性名*=“包含字段”] 选中包含指定属性名,且值包含指定值的元素
注意:这里的包含注意区分大小写
布局-弹性布局
display:flex;添加在需要布局的父级(容器)当中,对子项目进行位置排列的控制。它的属性是我们能够进行布局的关键。
- flex-direction: 用于布局当中设置主轴的方向
- row:从左到右
- row-reverse:从右到左
- column:从上到下
- column-reverse:从下到上
- flex-warp:实现块级元素的是否换行
- nowarp:默认nowarp,也就是不换行
- warp:实现换行,当父级宽度不够容纳块级横向排列时,便会自动换行
- align-items:定义在交叉轴上的对齐方式
- center:交叉轴的水平对齐,可用于块级元素的快速水平垂直居中
- flex-start:交叉轴起点对齐
- flex-end:交叉轴终点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
- 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() | 缩放 |