CSS
HansExploration
这个作者很懒,什么都没留下…
展开
-
CSS中的变量使用,var()语法
惯例先看代码::root{--white-max: #fff; --white-bright:#f5f5f5; --white-light:#eee; --white-dark: #ddd; }.navbar ul>li>a{color: var(--white-max);font-size: 1.1em;font-weight: bold;}.panel.panel-zxzx a...转载 2018-03-19 15:21:19 · 1053 阅读 · 0 评论 -
文本超出后显示省略号的方法
ellipsis() overflow hidden text-overflow ellipsis white-space nowrap注意宽度必须设定好,可以由父元素控制原创 2018-07-03 20:36:49 · 222 阅读 · 0 评论 -
transform对定位元素的影响
1温故知新.absolute:生成绝对定位的元素,相对于除position:static 定位以外的第一个有定位属性的父元素进行定位,若父元素没有定位属性则相对于浏览器窗口的左上角定位,定位的元素不再占据文档的空间。 relative:生成相对定位的元素,相对于其正常位置进行定位,定位的元素仍然占据文档的空间。2.发现问题 首先看一个代码:a为父元素,b为子元素; <div ...转载 2018-06-27 15:45:47 · 3636 阅读 · 0 评论 -
绝对定位后元素的宽高如果用百分比表示的计算方法
.big{ padding-right: 100px; padding-bottom: 100px; width: 0; height: 0; background: yellow; margin-top: 100px; margin-left: 100px;}.inner { width: 50%; height: 50%; background: black; ...原创 2018-06-19 16:06:50 · 3063 阅读 · 0 评论 -
为何子元素的margin-top会传递给父元素?
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。比较浅的规则详见:w3school CSS 外边距合并。以下皆为这里部分内容的引用,其实是W3C的相应规则的翻译。margin折叠的产生有几个条件:这些margin都处于普通流中,并在同一个BFC中;这些margin没有被非空内容、padding、border 或 clea...转载 2018-04-26 11:54:49 · 398 阅读 · 0 评论 -
text-overflow:ellipsis 文字超出省略号代替不起作用解决方法
场景重现无效场景一现在我们来一个正常的例子<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="width转载 2018-04-24 20:55:26 · 10461 阅读 · 4 评论 -
CSS的优先级和继承问题
★CSS的冲突,即优先级CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果。★解决CSS冲突的优先级规则:● CSS层叠样式表引入方法的优先级:内联式>内嵌式>链接式>导入式● 在多个外部样式中,后出现的样式的优先级高于先出现的样式,也就是俗称的覆盖● 在样式中,选择器的优先级:ID样式>class样式>标记样式(以权重...转载 2018-04-04 16:31:01 · 345 阅读 · 0 评论 -
CSS中定义CLASS时,中间有空格和没空格的区别是什么?
.example .pp中间用空格隔开,表示后代选择器,选择的是.example内的.pp。例如:<div class="example"> <div class="pp">被选择的元素</div></div>.example.pp中间没有空格隔开,选择的是class中同时包含example和pp的元素。例如:<div class=&转载 2018-04-08 10:19:46 · 780 阅读 · 0 评论 -
使用CSS3的@media来编写响应式的页面
首先要知道,我们为什么要写自适应的页面(响应式页面)【直接看干货】众所周知,电脑、平板、手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手机访问www.baidu.com就会跳转到m...转载 2018-03-21 14:33:14 · 245 阅读 · 0 评论 -
深入理解 flex-grow & flex-shrink & flex-basis
前言flex 有三个属性值,分别是 flex-grow, flex-shrink, flex-basis,默认值是 0 1 auto。 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个一个看。flex-grow定义项目的放大比例,默认值为0,就算存在剩余空间,也不会放大。单单几句话肯定不能表达出意思,来看个DEMO。flex-growflex-grow的默认值为0,如果没有定义该属性...转载 2018-03-21 11:35:44 · 350 阅读 · 0 评论 -
使用CSS3 will-change提高页面滚动、动画等渲染性能
一、先来看一个例子下面这个例子来自某外文,我这里简单转述下。视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随滚动条滚动而滚动效果的时候,发现,页面的绘制性能掉到了每秒30帧,这种帧频人眼已经可以感觉到一定的顿挫感了。后来,参考一些其他同事还是同行的建议,做了一番优化,然后,页面的渲染性能——这优化之前完全就是便...转载 2018-03-14 15:46:47 · 311 阅读 · 0 评论 -
CSS Modules 用法教程
作者: 阮一峰日期: 2016年6月10日学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法。为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言。从最早的Less、SASS,到后来的 PostCSS,再到最近的 CSS in JS,都是为了解决这个问题。本文介绍的 CSS Modules 有所不同。它不是将 CSS 改造成编程...转载 2019-02-11 22:04:25 · 378 阅读 · 0 评论