[k]css盒模型

時間 2020-07-07

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

box-sizing : content-box || border-box || inheritcss

一、content-box:此值爲其默認值。元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。html

二、border-box:元素的寬度/高度等於元素內容的寬度/高度。（從上面Box Model介紹可知，咱們這裏的content width/height包含了元素的border,padding,內容的width/height。此處的內容寬度/高度=width/height-border-padding）。jquery

.innerWidth(); .outerWidth(); .width(); .css(width) || .innerHeight(); .outerHeight(); .height(); .css(height)css3

一、.innerWidth()/.innerHeight()爲匹配的元素集合中獲取第一個元素的當前計算寬度/高度值,包括padding，可是不包括border。這個方法不適用於window 和 document對象，能夠使用.width() 代替。瀏覽器

二、.outerWidth([includeMargin])/.outerHeight([includeMargin])獲取元素集合中第一個元素的當前計算寬度/高度值,包括padding，border和選擇性的margin。返回一個整數（不包含「px」）表示的值，或若是在一個空集合上調用該方法，則會返回 null。若是 includeMargin 省略或者false，padding 和 border會被包含在計算中；若是true，margin也會被包含在計算中。這個方法不適用於window 和 document對象，能夠使用.width()代替。spa

三、.css(width) 和 .width()之間的區別是後者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字符串（例如，400px）。當一個元素的寬度須要數學計算的時候推薦使用.width() 方法。.css(height) 和 .height()之間的區別同理。.net

四、.width( value )/.height( value )給每一個匹配的元素設置CSS寬度/高度。code

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>盒模型</title>
 6 <style>
 7 *{padding:0;margin:0;}
 8 div{
 9     width:500px;height:200px;
10     margin:20px;padding:10px;border:2px solid #666;
11     box-sizing:border-box;
12 }
13 </style>
14 <script src="jquery.min.js"></script>
15 </head>
16 <body>
17 <div id="box">
18     box-sizing:border-box；以上結論適用於Ie8+,Firefox,Chrome
19 </div>
20 <script>
21 var $box = $('#box');
22 console.log('box-innerWidth:' + $box.innerWidth());     //box-innerWidth:496
23 console.log('box-width:' + $box.width());               //box-width:476
24 console.log('box-outerWidth:' + $box.outerWidth());     //box-outerWidth:500
25 console.log('box-cssWidth:' + $box.css('width'));       //box-cssWidth:500px
26 console.log('box-innerHeight:' + $box.innerHeight());   //box-innerHeight:196
27 console.log('box-height:' + $box.height());             //box-height:176
28 console.log('box-outerHeight:' + $box.outerHeight());   //box-outerHeight:200
29 console.log('box-cssHeight:' + $box.css('height'));     //box-cssHeight:200px
30 </script>
31 </body>
32 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>盒模型</title>
 6 <style>
 7 *{padding:0;margin:0;}
 8 div{
 9     width:500px;height:200px;
10     margin:20px;padding:10px;border:2px solid #666;
11     box-sizing:content-box;
12 }
13 </style>
14 <script src="jquery.min.js"></script>
15 </head>
16 <body>
17 <div id="box">
18     box-sizing:content-box；以上結論適用於Ie8+,Firefox,Chrome
19 </div>
20 <script>
21 var $box = $('#box');
22 console.log('box-innerWidth:' + $box.innerWidth());     //box-innerWidth:520
23 console.log('box-width:' + $box.width());               //box-width:500
24 console.log('box-outerWidth:' + $box.outerWidth());     //box-outerWidth:524
25 console.log('box-cssWidth:' + $box.css('width'));       //box-cssWidth:500px
26 console.log('box-innerHeight:' + $box.innerHeight());   //box-innerHeight:220
27 console.log('box-height:' + $box.height());             //box-height:200
28 console.log('box-outerHeight:' + $box.outerHeight());   //box-outerHeight:224
29 console.log('box-cssHeight:' + $box.css('height'));     //box-cssHeight:200px
30 </script>
31 </body>
32 </html>