![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 52
七彩冰淇淋与藕汤
这个作者很懒,什么都没留下…
展开
-
八种button的hover效果
按钮的hover特效原创 2022-06-23 11:29:21 · 1549 阅读 · 0 评论 -
关于页面布局宽高的心得
1.页面宽度:如下设置可以让屏幕居中显示,并且随浏览器横向缩放宽度会自适应处于最小宽度和最大宽度之间 2.高度:footer不是固定定位的,但是需要距离底边100px,此时需要设置内容区高度与设备窗口可视高度相同,偶尔还需要减掉固定header的高度。在vue中,通过计算属性获取内容区高度,64是header高度 可以尝试在css里 height:calc(100vh - 64px); //注意减号两边必须有空格3.水平居中显示时尽量用margin: 0 auto; 而不是position,因原创 2022-06-17 14:49:47 · 184 阅读 · 0 评论 -
flex布局
弹性容器属性: 1.flex-direction:指定弹性元素的排列方向 row 默认横向从左到右 row-reverse 横向从右到左 column 从上到下 column-reverse 从下到上 2.flex-wrap:弹性元素是否自动换行 nowrap 默认不换 wrap 换行 wrap-reverse 逆辅轴反向换行 body { display: flex; flex-wrap:wrap-reverse } flex-flow:wrap和dir.原创 2022-04-22 09:38:18 · 434 阅读 · 0 评论 -
CSS画三角形、扇形
1.三角形 <style> .sector { width: 0; height: 0; /*border-radius: 100px;*/ border-width: 100px; border-style: solid; border-color: red transparent transparent transparent; } </style> <body> <div class="sector原创 2022-04-19 16:14:59 · 289 阅读 · 0 评论 -
隐藏元素的方法、display属性的值及意义、定位position值及其意义
display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。 visibility: hidden:元素在页面中仍占据空间,但是不会响应绑定的监听事件。 opacity: 0:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。 position: absolute:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。 z-index: 负值:来使其他元素遮盖住该元素,以此来实现隐藏。原创 2022-03-31 21:08:21 · 684 阅读 · 0 评论 -
盒模型:标准、怪异
首先看一例子: <style> button{ width: 100px; height: 100px; } </style> <body> <button>按钮</button> </body> </html> 按钮的实际宽高是多少呢?如下图。可见,button采用的是怪异盒模型 如果手动将其改为标准盒模型,box-sizing: content-box.原创 2022-03-31 20:56:42 · 235 阅读 · 0 评论 -
0.5px的直线、canvas和svg区别、Transform、animation
1.采用meta viewport的方式 <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 这样子就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px 要记得viewport只针对于移动端,只在移动端上才能看到效果 2.采用transform: scale()的方式 transform: scale(0.原创 2022-03-30 19:42:13 · 643 阅读 · 0 评论 -
CSS选择器及其优先级
CSS:CSS选择器及优先级问题 - 简书 id选择器 类选择器 标签选择器 组合选择器 用逗号隔开 后代选择器,空格隔开 子选择器,>号隔开 兄弟选择器 + 伪类选择器 :hover :visited 伪元素选择器 ::before ::after 通配符 * 属性选择器 : 优先级: ! import (无穷大) 行内选择器 (1000) id (100) class、属性、伪类选择器 (10) 元素选择器、伪元素选择器 (1) 优先级相同采用最后一个定义的样..原创 2022-03-28 20:58:50 · 181 阅读 · 0 评论 -
定位和二、三列布局
1.有哪些定位方式? 普通定位(block、inline)、相对定位、绝对定位、固定定位、浮动定位。 绝对定位和浮动定位的异同: 两者的共同点:对内联元素设置float或absolute属性,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。 两者的不同点:float仍会占位置,position会覆盖文档流中的其他元素。position属性为absolute或fixed的元素,会渲染成DOM的单独分支,重排的开销会比较小,因为不用考虑它对其他元素的原创 2022-03-28 18:55:15 · 763 阅读 · 0 评论