/*background顏色會渲染padding區域*/
/*padding-top: 25px;
padding-left: 25px;
padding-bottom: 25px;
padding-right: 25px;
*//*上述**簡寫方法 4個值 順時針
上 右 下 左 */
padding: 10px 20px 30px 40px;
/*如果只有3個值,代表 上 左右 下
2個值表示 上下,左右
1個值表示 上下左右
*//*
設定乙個邊框需要3個值
邊框寬度 px
邊框型別
solid 實線
dotted 小正方點
dashed 虛線
邊框顏色
可以不寫,預設為與當前文字的預設顏色相同
*//*border: 10px dashed black;
上述寫法相當於下面*/
/*border-top: 10px dashed black;
border-right: 10px dashed black;
border-left: 10px dashed black;
border-bottom: 10px dashed black;
color:red;*/
/*border-top:1px dashed black; 相當於*/
border-top-color: black;
border-top-style: dashed;
border-top-width: 1px;
/*同理,下左右都可以按照上述拆分的方式去寫*/
/*當元素需要與別的元素之間有距離時,可以考慮使用margin,margin的區域是透明的,背景色不會渲染到該區域.*/
/* margin-top:50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50px; */
margin: 60px 200px 100px 100px;
/***從上向下走,所以下面的10px會覆蓋上面的4個值,也就是實際輸出的值為10*/
margin: 10px;
/*overflow:hidden 把超出/溢位的內容給隱藏*/
盒模型:把每個html元素看做乙個盒子
1.盒模型結構
2.盒模型如何影響元素之間的位置關係
-->
盒模型 標準盒及怪異盒區別及使用
盒子模型可以用來對元素進行布局，包括內邊距，邊框，外邊距，和實際內容這幾個部分。盒子模型分為兩種 第一種是w3c標準的盒子模型 標準盒模型 第二種ie標準的盒子模型 怪異盒模型 區別 寬度 width 內容區域 content 的寬度 高度 height 內容區域 content 的高度 盒子所佔的...
CSS盒模型及排版
css盒模型由四部分組成 margin border padding content。外邊距 邊框 內邊距 內容。我們設定的width和height都是內容的大小，從而影響整個盒子的大小。盒子的佔位大小包括margin，但盒子的尺寸不包括margin。比如 盒子的高度 border width pa...
CSS盒模型及應用
注意事項 important 如果乙個盒子沒有給定寬度 高度或繼承父類的寬度 高度，盒子大小不受影響 新盒子 盒子大小就是寬度,padding width 包含在width中 box sizing border box 盒子計算尺寸 重點 box sizing content box 外盒尺寸計算 ...