div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出。
我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默认是图片的宽高。
但是如果是多张图片要放进一个div 这样虽然也可以,但是会影响后边整体的布局,比如图片外间距的设置,还有需要隐藏图片时就不好处理了。
经过尝试发现,如果设置给div 的宽度太小不足以容纳所有图片,则图片会默认竖直排列,这时就发生溢出了,可以用 overflow: hidden; 样式来隐藏溢出部分。
overflow常常用于父元素清除子元素浮动造成父元素的高度塌陷。
clear:both 常用于清除兄弟元素浮动的浮动,使其不会占据兄弟元素的位置。
有时候,我们是需要溢出的这部分的,比如要实现图片的二维翻转效果时,这时需要使用 CSS3的样式 backface-visibility: hidden; 来设置隐藏div中的第一张图片,并且在翻转时只显示面向屏幕的那张图片。
backface-visibility: hidden;与 overflow:hidden 及 display:none的区别
display:none 隐藏元素,不占网页中的任何空间,让这个元素彻底消失(看不见也摸不着)
overflow:hidden 让超出的元素隐藏,就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉,剪掉的该区域可以放置其他内容,也就是说溢出的部分不再占据位置
backface-visibility: hidden; 把元素所在的层隐藏,只是看不到元素了,但是位置还是存在的。
CSS3 transform :rotateX (角度) rotateY(角度) rotateZ(角度);
这是CSS3中新增的二维图片翻转的三个属性,使用时应注意浏览器的兼容问题。
CSS3文档上解释是将元素绕着三个轴转一定的角度。
但是发现这个角度并不一定是转的角度,也可以是相对于元素起始位置的一个角度,
比如transform: rotateY(0deg); 就不是将元素绕y轴转 0°,这样相当于没转。
经过尝试发现,如果将一张图片先 transform: rotateY(180deg); 然后 transform: rotateY(0deg); 就会回到其最初没转180°的位置。
所以这里的0°并不是它实际转了0°,而是相对于之前转的 180°的又一个180°的偏移量。
同一个div中层叠的两张图片中的一张在进行翻转时,会默认以它的中线为轴转动,这样如果其绕y轴旋转会与另一张图片发生交错,如果转180°就会转到另一张图片之前或之后。
绝对定位 相对定位与固定定位:
绝对定位:
绝对定位会使元素脱离文档流,绝对定位是相对于离他最近的祖先元素进行定位的(一般开启子元素的绝对定位也会开启祖先元素的相对定位)
绝对定位会改变元素的性质,内联元素变为块元素,宽和高都被内容撑开
开启绝对定位的元素如果不设置偏移量,则只会脱离文档流不会发生移动
如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口定位
相对定位:
不会使元素脱离文档流
固定定位:
元素的position属性设置为 fixed 时,开启固定定位
固定定位也是一种绝对定位,其大部分特点与绝对定位一样
不同的是,固定定位永远都会相对浏览器窗口定位
一般如果开启了子元素的绝对定位,就要开启其父元素的相对定位。
外边距:
当元素的外边距为正值时会使其旁边的元素发生移动,设置为负值时会使自身移动,并且设置为负值的情况居多。
以上均为个人心得笔记,如有不对之处还望指正
div 中图片溢出问题及 CSS3中图片翻转问题的更多相关文章
- 第9章 CSS3中的变形与动画(下)
Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...
- css3中的 @Keyframes
一.介绍 keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面跟着是动画名称加上一对花括号“{…}”,括号中是一些不同时间段样式规则. ...
- CSS3中的变形与动画(二)
CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- CSS3中的background-size(对响应性图片等比例缩放)
background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目 ...
- 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】
CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...
- CSS3中DIV水平垂直居中-2(3)
用到CSS3中display的新属性. HTML <div class="parent"> </div> CSS html,body{ width: 100 ...
- Retina视网膜屏中CSS3边框图片像素虚边的问题
虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
随机推荐
- 使用redis配置分布式session
1. spring-redis-session 1.1. 配置 /** * @author laoliangliang * @date 2018/12/21 17:19 */ @Configurati ...
- PLSQL使用scott登录
Oracle有3种用户: system.sys.scott,其中system和sys的区别在与能否创建数据库,sys用户登录才可以创建数据库,而scott是给初学者学习的用户,学习者可以用Scott登 ...
- Android项目创建.prorperties配置文件和调用方法
刚接触Android开发不久,今天写项目发现里面的可变参数有点多,(主要是服务器访问路径), 如果路径改变或者改名字了的话,若都写在代码里,岂不是要炸了? 我想到了Java项目里的有个.prorper ...
- Django -- 发送HTML格式的邮件
提前在setting中设置邮箱server from django.core.mai import EmailMessage subject, from_email, to = 'xxx', 'nor ...
- spring3.0框架检测方法运行时间测试(转)
主要利用了Spring AOP 技术,对想要统计的方法进行横切处理,方法执行前开始计时,方法执行后停止计时,得到计时方法就是该方法本次消耗时间. 步骤: 首先编写自己的Interceptor类来实现M ...
- 7-Flink的分布式缓存
分布式缓存 Flink提供了一个分布式缓存,类似于hadoop,可以使用户在并行函数中很方便的读取本地文件,并把它放在taskmanager节点中,防止task重复拉取. 此缓存的工作机制如下:程序注 ...
- 【原创】空中鼠标一DMP欧拉角
正在搞六轴传感器,今天移植了MPU6050的MothionDriver的DMP固件到STM32上了,能够稳定地输出欧拉角(也就是俯仰角.航向角.横滚角)和XYZ三轴加速度值,在电脑的上位机模拟了装置的 ...
- Webpack中publicPath设置
webpack中的path是当我们build的时候,输出项目打包文件的位置. webpack中的publicPath是我们打算放到web服务器下的目录,如果我们要放到网站的根目录下,那么就无需设置.如 ...
- 字符串不相同出现相同HashCode(算法)
转自:https://blog.csdn.net/fly_grass_fish/article/details/81742794 在Java中有HashCode的说法,以前以为HashCode是唯一的 ...
- [转]How to Add Bootstrap to an Angular CLI project
本文转自:https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ In this article we w ...