3- 版面配置 ~ 關於 盒子模型 文章列表

3- 版面配置 ~ 關於 盒子模型



Box Model(區塊模型)

關於 CSS 盒子模型

CSS盒子模型本質上是一個包裝每個HTML元素的框。 它包括:邊距,邊框,內距和實際內容。

內容 - 顯示文本和圖像的框、內容
內距 - 清除內容周圍的區域。 內距是透明的
邊框 - 圍繞內距和內容的邊框
邊距 - 圍繞邊框周圍的區域。 邊距是透明的

當你設定了元素的長度和寬度後,實際顯示的元素卻比你設定的還大:Why ? 因為元素的框線(border)和內距(padding)是外加上去的,會撐開元素。
看下面的例子,我們設定了兩個都擁有相同寬度和高度的樣式,但最後元素顯示的實際大小卻不太一樣。

.Box1 {
width: 500px;
height: 150px;
margin: 20px auto;
background:#ffe;
}

.Box2 {
width: 500px;
height: 150px;
margin: 20px auto;
padding: 30px;
border:solid #33ccff 20px;
}
Box1

寬度 500px,高度 150px
Box2 + 框線(20px)+ 內距 (30px)

寬度 = 600px,高度 = 250px
每次排版佈置要設定每一個盒子區塊元素的寬高時,都要做計算加加減減,是不是很麻煩? 謝天謝地,現在 CSS 出現一個新的屬性.box-sizing,你不需要再這麼做了, 當元素設定成 box-sizing: border-box;之後, 框線和內距將變成內含,自此你只要設定好物件的邊界寬高,不用再考慮框線和內距。

限制最大和最小值

max-width屬性 ,min-width屬性

max-height屬性 ,min-height屬性

限制最大值、可以防止元素、圖片(img) 溢出版面,在我的格子裡的留言輸入方塊裡, 就使用了最大值和最小值約制寬度,最小值約制高度,你可以拉拉左下角,看它的伸縮 狀況如何,再去看看你的或別人的有何差異 ?

Reset CSS – 重置歸零

使用 CSS 最令人頭痛的部份就是各家瀏覽器的預設值差異性太多了,在排版的時候就得依每個瀏覽器的不同,而多花好多時間來調整改寫 CSS 語法。只要在我們寫的 CSS 前掛上這一段「Reset CSS」的語法,就可以輕鬆解決大部份瀏覽器的差異了。

*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

留言 ( 2 )

  1. 潘越雲的桂花巷這裡沒有吧?[Qz::1520435578-1071539313.jpg]
    好像在痞客格子是嗎?[Qz::1520435815-1151537933.png]

    回覆刪除
    回覆
    1. 我也忘記放在哪裡了 [Qz::1520435539-2843042347.jpg] 現在、把它掛到 ->> 4- 版面配置 https://e-717.blogspot.com/p/4.html

      刪除

張貼留言




           

預 覽 視 窗

新舊排序 :

    © Copyright 2021 Design By 灰鴿   技術堤供 : Blogger