您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS技術中的盒子模型是什么”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“CSS技術中的盒子模型是什么”這篇文章吧。
盒子模型:
布局一般順序:
1、關注內容,放內容;
2、控制內容與邊框距離,Padding,內邊距;
Padding(內邊距,內容距離標簽邊框的距離,該元素的寬度=內容寬度+padding):10px; 代表上、右、下、左(順時針)內容與邊框的距離都是10PX;還可以控制內邊距的上下、左右距離:50px 100px;可以這樣書寫完全控制 padding:10px 20px 30px 40px;
3、border:外邊框。可以單獨寫border-bottom:1px solid black; 也可以簡寫border:1px solid black;
4、Margin:外邊距。邊框距離容器的距離。Margin:10px; 類似于padding上、右、下、左,外間距,但是只有頂部、左側有效。Margin:10px20px 30px 40px;
margin-left:100px; margin-top:100px;
5、針對于表格:cellpadding為單元格內容距離單元格邊框的邊距;cellspacing單元格與單元格之間的邊距。
邊框圓角: border-radius:50px;
<img src="anniu.jpg" width="200px" height="100px" style="cursor:pointer; border-radius:10px;" onclick="alert('haha');" />
對齊(align):
1、容器對齊:
該標簽相對于容器對齊,該標簽加上align屬性(塊元素無效);
2、內容對齊(左、右、居中、兩端)
該標簽的內容樣式 style=”text-align:center;”
以上是“CSS技術中的盒子模型是什么”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。