> 웹 프론트엔드 > HTML 튜토리얼 > auto的使用_html/css_WEB-ITnose

auto的使用_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:50:23
원래의
1491명이 탐색했습니다.

html

1 <div class="container">2     <div class="demo">  3     </div>4 </div>  
로그인 후 복사

css

 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。

说明

  1. 当margin-left,margin-right,width三者都设定值且总和大于父元素的宽度时(过分受限),margin-right将会被重置以符合宽度要求(针对从左往右读的语言,反之则重置margin-left)。
  2. padding和border都不能设置为auto,也绝不能为负数。
  3. 在正常流中margin-top或margin-bottom设置为auto会自动计算为0,无法做到垂直居中。
  4. margin:0 auto的水平居中效果不适用于内联元素(p,img),内联元素的水平居中可以用text-align:center,非要使用margin必须先display:block将其变为块状元素。

 

参考资料

《CSS权威指南》第7章 基本视觉格式化

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿