![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端css
空投在我怀里
这个作者很懒,什么都没留下…
展开
-
web前端CSS之“ calc() 函数”
1.定义calc() 函数用于动态计算长度值。2.用法需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则;3.作用:1-自动调整表单域的大小以适应其容器的大小input { padding: 2px; display: block; width: calc(原创 2022-05-29 18:15:22 · 1632 阅读 · 0 评论 -
web前端CSS之“px、em、rem、%、vw、vh单位”区别
1 、pxpx就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率。2、em参考物是父元素的font-size,具有继承的特点。浏览器默认字体是16px,整个页面内1em不是一个固定的值。字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px class为id3的div字体转载 2022-05-29 18:00:06 · 3327 阅读 · 1 评论 -
web前端之“深入display”
1.none 不显示元素-隐藏(脱离文档流,不占据页面空间)2.block让元素表现的和块级元素一致(独占一行,可修改高宽) 3.inline让元素表现的和行内元素一致(1不允许修改尺寸。2多个元素在一行中显示。3无法设置垂直外边距)4.inline-block让元素表现的和行内块元素一致(1多个元素在一行中显示。2可以修改尺寸)5.table(让元素表现的与表格一致)(1尺寸以内容为准。2 每个元素独占一行。3 允许修改尺寸) ...原创 2022-05-11 13:12:44 · 709 阅读 · 0 评论 -
web前端之“CSS隐藏元素的几种方式及区别”
1.display:none元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。不会触发其点击事件2.visibility:hidden和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会2-1导致浏览器重绘而不会重排。2-2无法触发其点击事件2-3适用于那些元素隐藏后不希望页面布局会发生变化的场景3.opacity:0将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方.原创 2022-05-11 13:10:20 · 931 阅读 · 0 评论 -
web前端css之“a标签的默认间距”
一、问题描述二、 解决1.方法12个a标签之间不留空白2.方法2给父级设置font-size:0 清除多a标签之间空隙给子元素a标签设置font-size:12px;这种方法,也是微信UI框架weui采用的方法,推荐使用。3.方法3给a标签一个float:left浮动4方法4父级letter-spacing: -999px;子元素a设置letter-spacing: 0;兼容性最好按1234这样的顺序来。...原创 2022-05-11 13:08:53 · 993 阅读 · 0 评论 -
web前端css之“盒子模型”
一、标准盒子模型在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)二、怪异盒子模型在怪异模式下,一个块的总宽度= margin(左右)+(即width已经包含了padding和border值)三、其他当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;当设置为box-sizing:border-box时,将采用怪异模式解析计算;...原创 2022-05-11 12:41:36 · 223 阅读 · 0 评论 -
css之“css3的新特性”
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*1.圆角边框*/ /*2.多重背景*/ /*3.渐变*/ /*4.RGBA*/ /*5.文字和盒子阴影*/ /*6.文.原创 2021-10-07 11:01:53 · 119 阅读 · 0 评论 -
css之“深入理解position:absolute和position:relative的区别”
<!--四、position:absolute和position:relative的区别--><!--1.脱离文档流的区别,就是不会显示新的一行--><!--定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在--><!--定位为absolute的层脱离正常文本流,但位置不在存在--><!--2.相对的元素不一样--><!--relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式--.原创 2021-10-05 23:31:35 · 329 阅读 · 0 评论 -
css之“垂直水平居中的五种方法”
<h1>居中</h1><!--1.确定了当前div的宽度,margin值为当前div宽度一半的负值-(知道宽度)--><div style="position: relative; height:400px;background: #333333"> <div style="position: absolute;width: 300px;height:200px; border: dotted red 1px;background: yel.原创 2021-10-05 23:25:38 · 190 阅读 · 0 评论 -
css之“垂直居中的六种方法”
<h1>垂直居中</h1><!--第一种:父元素display: flex+align-items: center--><div style="display: flex;height: 100px;background: #c0a16b;margin-top: 50px;align-items: center"> <div style="width: 100px;height: 50px;background: #3e8e41;">..原创 2021-10-05 23:22:47 · 850 阅读 · 0 评论 -
css之“水平居中的五种方法”
<h1>水平居中</h1><!--1.定位元素已知宽度情况-水平居中(已知宽度情况)--><div style="position: relative;background: #c0a16b;height:60px;margin-top: 100px"> <div style="position: absolute; left: 0; right: 0; margin-left: auto; margin-right: a..原创 2021-10-05 23:18:28 · 613 阅读 · 0 评论