![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
master-刘
这个作者很懒,什么都没留下…
展开
-
CSS 2D转换
转换之移动translate语法:transform:transform(x,y);重点:定义2D转换中的移动,沿着X轴和Y轴移动元素不会影响到其他元素的位置百分比单位是相对于自身元素的对行内标签没有效果转换之旋转rotate语法:transform:rotate(度数)重点:度数单位是deg角度为正时,顺时针;角度为负时,逆时针默认的旋转中心是元素的中心点转换中心点 transform-origin(我们可以设置元素转换的中心点)语法:transform-origin: x y;原创 2021-01-10 09:59:31 · 123 阅读 · 0 评论 -
CSS高级技巧
1.1 dispaly设置或检索对象是否以及如何显示dispaly:none 隐藏对象(隐藏元素,不保留位置)dispaly:black 除了转换为块级元素之外,还有显示元素的意思1.2 visibility可见性visibility:visible; 对象可见visibility:hidden; 对象隐藏(隐藏元素,保留位置)–>1.3 overflow溢出:检索或设置当对象的内容超过其指定高度及宽度时如何管理内容(只隐藏超出大小的部分)visible 不剪切内容也不添加滚动条hid原创 2021-01-09 09:04:02 · 165 阅读 · 2 评论 -
移动布局基础之 响应式布局
响应式开发1.1 响应式开发原理使用媒体查询针对不同宽度设备进行布局和样式的设置,从而适配不同设备1.2 响应式布局容器响应式需要一个父级作为布局容器,来配合自己元素来实现变化效果通过媒体查询改变布局容器的大小,再改变里面子元素的排列方式和大小2. bootstrap前端开发框架2.1 bootstrap是基于html,css,javascript的最受欢迎的前端框架下载网址:http://bootstrap.css88.com/标准化的html+css编码规范提供了一套简洁,直观,强.原创 2021-01-05 09:14:21 · 331 阅读 · 0 评论 -
移动布局基础之 rem适配布局
rem基础rem单位是是一个相对单位,相对于HTML元素的字体大小,和em不同通过修改HTML里面的文字大小来改变页面中元素的大小可以整体控制2.1 媒体查询(media query)使用@media查询,可以针对不同的媒体类型定义不同样式可以针对不同屏幕尺寸设置不同样式在重置浏览器大小的过程中,会根据浏览器宽高重新渲染页面2.2 语法规范@media media type and|not|only (media feature) {CSS-Code}mediatype查询类型al.原创 2021-01-02 11:32:41 · 222 阅读 · 2 评论 -
移动布局基础之 flex布局
1.1 传统布局与flex布局传统布局:兼容性好 布局繁琐 局限性flex布局:操作方便 布局简单 PC端兼容较差 IE 11及以下版本不支持2.1 flex布局原理弹性布局,用来为盒状模型提供最大的灵活性当我们为父盒子设为flex布局后,子元素的float,clear和vertical-align属性失效伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用flex布局的元素,称为flex容器,他的所有子元素称为flex项目总结:通过给父盒子添加flex属性,来控制盒子的位置和排原创 2020-12-31 10:48:54 · 146 阅读 · 0 评论 -
移动布局基础之 流式布局
移动端调试方法1.Chrome DevTools(谷歌浏览器)的模拟手机调试2.搭建本地web服务器,手机和服务器一个局域网,通过手机访问服务器3.使用外网服务器,直接IP域名访问移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机开发现在移动端碎片化比较严重,分辨率和屏幕大小尺寸不一学会用谷歌浏览器模拟手机页面以及调试视口viewport就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口,视觉视口和理想视口1.1 布局视口(layout viewport)原创 2020-12-30 13:36:01 · 351 阅读 · 0 评论 -
CSS 动画
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比于过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。下面给大家带来关于CSS动画的基本语法动画的基本使用:1.先定义动画使用keyframes定义动画(类似定义类选择题)@keyframes 动画名称 {0% {width:100px;}100% {width:100px;}}0%是动画的开始,100%是动画的完成,这样的规则就是动画序列,可以做多个状态的变化,原创 2020-12-29 10:28:50 · 208 阅读 · 3 评论