首页 > 代码库 > auto的使用
auto的使用
1 <div class="container">2 <div class="demo"> 3 </div>4 </div>
1 .container{ 2 width:150px; 3 height:50px; 4 background:rgb(236,100,143); 5 } 6 .demo{ 7 background:rgb(141,163,210); 8 width:auto; 9 height:50px;10 margin-left:10px;11 margin-right:10px;12 }
1.margin-left与width为定值,margin-right:auto
此时写作auto状态的margin-right其实值为150-50-10=90px。
2.margin-left与margin-right为定值10px,width:auto
此时写作auto状态的width其实值为150-10-10=130px。
3.width为定值100px,margin-left和margin-right都是auto
此时.demo居中,写作auto状态的margin-left和margin-right值都为(150-100)/2=25px。
4.margin-left为定值10px,width和margin-right都是auto
此时设置为auto的外边距会减为0(margin-right:0),width值为150-10=140px。
5.margin-left,margin-right,width三者都设为auto
此时两个外边距都会设置为0,width值为150-0-0=150px。
参考资料
《CSS权威指南》第7章 基本视觉格式化 p171~173
auto的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。