css
胖胖a
深夜里停不下编程的思绪。
展开
-
一行代码简单解决HTML中\n换行
之前是封装一个工具函数,用正则来匹配,然后替换成<br />,今天找到了个新方法,一句话就行,记下记下。在显示内容的元素标签上加上样式white-space: pre-line;这样\n就能被识别,自动换行。兼容性如下:最低兼容到IE8,令人欣慰。...原创 2020-03-21 13:25:13 · 27435 阅读 · 1 评论 -
弹性盒子与绝对/固定定位冲突问题
手机端经常会要做固定在顶部或者底部的导航栏,但当弹性盒子跟固定/绝对定位一起使用时,就会发生问题,具体情况如下:<div class="flex-box"> <div class="option">1</div> <div class="option">2</div> <div class="option">3<...原创 2019-10-09 16:44:19 · 6293 阅读 · 3 评论 -
说em是相对父元素字体大小是不正确的
emem是一个相对长度单位,那em长度是由什么来决定的呢(1em=?px),其实,在一个对象中,1em能等于两个不同的px值。看完这篇博客,我想大家就会明白em的本质了。举个综合点的例子(可直接转到结尾总结):wrap-box是inside-box父元素<div id="wrap-box">外面的 <div id="inside-box">里面的...原创 2019-08-24 00:21:21 · 983 阅读 · 0 评论 -
解决li超出ul不自动换行问题以及其他的文本自动换行
部分代码如下:(涉及太多东西,我就把主要的拿出来)<li> <a href="#">Tech Partners, Resellers, and Alliances</a> </li>做导航栏时会遇到,li里面a标签的文本内容超过了ul设置的宽度,没有换行。解决办法:1. w...原创 2019-05-20 19:03:09 · 7573 阅读 · 0 评论 -
后代选择器与子元素选择器的区别
**后代选择器:**选择父元素中所有的某元素,不管层级多深。运用时用空格隔开将两元素隔开。**子元素选择器:**选择父元素的下一级的所有某元素,层级只是子代。运用时用大于号隔开。举个例子:html代码我们创建一个类为list的ul,ul里面有四个子代,两个li和两个ul。 <ul class="list"> <li>我是list的子代 </li>...原创 2019-04-11 23:44:53 · 914 阅读 · 0 评论 -
BFC的应用总结
BFC的触发条件1.float不为none;2.position不为static或者relative;3.display为inline-block或者是table相关的;4.overflow不为visibl。BFC的使用1.阻止垂直外边距折叠。属于同一个BFC的两个相邻的块级元素的上下margin会发生重叠。将他们分成两个BFC就能消除重叠;2.清除浮动;3.不与浮动元素重叠。...转载 2019-04-05 15:44:51 · 92 阅读 · 0 评论 -
nth-of-type选择器
nth-of-type选择器结论原创 2019-11-07 16:13:45 · 588 阅读 · 0 评论 -
inline-block之间多余间隔问题
做练习时发现,多个inline-block在刚好大小的父容器中装不下而换行,检查元素发现inline-block之间有间隙。举个简单例子<div> <span style="background-color: red;">1</span> <span style="background-color: blue;"&g...原创 2019-11-05 11:24:06 · 464 阅读 · 0 评论