<>>尖括弧
定义文档与外部资源的关系
h1-h6(标题标签)
强制换行,只用于文字、文章换行(单标签)
分割线(单标签)
图片标签(单标签)
加下划线
加删除线
文字倾斜
文字加粗
用来组合文档中的行内元素(行标签)
- 有序列表(必须有
- )
- 无序列表(必须有
- )
(行标签变块标签display:block变完之后叫行内块元素。display:inline-block;)
行元素和块元素1.行元素只占它本身2.继承父级属性3.不可以设置宽高1.快标签独占一行2.继承父级属性3.可以设置宽高
表格table(定义表格)
表格中的行天地表格行中的单元玄黄混沌
水平合并:colspan="1"
垂直合并:rowspan="1"
表单from(定义供用户输入的 HTML 表单)
input 定义输入控件
lable 定义 input 元素的标注
姓名:
文本框
单选按钮
多选按钮
密码
button按钮. value定义按钮的名称(自定义)
提交按钮
重置按钮
上传文件
下拉框
我是下拉框的选项1
我是下拉框的选项1
文字区域/留言板
cols控制textarea的宽 rows控制textarea的宽高
placeholder 输入框提示信息
required 必填项,如果不填写则无法提交
maxlength 定义最大字符数
action 提交跳转地址
method 传输方式
disabled 是否禁用
method(传输的方法)="" action=""(跳转地址)
readonly 只读
name 用于服务器端获取数据
selected 下拉框被选中
checked="checked"默认选定(可多选)
css层叠样式表
浮动出现问题解决办法:
1.给父级设置宽高
2.clear:both 清除浮动
Opacity 透明度0-10
color 颜色
font 字体(不推荐使用)
font-color 字体颜色
font-size 字体大小
font-family 字体类型
font-weight 字体粗细
font-style:italic 文字倾斜
font-style:normal 字体正常
line-height 行高
text-decoration:line-through 加删除线
text-decoration: overline 加顶线
text-decoration:underline 加下划线
text-decoration:none 删除链接下划线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文小写
text-align:right 文字右对齐
text-align:left 文字左对齐
text-align:center 文字居中对齐
text-align:justify 文字分散对齐
vertical-align属性
vertical-align:top 垂直向上对齐
vertical-align:bottom 垂直向下对齐
vertical-align:middle 垂直居中对齐
vertical-align:text-top 文字垂直向上对齐
vertical-align:text-bottom 文字垂直向下对齐
padding 内边距
margin 外边距
margin:0 auto 盒子居中
list-style:none 去ul中li的黑点
url 统一资源定位符
text-indent:“10px” 文字段落首行缩进
word-spacing:"10px" 字母间距
letter-spacing:"10px" 汉字和字母的间距
背景图片
background-color:red 背景颜色
background:transparent 透视背景
background-image : url(/image/bg.gif) 背景图片
background-repeat : repeat 重复排列-网页默认
background-repeat : no-repeat 不重复排列
background-repeat : repeat-x 在x轴重复排列
background-repeat : repeat-y 在y轴重复排列
background-position 背景定位
background-position : 90px(%) 90px(%) 背景图片x与y轴的位置
background-position : top 向上对齐
background-position : buttom 向下对齐
background-position : left 向左对齐
background-position : right 向右对齐
background-position : center 居中对齐
while-space:nowrap 强制不换行
overflow:hidden 隐藏多余(恢复隐藏多余visible)
text-overflow:ellipsis 变...
css引入方式和优先级
外部链接
行内样式
嵌入样式
引入样式@impot
优先级:行内样式>嵌入样式>外部链接>引入样式(由大到小)
【帅】css选择器
1:标签选择器 div{} p{} ul{}
2:类名选择器(用class命名,在样式).box{} .input_l{}
3:id选择器(标签后面id=“id名称”调用#id名称唯一的,不能重复用一个,id可以是多个,id优先级比类名高。)#
4:通用选择器( *{} 控制网页全局样式,margin:0;padding:0;)
5:伪类选择(:hover 鼠标经过超链接样式. :active鼠标点击时的样式).box:hover{} a:hover{} #id:hover{}
6: 子代选择器 两代选择器 父和子.box p{} #id span{}
7:后代选择器 三代及以上.box p span{}
8:群组选择器 多个标签到一起设置
9:交叉选择器 两个不同选择结合使用
单冒号(:)用于css3伪类,双冒号(::)用于css3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的,用于区分伪类和伪元素。
但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,
比如:first-line、:first-letter、:before、:after等。
对于css2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。
提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。
scc3
border:10px solid red 边框
border-radius:10px 10px 10px 10px 边框圆角
background:linear-gradient(red,yellow)默认从上往下
background:linear-gradient(red50%,yellow50%)颜色占比
background:linear-gradient(to right red,yellow)左右渐变
background:radial-gradient(red,yellow)径向渐变
text-shadow 文字阴影
box-shadow 盒子阴影
box-shadow:apx bpx cpx dpx yellow
apx指的水平靠左或靠右阴影
bpx指控制垂直方向,正数向上,负数向下
cpx模糊程度,越大越模糊
dpx阴影范围
yellow 黄色(自定义颜色)
定位
1、静态定位(默认):position:static 没有定位的情况下
2、相对定位:position:relative 相对定位占自己原本的位置 移动元素会导致覆盖其他元素
3、绝对定位:position:absolute 不占原来空间,就像原来元素不存在一样,后面不定位的任何元
素都会被挡住,无论行标签还是块标签绝对定位之后都会变成块级框
4、固定定位:position:fixed 参照边界是浏览器的边界,通常放在左侧或右侧,
无论父级是否有定位都不影响,不占空间 默认悬浮上面
z-index:控制空间位置/前后位置值从-9999到9999 0是默认-1是默认下一层,
1是默认的上一层2在1上一层
文档流:html的结构/层级关系
定位:position
如果已经绝对定位的元素无定位的父级(直接在body里,没有父级)参考的边界是浏览器的边界ml/body,
如果有定位的父级,参考边界父级
z-index控制定位的空间位置
相对和绝对区别:
相对
1、相对定位无父级会受到周围元素的影响,比较适合作为父级元素,他定位参照周围元素,
2、如果无父级无周围元素,相对定位参照body
3、相对定位,元素移动后还占原本位置
绝对
1、绝对定位,不受周围元素影响,
2、如果无父级无周围元素,绝对定位参照浏览器窗口
3、绝对定位,元素移动后不占原本位置
2d、3d转换
transition:5s 过渡,时间越长变换越慢。
2d转换 样式
transform
1.位移 translate(x 水平方向,y 垂直方向)
transform: translate(200px,50px)X,Y同时位移
transform: translateX(200px)X,Y必须大写
transform: translateY(50px)
2.旋转 rotate
rotate(3600deg)-deg度数单位-
transform:rotate(3600deg)
transform:translate(200px,100px) rotate(96000deg)位移和旋转效果。
3.缩放scale
scale(2,2)倍数
scale(1,1)不缩放,正常效果。
4.倾斜skew
skewX(30deg)
skewY(60deg)
5.matrix 矩阵。
通过矩阵算法实现以上4个效果。
3d转换transform
透视perspective/破四百可体悟/:500px
透视距离值越大离得越远,幅度越小。值越小离得越近,幅度越大。一般设置300-500左右合适。
perspective-origin: left right top bottom ;透视基点
origin 基点
opacity透明度0-1
transform-style:preserve-3d 控制子级在3d空间内显示
动画:animation
动画的组成部分:
关键帧@keyframes{
form{ }
to{ }
}
@keyframes{
0%{ }
50%{ }
100%{ }
}
动画属性properties/铺肉破踢斯/-决定动画的播放时长,播放次数,以及用何种函数式去播放动画等。
动画时间函数animation-timing-function
(linear匀速、 ease快、 ease-in进入快、 ease-out出去快、 ease-in-out进入出去快中间匀速。
动画延迟animation-delay: 5s(延迟几秒后进行)
动画方向animation-direction
正序normal
倒序reverse
交替播放alternate
反向交替alternate-reverse
迭代次数animation-iteration-count
动画填充模式animation-fill-mode
animation-fill-mode:backwards动画结束后保持第一帧的状态。
animation-fill-mode:forwards动画结束后保持最后帧的状态。
animation-fill-mode:both动画将执行backwards和forwards的状态。
动画播放状态
animation-play-state:paused;动画暂停播放 paused
animation-play-state:running;动画正常播放 running
animation:hezi(自定义动画名)5s(秒数)infinite(循环播放,linear只播放一次)
一.2d和3d有啥区别
答:2d是平面,3d是立体。
2d两个轴x和y轴,transform:translate(x,y)rotate(x,y)scale(x,y)skew(x,y)
3d三个轴xyz,transform:translate3d(x,y,z)rotate3d(x,y,z)scale3d(x,y,z)skew3d(x,y,z)
2d旋转基点transform-origin
3d必须有父级 父级上加transform-style:preserve-3d让子元素在3d空间上显示
还加透视perspective:500px
透视基点perspective-origin
3d默认旋转基点是左上角
二.动画和过度有啥区别
答:1. 过度是一段时间动作,需要鼠标触发
动画是一直循环,不需要鼠标,刷新页面就执行
2. 过渡是一个动作到另一个动作变化的过程
动画是可以持续很长时间由很多个关键帧组成,动画可以把每一段过渡组成到一起,动画不需要过渡
三.2d转换有几个属性分别是
四.透视是啥 透视基点和旋转基点有什么区别。
答:透视效果是近大远小
透视基点是定到哪个点就以这个为准出透视效果,透视效果决定因素不光是透视基点还有透视距离
旋转基点:旋转时候以哪个点旋转就是旋转基点。
相似之处:都是参照物,都可以设置left,right,top,bottom。像素,百分比
【弹性盒子】
弹性盒子组成
display:flex 或display:inline-flex
弹性盒子是弹性容器(container)和弹性元素(flex itme)组成
弹性盒子内包括一个或多个子元素
弹性盒子换行//
flex-wrap:nowrap默认不换行
flex-wrap:wrap/ 外泼 / 换行
flex-wrap:reverse//反方向
弹性盒子方向flex-direction
flex-direction:column/ 考了木/ 竖着
row横着
column-reverse反着竖着
row-reverse横着反向
同时决定方向和换行flex-flow
flex-flow可以同时设置flex-direction和flex-wrap
flex-flow:row nowrap
内容对齐-水平方向
justify-content:flex-start;靠左
justify-content:flex-end;靠右
justify-content:center;居中
justify-content:space-between;两端对齐中间距离均等。
justify-content:space-around;两端均等,中间平分
内容设置垂直方向的距离align-content
align-content:flex-start;垂直靠上
align-content:flex-end;垂直靠下
align-content: center;居中
align-content: space-between;上下靠边 中间距离均等
align-content: space-around;上下留出相等距离,中间距离平均分
设置弹性盒内每一项弹性子元素的位置<垂直方向>弹性项的位置align-items
align-items:flex-start靠上
align-items:center居中
align-items:flex-end靠下
align-items:baseline以基线,与flex-strat很像
align-items:stretch拉伸,每一项item的高度拉伸至父级高度,如果不固定可以通过
min-height/ma
设置弹性元素自身在纵轴(垂直)的位置
align-self:
align-self:flex-start靠上
align-self:center居中
align-self:flex-end靠下
align-self:baseline以基线,与flex-strat很像
align-self:stretch/死拽吃/ 拉伸高度至父级高度 两行就是父级高度一半,三行就是三分之一
(stretch前提是他不能有具体的高度)
flex在每一项上设置flex:1/2/3/4; order排列顺序
flex:a b c;三个值 order:1;order:2;order:3;
a 占比 第二个到第一个用order:-1;
b 缩放比例
c 基准位置
flex属性用于指定弹性子元素如何分配空间
设置了弹性布局之后,子元素的css中的float、clear、vertical-align都无效