![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
萤火虫塔莉
恪守自己,善待他人
展开
-
2022年8月刷题
前端刷题,知识积累原创 2022-08-29 15:56:30 · 215 阅读 · 1 评论 -
表格样式的层叠顺序与优先级
最近在复习基础知识时,在mdn上练习table相关的内容,被一个奇怪的现象困扰了很久:为col设置border:1px solid black;没有显示,当把宽度设置为2px时就可以显示出来,测试代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>aaaa...原创 2019-06-10 10:47:36 · 2405 阅读 · 0 评论 -
垂直外边距合并
今天在复习html标签时,看到w3c对块级元素有这么一条额外注释默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。之前确实也知道这么一条规则,但是没有具体看过。今天去浏览器中看了一下盒子模型,发现两个块级元素h1, p的垂直外边距被合并在一起了。接下来看一下两个元素分别的盒模型h1p可以发现h1和margin大于p的margin,而且最终...原创 2019-02-24 16:41:48 · 312 阅读 · 0 评论 -
css中中文字体的英文表示
其实之前写css一直都很开心的用font-family:'微软雅黑';之类的中文写法,今天突然在知乎上看到一个大神的回答,惊觉自己误入歧途那么久,惶惶不安的去找了资料,共享。 知乎问答:https://www.zhihu.com/question/52739452/answer/135720155 参考资料: 1. http://www.im87.cn/blog/10-03/cssshe-zh原创 2017-03-05 15:54:52 · 937 阅读 · 0 评论 -
子元素margin-top为何会影响父元素?
问题如下 一段很简单的代码:css如下:<style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100p原创 2016-10-28 11:25:38 · 27120 阅读 · 4 评论 -
inline-block和float应区别对待
参考资料:http://www.w3cplus.com/css/inline-blocks.htmlinline-block和float大战已经持续了一段时间,有的人钟爱float,整个页面都用的是float布局,而有些人因为float之后的元素会脱离文档流,而钟情于inline-block。今天因为在做任务,使用inline-block出现了一点小问题,为加深记忆,特写此博文。float 因为浮原创 2016-05-20 10:10:37 · 2802 阅读 · 0 评论 -
flex布局中align-items 和align-content的区别
参考资料:http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上有人提问后的回答觉得十分清晰,特来分享,有不当之处欢迎指正。 align-items The ali翻译 2016-05-29 17:24:24 · 87592 阅读 · 13 评论 -
positon:absolute; 复习绝对定位
记得一年前刚开始学习css的时候,定位这块看了很多资料,第一个项目特别凶残的排版全部用的position O__O “…。OK,言归正传,今天在写一个图片轮播的时候,又对绝对定位有些疑惑,自己写了个demo之后,思维清晰了,来写个博客加深下印象。 w3c上对绝对定位的解释是这样 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “原创 2016-04-06 09:45:31 · 465 阅读 · 0 评论 -
css3中伪类选择器:target的使用
参考资料 CSS3 target伪类简介今天由于在做任务13,里面有一个子任务是要求用css写出一个简单的图片轮播,刚开始真的是完全没有思路,想着不用js怎么绑定点击事件呢,看了别人的一些实现方法,发现:target是一个神奇的东西。如果想看用css3实现的图片轮播,狠狠点击这里demo刚开始接触:target时,真的是一头雾水,觉得这个是个什么东西,怎么能处理点击事件呢。看了差不多五六篇博客还有简原创 2016-04-04 19:10:04 · 9824 阅读 · 5 评论 -
css选择器“+”和“~”的区别
最大的区别是’+’最多只能匹配到一个元素,而’~’可以匹配到多个。 ‘+’是指紧跟在后面的某同级元素 ‘~’是指某些同级元素 以以下代码为例<div class='try'></div><p class='one'></p><p class='two'></p>如果是+.try + p那么选中的只是类名为one的p如果是~.try ~ p那么选中的是类名为one和类名为two的p<div原创 2016-04-04 18:34:34 · 1395 阅读 · 0 评论 -
关于margin-top失效的解决办法
今天在学习jQuery的时候,随便布了一下局,却出现了margin-top失效的事情,以前也出现过,一般使用overflow:hidden;来解决。今天偶然间发现了一个新的解决办法,给父级添加一个1像素的和背景一样颜色的边框,例如div{border:1px solid white;}问题瞬间解决,不过会有1像素的误差。 我今天是刚发现的这个方法,具体原因还不知道为什么,如果有知道的同学麻烦告知,原创 2016-01-02 20:46:24 · 937 阅读 · 0 评论