其他分享
首页 > 其他分享> > css基础--margin

css基础--margin

作者:互联网

1、
1)元素尺寸:对应jQuery中的 ( ) . w i d t h ( ) 和 ().width()和 ().width()和().height()方法,包括padding和border,也就是元素的border box的尺寸。在原生的DOM API中写作offsetWidth和offsetHeight,所以,有时候也成为“元素偏移尺寸”。
2)元素内部尺寸:对应jQuery中的 ( ) . i n n e r W i d t h ( ) 和 ().innerWidth()和 ().innerWidth()和().innerHeight()方法,表示元素的内部区域尺寸,包括padding但不包括border,也就是元素的paddingbox的尺寸。在原生的DOM API中写作clientWidth和clientHeight,所以,有时候也称为“元素可视尺寸”。
3)元素外部尺寸:对应jQuery中的 ( ) . o u t e r W i d t h ( t r u e ) 和 ().outerWidth(true)和 ().outerWidth(true)和().outerHeight(true)方法,表示元素的外部尺寸,不仅包括padding和border,还包括margin,也就是元素的margin box的尺寸。没有相对应的原生的DOM API。
“外部尺寸”有个很不一样的特性,就是尺寸的大小有可能是负数,没错,负尺寸。这和我们现实世界对尺寸的认知明显冲突了,因为现实世界没有什么物体的尺寸是负的。所以,我总是把“外部尺寸”理解为“元素占据的空间尺寸”,把概念从“尺寸”转换到“空间”,这时候就容易理解多了
2、

<div class="father">    
<div class="son"></div> </div> 
.father { width: 300px; } 
.son {  margin: 0 -20px; } 

.son元素的宽度就是340像素了,尺寸通过负值设置变大了,因为此时的宽度表现是“充分利用可用空间”
3、
(1)如果图片左侧定位:此时,文字内容就会根据.box盒子的宽度变化而自动排列,形成自适应布局效果,无论盒子是200像素还是400像素,布局依然良好,不会像纯浮动布局那样发生错位

.box { overflow: hidden; } 
.box > img { float: left; } 
.box > p { margin-left: 140px; } 
<div class="box">   
 <img src="1.jpg"> 
 <p>文字内容...</p>
 </div> 

(2)如果图片右侧定位:只要图片的左浮动改成右浮动,文字内容的左margin改成右margin即可。

.box { overflow: hidden; } 
.box > img { float: right; } 
.box > p { margin-right: 140px; }

我们这里的图片是右浮动,视觉表现在.box的右侧,但是图片相关的HTML代码却在前面。
3)如果图片右侧定位,同时顺序一致:

.box { overflow: hidden; } 
.full { width: 100%; float: left; } 
.box > img { float: left; margin-left: -128px; } 
.full > p { margin-right: 140px; } 
<div class="box">   
 <div class="full"> 
 <p>文字内容...</p>  
  </div>    
  <img src="1.jpg"> </div>

4、利用margin改变元素尺寸的特性来实现两端对齐布局效果
1)列表块两端对齐,一行显示3个,中间有2个20像素的间隙。假如我们使用浮动来实现,CSS代码可能是下面这样

li {    
float: left;    
width: 100px;   
 margin-right: 20px; }

在这里插入图片描述

此时就遇到了一个问题,即最右侧永远有个20像素的间隙,无法完美实现两端对齐
如果不考虑IE8,我们可以使用CSS3的nth-of-type选择器:

li:nth-of-type(3n) {    margin-right: 0; } 

但如果需要兼容IE8那么nth-of-type就无能为力了。要么专门使用JavaScript打个补丁,要么列表HTML输出的时候给符合3n的

标签:box,right,--,元素,尺寸,9999px,margin,css
来源: https://blog.csdn.net/chujinmaolu/article/details/117387039