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(角度);

这是CSS３中新增的二维图片翻转的三个属性，使用时应注意浏览器的兼容问题。

CSS３文档上解释是将元素绕着三个轴转一定的角度。

但是发现这个角度并不一定是转的角度，也可以是相对于元素起始位置的一个角度，

比如transform: rotateY(0deg);　就不是将元素绕ｙ轴转　０°，这样相当于没转。

经过尝试发现，如果将一张图片先　transform: rotateY(１８０deg);　然后　transform: rotateY(0deg);　就会回到其最初没转１８０°的位置。

所以这里的０°并不是它实际转了０°，而是相对于之前转的　１８０°的又一个１８０°的偏移量。

同一个div中层叠的两张图片中的一张在进行翻转时，会默认以它的中线为轴转动，这样如果其绕y轴旋转会与另一张图片发生交错，如果转180°就会转到另一张图片之前或之后。

 

绝对定位　相对定位与固定定位：

绝对定位：

绝对定位会使元素脱离文档流，绝对定位是相对于离他最近的祖先元素进行定位的（一般开启子元素的绝对定位也会开启祖先元素的相对定位）

绝对定位会改变元素的性质，内联元素变为块元素，宽和高都被内容撑开

开启绝对定位的元素如果不设置偏移量，则只会脱离文档流不会发生移动
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口定位

相对定位：

不会使元素脱离文档流

固定定位：

元素的position属性设置为 fixed 时，开启固定定位

固定定位也是一种绝对定位，其大部分特点与绝对定位一样
不同的是，固定定位永远都会相对浏览器窗口定位

一般如果开启了子元素的绝对定位，就要开启其父元素的相对定位。

 

外边距：

当元素的外边距为正值时会使其旁边的元素发生移动，设置为负值时会使自身移动，并且设置为负值的情况居多。

 

以上均为个人心得笔记，如有不对之处还望指正

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有