本篇文章給大家帶來的內容是關於CSS中text-transform屬性實現字串轉換的代碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。
1.關於box-sizing: 屬性用於更改用於計算元素寬度和高度的預設的 CSS 盒子模型。
值有：content-box（預設值），border-box，inherit。
A、content-box：寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
B、border-box：為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
<!DOCTYPE html><html><head><style> .box,.box1{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:200px; height: 50px; border:10px solid red; float:left;}.box1{ margin-left: 10px; box-sizing:content-box; } </style> </head> <body> <div class="container"> <div class="box">這個 div 佔據部分。</div> <div class="box1">這個 div 佔據部分。</div> </div> </body> </html> </body> </html>
，圖1的p屬性border-box的內盒尺寸（不包括margin）為200*50，盒子的長=width，包括了border、paddind、content，content=width-border*2-padding*2=170(藍色框)；
圖2的p屬性content-box的內盒尺寸（不包括margin）為230*80，盒子的長=width+border*2+padding*2=230，width=content(藍色框)；
C、inherit：規定應從父元素繼承 box-sizing 屬性的值。
.box2{ width:200px; height: 50px; padding: 5px; border:10px solid red; float:left; box-sizing:inherit;}<p class="box"> <p class="box2">這個 p 佔據部分。</p></p>
.box2繼承了box的border-box的屬性值。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
