css3 下边框缓缓划过_Html+Css3

<>>尖括弧

定义文档与外部资源的关系

h1-h6(标题标签)

强制换行，只用于文字、文章换行(单标签)

分割线(单标签)

图片标签(单标签)

链接标签

加下划线

加删除线

文字倾斜

文字加粗

用来组合文档中的行内元素(行标签)

• 有序列表(必须有
• )

1. 无序列表(必须有
2. )

　　　　定义列表中的项目 　　　　定义列表中项目的描述 　　　　 　　　　

(行标签变块标签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都无效