![](https://img-blog.csdnimg.cn/f220516fee8f4cc9af6a710aa173b831.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 61
CSS相关知识点
Sfh_11
这个作者很懒,什么都没留下…
展开
-
visibility:hidden和display:none的区别
有时候我们在对前端网页布局的过程中,会碰到需要得把某个元素给隐藏起来,这个时候我们一般有两种做法:display:none,设置这个属性后,该元素可以理解成从页面上完全消失了,看不见也摸不着,而且会导致页面的重绘和重排,同时还触发不了点击事件visibility:hidden,设置这个是属性后,该元素可以理解成我们肉眼看不见但是依然存在,也就是看不见但摸得着,只会导致页面的重绘,同时可以触发点击事件(插个题外话:设置元素opacity:0之后,也可以触发点击事件)...原创 2021-07-12 14:11:46 · 927 阅读 · 0 评论 -
解决:flex布局之 flex-wrap:wrap 自动换行属性,导致上下两行div中间有空行
直接上问题,如图所示:我们在对父容器设置 flex-wrap:wrap 之后,容器内的容器成员在换行时中间出现了一个空行,这是因为我们忘记对容器设置align-content属性,在我们对外层容器加入align-content:flex-start之后,这个问题就解决了,效果及代码如下所示:.parent { display: flex; align-content: flex-start; flex-wrap: wrap; width: 200px; heig原创 2021-07-08 20:40:14 · 17322 阅读 · 0 评论 -
position的几个属性
position 的常见四个属性值: relative,absolute,fixed,static。一般都要配合"left"、“top”、“right"以及"bottom” 属性使用。 1:static:默认位置,(static 元素会忽略任何top、bottom、left 或right 声明)一般不常用。2:relative:位置被设置为relative 的元素,偏移的top,right,bottom,left 的值都以它原来的位置为基准偏移。注意relative 移动后的元素在原来的位置仍占据原创 2021-07-12 14:41:48 · 5180 阅读 · 0 评论 -
html中div使用自动高度,即不设置height属性要注意的问题以及css中after伪类+content的使用说明及方法
为什么要使用div标签?1.更多的配置项,那就意味着更灵活,当然,难度也更高;2.可以方便的容纳其他html标签;static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定;relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。absolute绝对定位,直接指定top,left,right,bottom。有意思 的是绝对定位也转载 2021-06-27 15:24:15 · 683 阅读 · 0 评论 -
css关于单位那些事
深入了解 CSS 中的 rem 单位,它是具有良好浏览器支持的相对大小调整的单位,这里来学习如何有效地使用它们。什么是 rem 单位?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。根据 W3C 规范,一个对象单位的定义是:转载 2021-07-07 19:37:17 · 65 阅读 · 0 评论 -
border-box和content-box的区别和解释
Chrome浏览器box-sizing默认是content-box,content-box就是元素的width和height决定了元素的宽高,这意味着元素的border和padding等不能算在元素的width和height中 ,padding和border的改变不能改变width和height的值。代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l转载 2021-07-07 16:14:14 · 1602 阅读 · 0 评论 -
css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动属性的元素,当做没设浮动一样来看待,以此来消除其对自己的影响对比设置和不设置clear:both的结果来说明<style> .test-title{ background-color: orange; } .test-con转载 2021-06-27 14:26:29 · 11366 阅读 · 4 评论 -
一篇文章教你弄懂到底什么是BFC
什么是BFC?首先遇到BFC这个概念是在一次面试中,不知道有没有小伙伴和我一样,你知道这个东西的作用或者说你曾经用过这个东西,但是你就很难系统地讲出来这到底是个啥玩意儿,归根到底就是基础还不扎实,遇到了不懂的还是老老实实查一波MDN文档把~MDN:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文:根元素()浮动元素(元素的 float 不是原创 2021-08-30 10:39:50 · 121 阅读 · 0 评论 -
轮子:实现水平垂直居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-08-20 09:51:39 · 56 阅读 · 0 评论