有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-bottom:/*距离底边距*/margin-left:/*距离左边距*/;数值排列4-1,比方说margin:10px 11px 12px 13px;/*上右下左*/margin:10px 20px 30px;/*上下不一样,左右一样*/margin:10px 20px;/*上下10px 左右20px*/margin:10px/*上下左右都是10px*/;padding道理一样,把前面的margin更换下就好,注意下:margin:0 auto;marign为0代表上下(垂直方向Y轴),水平(X轴)居中,同时建议阅读“盒模型大小取决于它的padding,margin,border数值”,里面对于margin和padding有完整介绍,还有“margin的bug问题及解决办法”补充一点的是(*盒子添加padding值,它的padding值是往外延的,在里面的有效宽度是不会变化的,盒子模型的内边距是减去宽高所得)
有关浮动和清浮动问题,个人理解是float:left或者float:right的css样式打破div标准流独占一行的传统,脱离了文档流,所造成的浮动页面影响类似"捆橡皮筋,当你把橡皮都拿走了,橡皮筋就回缩了",这时候,你要做的就是考虑如何有效的防止橡皮筋回缩,就是防止我们布局的div盒子回缩,那清浮动呗,怎么解决?看下“float布局打破标准流,神助攻clear清浮动”,因为课程里面的是增加div,通过<div style='clear:both'></div>,建议用默认伪类::before与::after{content: "";display: block;clear: both;}处理...最后认为比较有意思的一点是课程中浮动的原理介绍/*float浮动只能在文档流之前垂直位置左右浮动,其他不变*//*clear英文清除,计算机里面是阻止的意思,clear:right不允许右边有物体*/
clear小结:1.与float漂浮配合使用2.清除浮动,left/right/both3.可以用来做分割线4.可以解决div不漂浮,内部内部漂浮,在div最后放一个<div style="clear:both"></div>
1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 Meta charset="UTF-8" 5 name="viewport" content="width=device-width,initial-scale=1.0" 6 title>89组合margin、padding、float、clear问题</ 7 style type="text/css" 8 body{ 9 cursor: pointer; 10 } 11 /*浮动只能在文档流之前垂直位置左右浮动,其他不变*/ 12 .Box113 width 100px14 height15 background-color red16 float: left; 17 18 .Box219 110px20 21 green22 float right23 24 .Box325 120px26 27 blue28 29 clear;阻止清除,不允许右边有物体30 31 style32 script33 window.onload=function(){ 34 var objdocument.getElementById('ceshi); 35 obj.onclick36 console.log(我一生都在等待直到你闯进我的世界我只想对你说:余生请多指教) 37 } 38 } 39 40 41 body id="ceshi"42 div class="Box1"></div43 ="Box2"44 ="Box3"45 body46 html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。