元素水平垂直都居中几种方式:
1 第一种定宽高元素,水平垂直居中于窗口:
position:fixed;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;
2 第二种不定宽高元素,水平垂直居中于窗口:
position:fixed;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
3 不定宽高元素,子元素在父元素中:
父元素{
position:relative;
}
子元素{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
4 不定宽元素水平居中
一、 子元素:display:inline-block;
父元素:text-align:center;
二、 父元素设置:display:table;
margin:0 auto;
5.不定宽高元素垂直水平居中,弹性盒
Display:flex;
Justify-content:center;
Align-items:center;
6.不定宽高元素在屏幕窗口水平垂直居中
Position:fixed;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);
7.不定宽高子元素在父元素中水平垂直居中
父元素{
position:relative;
}
子元素{
position:absolute;
Top:50%;
Left:50%;
Transform:translateX(-50%)translateY(-50%);
}
href和src之间的区别:
href表示超文本应用,建立当前元素和文档之间的链接(页面跳转)link a 等
src:指向的内容会嵌入到文档当前所在的位置(嵌入进页面)
元素隐藏方式总结:
1.display:none; 位置不保留
2.visibility:hidden; 位置保留
3.opacity:0;
4.元素属性:transparent;如background:transparent(背景不可见)
Link和@import引入外部的区别:
1、 link属于标签,可以引入其他文件,@import只可以引入css
2、 Link引入的和css和页面同时加载,@import先加载页面。
3、 Link支持js改变dom。
单行文本省略号的设置:
width:value;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
清除图片默认空隙:
img {display:block;}
img {float:xx;}
相对定位和绝对定位的区别:
1 参照物不同
2 是否会脱离文档流
使用border实现三角形:
元素{
width:0;
height:0;
border:3px solid transparent;
border-top-color:yellow;
}
其他
★ input submit 按钮加边框不会显示在元素外,会向内缩进
★ 去掉表单元素点击时的外边框:input {outline:none;}
★宽度100%,父元素加上padding和border后出现滚动条,给父元素加:box-sizing:border-box;
★表单元素行高不一致(无法对齐):
一、 给表单添加vertical-align:middle;
二、 给表单元素添加float;
★元素旋转以后,xyz轴也跟着旋转,旋转前的轴已经发生了变化
★移动端布局,如果不是圣杯布局,就不要给body设置弹性盒。否则高度会被挤压
★flex:1 是项目属性,加上之后,项目原本宽高失效,项目均分父元素宽高,没有距离
★固定定位元素溢出没有滚动条,绝对定位元素溢出有滚动条
★给父元素设置弹性盒后,内联元素虽可设置宽高,但并不是真正的块元素,使用块元素属性需要给内联元素转成块
★背景图background:url(../img/photo.jpg) no-repeat center;的居中方式图片会居中
★文本添加下划线:
text-decoration:underline;
★首行缩进:
text-indent:32px;
★文本删除线:
text-decoration:line-through;
★垂直对齐方式:
vertical-align:middle;
★使用图片作为列表符号:
list-style-image:url(图片路径);
★改变列表符号的位置:
list-style-position:outside(外面)
Inside(里面)
★边框样式:
border-style:solid;(实线)
dashed;(虚线)
dotted;(点线)
double;(双线)
★鼠标手指:
cursor:pointer;
★五大浏览器内核:
1 IE :trident
2 火狐:gecko
3 Safari 谷歌:webkit
4 欧朋 presto
★点击文字选中单选/复选按钮:
<input type=”radio” id=”boy” name=”a”/>
<label for=”boy”>男</label>
★合并相邻单元格边框(给table加)
border-collapse:collapse;
合并列:colspan;
合并行:rowspan;
★单元格内容水平对齐方式:
align=”left/center/right”;
单元格内容垂直对齐方式:
valign=”top/middle/bottom”;
★H5新增标签:
1 header 网页头部
2 footer 网页底部
3 section 网页区域
4 nav 网页导航
5 aside 侧边栏
6 article 一篇文章
7 mark 带有记号的文本
8 progress 进度或进程
★音频:
<audio controls autoplay loop>
<source src=”1.pm3” type=”audio/mp3”/>
</audio>
支持格式:mp3 ogg wav
★视频:
<video controls width=”数值” height=“数值”autoplay controls poster=“图片路径”>
<source src=”2.mp4” type=”video/mp4”/>
</video>
★H5新增type属性
1、 type=“email”;必须含有@符,@符前后不能为空
2、 type=“url”;必须含有http://,后内容不能为空
3、 type=“number”;
Eg:<input type=”number” min=”1” max=”100” value=”1” step=”2”/>
Value默认值 step设置每次递增递减的值;
4、type=“range”;滑动条的表单
Eg:<input type=”range” value=”1” min=”0” max=”100” />
★H5新增表单属性:
1、 required 必填项,限制用户输入不能为空;
<input type=”text” required/>
2、 placeholder=“默认提示信息内容”
<input type=”text” placeholder=“请输入用户名”/>
3、 autofocus 页面加载完成后自动聚焦到某个input框
<input type=”text” autofocus/>
4、 取消h5的表单验证:
<form novalidate></form>
★css3属性针对不同内核的兼容写法:
Safari、谷歌:-webkit-
火狐:-moz-
欧朋:-o-
IE:-ms-
★单独设置某一个方向的圆角:
border--top-left-radius:数值px;
★文本阴影:
text-shadow:水平 垂直 模糊 颜色;
1多组用逗号分隔
2 水平向右为正 向左为负 垂直向下为正 向上为负
★Flex项目属性
Flex-grow:0/数值;默认为0
存在剩余空间也不放大
★Flex-shrink:1;默认值
剩余空间不足时,等比例缩小
★CSS3基础变形:
transform:
rotate;旋转 单位deg
rotateX rotateY rotateZ rotate(2D旋转 正顺逆负)
Scale;
缩放 无单位 取值大于1放大 小于1缩小
ScaleX ScaleY Scale(沿xy同时缩放)
Skew;
倾斜 单位deg
SkewX SkewY
Translate;
位移 取值px 位移的参照物是自身的宽高
XYZ
★改变变形元素中心点的位置:
transform-origin:left top center right bottom
★设置元素变形类型:
transform-style:preserve-3d;
★透视、井深:
perspective:1000px;
★过渡动画:
transition:过渡属性 过渡时间 过渡方式 延迟时间;
transition-property(过渡属性):
all 所有发生变化的属性都添加过渡
transition-duration(过渡时间)
transition-delay(过渡延迟时间)
设置负值将会被截断
★transition-timing-function(过渡方式)
取值:ease 默认
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 慢-快-慢
★创建动画-添加动画:
创建:
@keyframes 动画名称{
0%{
属性值:属性;
}
50%{
属性值:属性;
}
...
100%{
属性值:属性;
}
}
★添加动画:
animation-name(动画名称)
eg:animation:fly 3s;
动画执行次数:数值/infinite 无限循环播放
动画状态:paused 动画暂停 一般划过时添加暂停,之前的动画效果要全部写上,然后暂停
过渡类型:linear 匀速
step(n,end)动画分几步完成
animation-fill-mode(动画执行完毕的状态):forwards;保持动画结束时的状态;
简写:animation:动画名称 动画时间 延迟时间 播放次数 播放状态;
★transition和animation的区别:
- transition动画不会自动执行,需要触发条件
- transition动画触发一次只能执行一次,再次执行需要再触发
- transition动画只有开始和结束两个状态,不能设置中间状态
- animation动画页面加载完自动执行,可以无限循环播放,并且可以设置中间的关键帧
★背景、渐变:
设置背景在哪个区域可见:
background-clip:border-box 边框及以内可见
padding-box padding区域可见
content-box 主体内容可见
★背景尺寸:
background-size:数值/100%/cover/contain
百分比:background-size:100% 100%;不会超出容器,但会发生变形
background-size:100%; 可能超出容器,但是不会变形
background-size:cover; 可能超出容器,但是不会变形