![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3合集
magician21##
励志前端攻城狮!
展开
-
移动端开发 流式布局
视口viewport视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口我们只需要关注理想视口理想视口 ideal viewport为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口,对设备来讲,是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽总结视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视原创 2021-10-19 14:19:03 · 87 阅读 · 0 评论 -
CSS3 动画
定义动画@keyframes move{ 0%{ transform: translateX(0); } 100%{ transform: translateX(1000px); } }0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐原创 2021-10-18 16:51:00 · 51 阅读 · 0 评论 -
CSS3 2D转换
2D转换移动:translate旋转:rotate缩放:scale移动translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。语法:transform:translate(x,y); /* 或者分开写 */transform:translateX(n);transform:translateY(n);transform:translate(100px,100px);/* 如果只移动X轴 */transform:trans原创 2021-10-18 15:05:46 · 50 阅读 · 0 评论 -
HTML5新特性
H5新增语义化标签H5新增视频标签<video src="文件地址" controls="controls"></video>视频标签的属性H5新增音频标签 (audio)支持音频格式:mp3(支持的最多) ,wav,ogg语法规范:<audio src="文件地址" controls="controls"></audio>HTML5新增input表单...原创 2021-10-18 12:28:04 · 34 阅读 · 0 评论 -
CSS3 定位
相对定位相对定位是元素在移动位置的时候,是相对于它原来的位置来说的特点:它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待。(不脱标,继续保留原来位置)因此,相对定位并没有脱标。绝对定位absolute绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的特点:如果没有祖先元素,或者祖先元素没定位,则以浏览器为准进行定位(Document 文档)如果祖先元素父级有定位(相对、绝对、固定定位),则以原创 2021-10-18 11:06:07 · 58 阅读 · 0 评论 -
CSS3 元素居中总结
块级盒子水平居中在盒子已经指定宽度的情况下margin: 0 auto;行内元素或行内块元素水平居中给父元素添加text-align: center原创 2021-10-18 09:28:45 · 104 阅读 · 0 评论 -
CSS3 选择器权重及权重叠加问题复习
| 选择器 | 权重 ||-继承或者 *-|-0,0,0,0-|| 元素选择器(标签选择器) | 0,0,0,1|| 类选择器,伪类选择器 | 0,0,1,0|| ID选择器 | 0,1,0,0 || 行内样式style="" | 1,0,0,0 || !important重要的 | 无穷大 |权重可以叠加,但是永远不会进位。...原创 2021-10-18 09:12:19 · 87 阅读 · 0 评论 -
CSS3 伪元素选择器复习
以element::before{}或者element::after{}的形式创建伪元素选择器。before和after必须由content属性伪元素选择器权重为1伪元素放到父盒子里面的前面或者后面```handlebars<head> <style> div { width: 200px; height: 200px; background-color: pink; .原创 2021-10-17 08:02:55 · 62 阅读 · 0 评论 -
CSS3 三角复习
三角形制作原理给定一个宽度和高度都是0的盒子,设置盒子的上下左右边框为不同颜色,则会生成四个三角形。代码部分div{ width: 0; height: 0; border-top: hotpink 100px solid; border-left: transparent 100px solid; border-right: transparent 100px solid;原创 2021-10-16 09:26:45 · 46 阅读 · 0 评论 -
CSS3 清除浮动复习
为什么要清除浮动?父盒子在很多情况下不方便给高度,子盒子浮动又不占有位置,最后父盒子高度为0,会影响下边的标准流盒子。清除浮动的方法额外标签法(隔墙法,但平时不常用) W3C推荐父级添加overflow属性父级添加after伪元素给父级添加双伪元素额外标签法在最后一个浮动元素后边添加一个额外标签,添加清除浮动样式。<style> .nav { width: 100px; height: 100px; backgroun原创 2021-10-16 08:51:43 · 113 阅读 · 0 评论 -
CSS3 精灵图技术复习
为什么需要精灵图技术?有效的减少服务器接收和发送请求的次数,提高加载效率精灵图技术核心原理将网页中的小图片整合到一张大图中,这样服务器只需要请求一次。精灵图技术主要针对背景图片移动背景图片的位置可以使用 background-position移动的距离为目标图片的x和坐标,一般为负值。代码及实例 <style> .box{ width: 61px;// height: 59px;//要显示出来的小图片的大小原创 2021-10-15 09:57:05 · 85 阅读 · 0 评论 -
CSS3 进阶,循环精灵图技术
案例分析利用for循环,修改精灵图的backgroundPosition代码及实例<style> *{ margin: 0; padding: 0; } .box{ width: 230px; margin: 100px auto; height: 100px; } ul li{原创 2021-10-15 11:14:42 · 108 阅读 · 0 评论