css3 盒模型与 伪元素综合应用案例
先来简略理解下盒模型:
在 css3 之前,盒模型默认为 box-sizing : content-box,这种模式下的盒模型计算大小方式为,width + padding + border ;
而 css3 中的盒模型为 box-sizing : border-box,比如,我们定义一个宽高为 300 的盒子,padding 为 20,border 为 10,
当我们添加box-sizing : border-box 后,这个盒子的实际大小还是 300 x 300,并不计算 padding 和 border,变化的是实际内容的大小。
再来说说 伪元素:
我们先来看一种写法:
div:hover::before{} /* 表示当 div hover 时,在当前 div 前面添加 */
div:hover::after{} /* 表示当 div hover 时,在当前 div 后面添加 */
这里直接说结论,其实,伪元素 就是一个行内元素,我们完全可以把它们看成是一个行内元素的盒子,使用伪元素必须添加 content : ' ' 属性。
下面,我们通过一个例子,来综合应用下盒模型与伪元素:
现在,我们有一个需求是这样的:当鼠标悬浮在图片上时,盒子大小本身不变化,图片上显示一个圆角的带有透明度的边框。
我们的第一反应自然是 使用 hover 来实现
第一种方案:
div {
width: 790px;
height: 340px;
margin: 100px auto;
} div:hover {
border: 10px solid rgba(, , , 0.9);
}
这种方法并不能实现我们的需求,盒子会被撑大,并且,border 并没有显示在图片上,而是环绕在图片四周,那,我们添加 box-sizing : border-box 呢?显然也是不行的。
第二种方案:
div {
width: 790px;
height: 340px;
margin: 100px auto;
box-sizing: border-box;
overflow: hidden;
} div img {
width: %;
height: %;
} div:hover {
border: 10px solid rgba(, , , 0.9);
}
我们将 img 的宽高设置为 100%,这种方法同样无法实现边框压在图片上的效果,会产生图片向小缩放的效果。
正确的方案:
div {
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
border-radius: 8px;
overflow: hidden;
} div:hover::after {
content: '';
position: absolute;
top: ;
left: ;
width:%;
height:%;
border:10px solid rgba(,,,.);
box-sizing: border-box;
}
要实现边框压在图片上的效果,必须使用定位,上面我们说过,伪元素本身就是一个行内盒子,使用定位后,就可以随意设置大小,将伪元素定位到与父盒子相同的位置,且有相同的大小,此时再添加 box-sizing : border-box 保证div大小不变,即实现了我们上面所说的需求。
这里对于盒模型及伪元素的介绍并不全面,只是粗略的一带而过,如有不懂的读者,建议先搞清楚这两者,弄懂后,再来看本文案例,就会一目了然了。
以上,就是本文的全部内容~~~
css3 盒模型与 伪元素综合应用案例的更多相关文章
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- css3 盒模型
0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...
- 第94天:CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
- css3盒模型
css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...
- CSS3盒模型之box-sizing
这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...
随机推荐
- [题解]Crazy Binary String-前缀和(2019牛客多校第三场B题)
题目链接:https://ac.nowcoder.com/acm/contest/883/B 题意: 给你一段长度为n,且只有 ‘0’ 和 ‘1’ 组成的字符串 a[0,...,n-1].求子串中 ‘ ...
- 常用缓存淘汰算法(LFU、LRU、ARC、FIFO、MRU)
缓存算法是指令的一个明细表,用于决定缓存系统中哪些数据应该被删去. 常见类型包括LFU.LRU.ARC.FIFO.MRU. 最不经常使用算法(LFU): 这个缓存算法使用一个计数器来记录条目被访问的频 ...
- 对python中的__name__的理解
一开始学习python的时候,不理解python中的__name__的用途,一致感觉__name__的返回结果就是__main__ 今天系统的看了一下,才理解过来,__name__真正的用处是用在使用 ...
- 64.二叉搜索树的第K个节点
题目描述: 给定一棵二叉搜索树,请找出其中的第k小的结点.例如, (5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4. 思路分析: 根据二叉搜索树的特殊性,我们中序遍历它 ...
- face_recognition人脸识别框架
一.环境搭建 1.系统环境 Ubuntu 17.04 Python 2.7.14 pycharm 开发工具 2.开发环境,安装各种系统包 人脸检测基于dlib,dlib依赖Boost和cmake $ ...
- Codeforces 358D DP
题意:有n只兔子需要喂养,每只兔子被喂养后的幸福感取决于与它相邻的兔子中已经被喂养的数量.现在问喂养这n只兔子可以获得的总幸福感最多是多少? 思路:初步分析题目发现,一只兔子被喂养获得的幸福感取决于其 ...
- IE历史纪录
signed int __cdecl sub_475790(_BYTE *a1) { signed int result; // eax DWORD v2; // [esp+10h] [ebp-10h ...
- 分析dwebsocket的源码过程
前言 dwebsocet 是python django的websocket库,github地址:https://github.com/duanhongyi/dwebsocket 本章是对dwebsoc ...
- maven3常用命令、java项目搭建、web项目搭建详细图解(转)
转自:http://blog.csdn.net/edward0830ly/article/details/8748986 maven3常用命令.java项目搭建.web项目搭建详细图解 2013-0 ...
- 六、Redis五种类型 - hash(散列)类型
1.介绍 (1).hash也是一种字典结构,存储了字段(field)和字段值(value)的映射,字段值只能是字符串,不支持其他类型.(2).适合存储对象,对象列表和ID构成键名,字段表示对象的属性, ...