CSS
文章平均质量分 75
工作中经验总结
cdwhy
你最大的努力就是要保持身体在巅峰状态
展开
-
外边距合并与塌陷
子元素的margin-top会作用再父元素上。结果:最终两者距离为margin的最大值。结果:导致父元素一起往下移动。,上下的margin会合并。原创 2022-11-05 19:22:05 · 236 阅读 · 0 评论 -
CSS中的BFC详解
第三条提供了布局的一种思路:左边盒子宽度固定,右边盒子宽度占满剩余的宽度,左边设置浮动,右边设置overflow:hidden即可实现。或者三栏布局,两边固定中间占满宽度,也是同样方法左右设置浮动,中间设置overflow:hidden;3、阻止元素被浮动元素覆盖。原创 2022-10-23 23:05:15 · 220 阅读 · 0 评论 -
基础知识补充(2022)
1、清除浮动本质是?清除浮动的本质是清除浮动元素脱离标准流造成的影响。2、清除浮动的策略是?闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。3、额外标签法?隔墙法,就是在最后一个浮动的子元素后面添加一个额外标签,添加清除浮动样式。实际工作可能会遇到,但是不常用。......原创 2022-07-30 23:03:54 · 370 阅读 · 0 评论 -
[前端开发]--分享个人习惯的命名方式
把一件平凡的事情做好,很平凡。把一件平凡的事情坚持的做好,很不平凡。1.前言如果说计算机科学只存在两个难题:缓存失效和命名。那么我就觉得命名的难点只有两个:词汇量和坚持贯彻执行制定的规范。最近在知乎上看到这个:作为程序员,有没有让你感到既无语又崩溃的程序命名? 。顿时感慨万千,因为命名对于程序员来说是就是一个难题,有时候因为命名,可能会引起别人的误导,疑惑等,对开发效率,项目的质量影响可大可小。今天,也分享下最近自己在使用的命名习惯,当然只是个人习惯。更希望能在评论区看到大家推荐的命名方式,互相学.转载 2021-10-20 16:04:57 · 252 阅读 · 0 评论 -
CSS深入理解之vertical-align
一、了解vertical-align支持的属性值以及组成vertical-align的各类属性值vertical-align的属性值可以归为以下4类:线类,如 baseline(默认值)、top、middle、bottom;文本类,如 text-top、text-bottom;上标下标类,如 sub、super;数值百分比类,如 10px、1em、5%;数值百分比类:其实属于两大类,数值类和百分比类。合在一起是因为它们有很多共性,都带数字;都支持负值;行为表现一致(在baseline对齐基原创 2022-02-13 19:26:07 · 1189 阅读 · 0 评论 -
CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。一、line-height的定义line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度。定义三问:什么是基线?为何是基线?需要两行?如图红色线即为基线基线(baseline),指的是一行字横排时下沿的基础线,基线并不是汉字的下端沿,而是英文字母x的下端沿。基线乃*线定义之根本! (*线指任意线)第3个问题,一行文字难道就没有行高吗?非也,一行文字也是有行高的,两行的定义已原创 2022-02-12 21:34:40 · 15307 阅读 · 0 评论 -
CSS命名规范——BEM思想(非常赞的规范)
人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher…BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇转载 2021-10-14 14:40:21 · 310 阅读 · 0 评论 -
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content
前面的话一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为’fill-availabel’和’fit-content’。除此之外 ,还新增了更细粒度的’min-content’和’max-content’。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字[注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀 fill-available width:fill-available表示撑满可用空间举例来说,页面中一转载 2021-06-30 11:09:22 · 747 阅读 · 0 评论 -
真正了解@font face里font-weight的作用
详细了解@font-face使用规则可以去看张鑫旭的文章真正了解CSS3背景下的@font face规则我们这里只重点强调@font-face里font-weight,font-style的用法,因为我在使用@font-face时对这一块的使用根本不清楚,感觉网上好多人忽略了这个非常重要的地方。@font face规则支持的CSS属性如下@font-face { font-family: 'example'; src: url(example.ttf); font-style: norma原创 2021-06-24 19:29:25 · 1864 阅读 · 0 评论 -
css设置overflow:hiden行内元素会发生偏移的现象
父级元素包含几个行内元素<div id="box"> <p> <span>按钮</span> <span>测试文字文字文字测试文字文字文字</span> <span>看这里</span> </p> </div> #box p{ width: 800px; font-size: 30px; } #box p span{转载 2021-06-17 09:21:58 · 877 阅读 · 0 评论 -
CSS等比例缩放的盒子
你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变。如下图所示,最上面是原始大小的图片,下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。可以看到把宽度设置为了原来的一半的同时,图片的高度并不是保持原来的大小,而是相应的也变成了原来的一半,使得图片仍能够保持原有的比例。同理把高度设成原来的一半也如此。作为对照,我们看看单独修改其他元素的宽和高会产生什么样的效果:上转载 2021-06-07 16:27:37 · 1185 阅读 · 0 评论 -
CSS中的 “var()” 和 “:root”
近在网上看到一种CSS写法,之前不怎么见过。出于学习查了一下。特此记录原来这些仅仅是自定义的css属性,在需要的时候可以使用var()函数引用 关于var()函数的作用和使用方法,参考:MDNvar()var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。):root:root是一个伪类,表示文档根元素,非IE及ie8及以上浏览器都支持,在:root中声明相当于全局属性,只.转载 2020-09-04 15:48:25 · 459 阅读 · 0 评论 -
溢出滚动并去掉滚动条兼容火狐各浏览器
溢出滚动:overflow:scroll;去掉滚动条:使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器.cc::-webkit-scrollbar{display: none;}兼容火狐.cc {scrollbar-width: none;}兼容IE10+.cc {-ms-overflow-style: none;}转载 2020-07-08 18:08:16 · 517 阅读 · 0 评论 -
css使用技巧
1.动画实现简洁 loading 效果.loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: "\2026"; -webkit-animation: ellipsis 2s infinite;}// 动画部分@-webkit-keyframes...原创 2020-03-30 19:37:17 · 110 阅读 · 0 评论 -
css 实际开发中的高级用法
1. 使用 :not() 在菜单上应用/取消应用边框项目案例:每个菜单项添加边框,然后去除最后一个.nav li:not(:last-child) { border-right: 1px solid #666;}原创 2020-03-23 12:46:19 · 123 阅读 · 0 评论 -
css 类名大全
做前端最纠结的就是css命名,写个标签想名字就要像个一分钟,so 从晚上copy了一些规范的命名。相对网页外层重要部分CSS样式命名:外套 wrap ------------------用于最外层头部 header ----------------用于头部主要内容 main ------------用于主体内容(中部)左侧 main-left -------------左侧布局右侧 ...原创 2019-08-29 11:50:57 · 8832 阅读 · 1 评论