當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS：盒模型

發布時間：2025/3/19 CSS 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS：盒模型小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

在CSS中有兩種盒模型:

(1)W3C標準盒模型：包括content(內容)，padding(內邊距：內容與邊框的距離)，border(邊框)；margin(與其他元素的距離)，在此模型中，width/height(寬度和高度就是內容的寬和高)；

（2）IE下怪異模型：當html沒有寫<!doctype html>時，在IE6下就會開啟怪異模式，此時的寬度和高度（width/height）=content+padding+border;

eg:

應用：

在父子盒子中，給子元素加padding想要移動子元素的位置，而不改變父元素的大小，可以將標準模型轉化為怪異模型（box-sizing:border-box;）;
eg:
結果：
box-sizing:border-box的應用:原生普通文本框<input >和文本域<textarea>的100%自適應父容器的寬度；width/border 和 padding 注定要共存，同時還要整體寬度 100%自適應容器。<input >，<textarea>都有border,而且需要padding的大小，否則輸入的光標會頂著邊框。

解決: textarea{

width:100%;

-ms-box-sizing:border-box

box-sizing:border-box;

}
eg:
結果
box-sizing:改變width/height的作用細節；

內在盒子：content-box,padding-box,border-box,margin-box;默認情況下width是作用在content-box上的，box-sizing的作用是把width作用的盒子變成其他幾個；

{

box-sizing:content-box;//默認值

box-sizing:padding-box;//

box-sizing:border-box;//支持，此時，border和padding/content平分width

box-sizing:margin-box;//不支持
注意事項：絕對定位的元素，使用百分比設置其寬和高時，它參考的是其第一個定位非static祖先節點的padding-box;即width:padding+content

轉載于:https://my.oschina.net/u/4045971/blog/3017010

以上是生活随笔為你收集整理的CSS：盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。