关于CSS一些细节问题
本文是2016年的最后一篇文章,主要是将一些CSS细节问题整理一下。
background-position取值为百分比的计算方式
margin相邻折叠问题
position的absolute和relative定位top、left、right、bottom问题
覆盖样式问题
1、background-position取值为百分比的计算方式
background-position属性相信你用的不少,可是当取值为百分比时,你是否认为它是相对于背景图片的尺寸来计算(我之前也是这种想法,但看了大漠老师的《你真的了解background-position》后,才知大错特错)
来看看下面的代码:
.box { width:400px; height:400px; background-color:black; background-image:url(mm.jpg); /* 图片原尺寸150 * 225 */background-repeat:no-repeat; background-position:50% 50%;
}
相信background-position: 50% 50%你用的不少,这是让背景图片居中,相当于center center。
效果如下:
如果50%是按照图片的尺寸(150 225)来计算的,那么其值转换为像素值应该是75px 112.5px,你觉得背景图片能在400 400的块里居中吗?答案很明显,是否定的,那是如何计算的呢?
其实官方说法是这样的:
当背景图片尺寸(background-size)不做任何的重置(也就是100% 100%)时,水平百分比的值等于容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。
水平位置: (400 - 150) * 50% = 125px
垂直位置: (400 - 225) * 50% = 87.5px
2、margin相邻折叠问题
在开发中,我们偶尔会遇到明明两个div都设置了margin,可是它们之间的距离就是不等于两个div的margin之间的和,这是为什么呢?其实是因为在某些情况下,两个或多个块元素的相邻边界(其间没有任何非空内容、padding、边框)会发生合并成单一边界,也就是标题说的折叠。
先来看看兄弟块级元素的折叠,如下图所示:
还要注意的是,父元素与其子元素之间也会发生折叠:
2个或多个块级相邻元素的外边距(margin)的折叠规则:
外边距都为正值时,取最大值
不全是正值时,则用正值减去(所有值的绝对值中)最大值
全为负值时,则取最小值
不发生折叠情况:
水平(左右)外边距不会折叠
浮动元素的外边距不会折叠,并且浮动元素与它的子元素之间也不会发生折叠
设置了overflow且值不为visible的块级元素与它的子元素之间的外边距也不会被折叠
绝对定位(position:absolute;)元素的margin不与任何margin发生折叠,并且与它的子元素之间的margin也不会发生折叠
解决折叠的方法:
外层元素用padding替代margin
外层元素设置overflow:hidden
内层元素加padding:1或者border
内层元素加浮动(float)或设为(display:inline-block)
内层元素使用绝对定位(position:absolute;)
3、position的absolute和relative定位top、left、right、bottom问题
绝对定位(position:absolute)的top、left、right、bottom是相对于其具有相对定位属性(position不为static)的父元素(不一定是其直接父元素,有可能是祖先元素)。
如果两者(top、bottom)同时存在时,只有top起作用;如果两者(left、right)同时存在时,只有left起作用。
相对定位(position:relative)元素会保留原来占有的位置,其后面的元素按原来文档流仍然保持原来的位置
top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
如果两者(top、bottom)同时存在时,只有top起作用;如果两者(left、right)同时存在时,只有left起作用。
看一个例子:
<style>
.prev{ width:100px; height:100px; position:relative; background:blue; top:20px;
}
.next{ width:100px; height:100px; background:red;
}
.fl{ float:left; margin:20px;
}
</style><div class="fl"> <div class="prev" style="position:static"></div> <div class="next"></div>
</div>
<div class="fl"> <div class="prev"></div> <div class="next"></div>
</div>
从上面的代码和效果图,你可以看出,设置了position:relative的元素设置了top:20px,虽然(相对其原位置)向下移动了20px,可是并不会影响其后面的元素。
4、覆盖样式问题
比如我们有一个公共文件,其下有一个公共样式:
.box {color: red;
}
有些时候,我们需要覆盖这个样式,比如将红色改为绿色。由于是公共元素,我们不能直接修改,但方法还是有多种:
/*第一种*/
.parent .box {color: green;
}
/*第二种*/
.box {color: green !important;
}
上面这些是我们常用的,但还有一个小技巧,是我们平常不太注意的,可以如下设置:
.box.box {color: green;
}
今天就介绍这么多,如有错误,欢迎指正!
原文链接:关于CSS一些细节问题
关于CSS一些细节问题相关推荐
- android finish 刷新父,网页中CSS的细节处理大集合
一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: 记住密码 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: 记住密码 三.更改IE"查看源代码"菜单打开 ...
- 自学前端第二十九天 CSS高级之细节技巧
第二十九天 css高级细节技巧 一.background-color :属性设置元素的背景颜色. 定义和用法 background-color 属性设置元素的背景颜色. 元素背景的范围 backgro ...
- 前端代码标准最佳实践:CSS篇
上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...
- CSS图片有时失败,科技常识:图片加载失败后CSS样式处理最佳实践
今天小编跟大家讲解下有关图片加载失败后CSS样式处理最佳实践 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关图片加载失败后CSS样式处理最佳实践 的相关资料,希望小伙伴们看了有所帮助. 一 ...
- css背景边框列表链接
ife2018 第四天,背景边框列表链接和更复杂的选择器 课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性. background属性 background-col ...
- 用java绘制火焰_用 CSS 实现火焰特效?不在话下
点上方蓝字关注公众号「前端从进阶到入院」 精选原创好文助你进入大厂 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰. 嗯,长什么样子?在 CodePen 上输入关键字CSS Fire,能找到这 ...
- html边框波浪,如何实现带有波浪边框的css
用css实现波浪边框的方法:首先,新建一个div,给它一个类名:然后设置一个背景色,将div设置为白色:然后用之前的伪元素来设置,插入渐变颜色的形状:最后加上大小来划分图形,加上三角形来达到波浪效果. ...
- 【CSS】1104- 惊!妙用CSS变量和calc()实现放大镜效果
「链接和长图失效,请大家点击阅读原文查看详情」 前言 曾发表<妙用CSS变量,让你的CSS变得更心动>[1]一文,使用全部篇幅介绍「CSS变量」.变量作为CSS体系里最厉害的特性无之一,随 ...
- 图片加载失败后CSS样式处理最佳实践
图片加载失败后CSS样式处理最佳实践 1.传统的图片异常处理 如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的"裂开"的图片效果,如果设置了 alt 属性 ...
最新文章
- 用递归和非递归的方法求解n的k次方
- 每天一道LeetCode-----有效回文串
- 【测试点4】基础实验4-2.8 部落 (25 分)
- 新数据革命:开源图形化数据引擎Hawk5发布
- .Net Core开发日志——Peachpie
- 使用Redis和Apache Kafka处理时间序列数据
- 【GPU+ubuntu】Ubuntu下的Tensorflow-gpu等各种环境和包的安装
- Java字节码深入解析
- 1145: 零起点学算法52——数组中删数II
- signature=e5535ff98b93aa63c455611822dc57c2,高校新生预激综合征6例报告
- UML学习(一)类图和对象图
- 13.深入分布式缓存:从原理到实践 --- 缓存在社交网络Feed系统中的架构实践
- Python函数的返回值
- uygurqa输入法android,uygurqa键盘输入法
- 如何将图片压缩到200K以内,有什么好方法吗?
- Returned object not currently part of this pool
- NV 3D Vision
- GitHub 总星 4w+!删库?女装?表情包?这些沙雕中文项目真是我每天快乐的源泉!
- 台式计算机怎么连接蓝牙 win10,win10台式电脑蓝牙怎么开启(开启电脑蓝牙的步骤图)...
- Tcp Daytime获取客户端
热门文章
- 《Java虚拟机规范》阅读(二):编译
- iphoneX 订单生成器 - 装 b 神器 - 生成虚拟 iphoneX 订单,满足你装 b 的愿望
- 【监听文件 多线程】使用java--WatchService监听文件 开启多线程copy文件
- [Server] HP DL380 G6更新esxi6.0 SATA 硬盘掉线问题
- Project: CSS Buttons
- 在iOS App中增加完整的照片多选功能
- Q95:纹理映射(Texture Mapping)(2)——圆柱面
- 使用大数据技术需要注意哪些问题
- 大数据应用需注意哪些安全问题
- linux+yum安装终端php,centos下yum搭建安装linux+apache+mysql+php环境教程