![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Coder Ben
不知名前端开发者
展开
-
【CSS】font-weight设置为500显示不出加粗效果
Windows 系统默认的宋体(simsun) 没有那么多级别。在缺少级别支持的前提下,CSS 会根据回退机制寻找一个类似的精度,结果就变成了400 (Normal)。原创 2023-09-14 14:40:21 · 4206 阅读 · 0 评论 -
【图文】CSS选择器优先级
最近面试人,让我想起来了多年前的一个CSS选择器优先级问题,于是去MDN翻了文档,找到一个十分形象的图片解析,如下:图片解析外部样式优先级有三位数字,从左到右,第一位是id选择器的数量,第二位是class选择器+属性选择器+伪类选择器的数量,第三位是元素选择器+伪元素选择器的数量内联样式优先级会在外部样式的基础上,在最左侧加一位1(这也就是内联样式优先级总是高于外部样式的原因)!important优先级会在内联样式的基础上,在最左侧再加一位1(这也就是!important优先原创 2021-10-28 14:37:30 · 127 阅读 · 0 评论 -
flex布局,实现子元素在主轴上单独排列
flex布局中,是通过在容器上设置justify-content属性来规定子元素在容器中主轴上的排列方式而如果要单独设置子元素的排列方式,则可以通过子元素的margin属性实现,例如:.container { display: flex; justify-content: space-between;}.item2 { margin-left: 10px; margin-right: auto;}就实现了container下item2子元素单独靠左排列(且距离左侧10px),其他子元原创 2021-02-05 16:19:08 · 3842 阅读 · 0 评论 -
改变select和option的默认样式
select { border: solid 1px #000; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right: 14px; padding-left: 20px; background: url("http://ourjs.git...原创 2020-04-15 14:39:46 · 4143 阅读 · 0 评论 -
【前端攻城狮之路】九宫格
CSS盒子模型及定位练习——九宫格一些问题先放这(欢迎留言谈论):1。屏幕比例非100%、%200、%300...时,grid_wrapper右下方出现间隙(将其border注释去掉可查看此问题)。2。未理解margin-left和margin-top先设5px再设-5px的原理实现代码如下:/*CSS File of NineGrid*/body{ mar原创 2016-11-25 17:40:24 · 749 阅读 · 0 评论 -
【前端攻城狮之路】CSS三列布局——两侧固定宽度、中间自适应
先附上效果图:实现思路:1、创建一个 div 容器(content)来存放这三个色块2、设置容器 position:relative,两侧div position:absolute,使它们分别靠在 content 内部的左右两侧3、中间 div 设置 width:auto,左右 margin 设置为两侧 div 的宽度(这样绝对定位的两个 div 就 ‘叠’ 在了中原创 2017-04-25 18:04:40 · 520 阅读 · 0 评论 -
【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应
做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。题目要求是右侧aside固定宽度200px,左侧content自适应。本来直接用float,发现aside总是会被“挤”到content以下,footer以上的位置,debug了好久最终还是看了大牛的博客才弄明白。基本思路是:①content宽度不设,让它默认auto,设一下高度(好看)②a原创 2016-12-20 17:06:36 · 3763 阅读 · 0 评论 -
【前端攻城狮之路】position定位机制
CSS position属性:static——默认方式,形成文档流relative——相对于原来(定位前)的位置进行偏移演示地址:点击打开链接absolute——脱离原来的文档流,独立定位,所以可能覆盖其他成分演示地址:点击打开链接fixed——固定定位,定位坐标系是整个视窗,网页下拉时保持不动演示地址:点击打开链接(请在全屏下查看演原创 2016-11-18 10:18:49 · 404 阅读 · 0 评论 -
【前端攻城狮之路】手把手教你用CSS画三角形(百度15前端研发笔试卷)
[问答题]题目描述请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:实现思路1、先思考一个问题:border-width比较大时,它的四个边框是如何划分的?答案是 ” 等面积划分 “ ,如下:(四个全等梯形)2、进一步考虑,把div的width和height都设为0,即只要边框,那么它显示的结果就是这样原创 2016-12-26 10:09:22 · 815 阅读 · 0 评论 -
【前端攻城狮之路】各种居中
CSS居中总结(只列出关键代码)参考资料:http://www.5icool.org/a/201309/a2516.html一、设置text-align:centertext-align: center; /*容器内文字水平居中*/二、设置line-height值等于父容器高度line-height: height_father; /*容器内文字垂直居中*/三、利用margin的auto原创 2016-11-18 11:55:45 · 451 阅读 · 0 评论 -
【前端攻城狮之路】为何img、input等内联元素可以设置宽、高?——替换元素的引出
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如和就不同,而和也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。1、替换元素和不可替换元素从元素本身的特点来讲,可以分为替换和不可替换元素。a.替转载 2016-12-02 17:18:54 · 319 阅读 · 0 评论 -
【前端攻城狮之路】CSS3动画
今晚看了w3school的CSS3动画属性,发现演示动画很有意思,就仿制了一个类似的来玩,对于提高自己的CSS学习积极性很有帮助哈哈哈哈哈~服务器权限没调好,暂时就不放演示链接了,明天调好了马上更新。代码附上,如下,很简单,跟pr、会声会影做电子相册自定义动画一个原理lalala~~无标题文档div{ width:200px; height:130px; ba原创 2016-09-29 23:39:28 · 441 阅读 · 0 评论