盒子模型主要由四個部分組成
content（內容）：對應盒內內容
border（邊框）：對應包裝盒的外殼，有厚度
margin（外邊距）：位於邊框外部，是邊框與外部的間隙
padding（內邊距）：位於邊框內部，是內容與邊框的距離，對應包裝殼的填充部分
1.邊框線
border-width：設定邊框線寬度
border-style：設定邊框線樣式
border-color：設定邊框線顏色
>
charset
="utf-8"
>
>
邊框線title
>
>
divstyle
>
head
>
>
>
div>
body
>
background-color：設定背景顏色
background-image：設定背景
background-position：設定背景的位置
background-size：設定背景的大小
background-repeat：設定背景是否重複
background-attachment：設定背景相對瀏覽器的定位位置
>
charset
="utf-8"
>
>
背景樣式title
>
>
divstyle
>
head
>
>
>
div>
body
>
margin-right：距離盒子右側的距離
margin-bottom：距離盒子底部的距離
margin-left：距離盒子左側的距離
>
charset
="utf-8"
>
>
外邊距title
>
>
*div
divp,h4ph4
style
>
head
>
>
>
>
p>
>
h4>
div>
body
>
解決方法：
1.不讓其作為第乙個子元素 不合適（新增了空元素有內容時會影響實際的距離）
2.給父元素新增一條邊框線 不合適（邊框線的大小也會影響元素佔據的位置大小）
3.使用內邊距代替
padding簡寫方式（margin簡寫方式也相同）
padding:20px 10px 15px 25px;分別代表上 右 下 左
padding:20px 10px 15px;分別代表上 左右 下
padding:20px 10px;分別代表上下 左右
padding:20px;上下左右
>
charset
="utf-8"
>
>
內邊距title
>
>
*div
divp
pdiv
style
>
head
>
>
>
>
p>
div>
body
>
display:none;隱藏元素
display:block;將元素變為塊元素
display:inline;將元素變為行元素
display:inline-block;將元素變為行內塊元素
使用display屬性實現導航欄效果
>
charset
="utf-8"
>
>
title
>
>
divp
div:hover paul
ul li
ul li
ul li:hover
ul li:hover a
style
>
head
>
>
>
>
p>
div>
>
>
>
href="
">
b站主頁a
>
li>
>
href="
">
遊戲中心a
>
li>
>
href="
">
漫畫a>
li>
>
href="
">
番劇a>
li>
ul>
body
>
HTML中盒子模型
盒子模型的組成 margin 外邊距 盒子與盒子之間的距離 border 邊框 包裝盒 padding 內邊距 填充物 content 內容 買好的東西 1.margin 合起來寫的屬性 4個 當你寫乙個的時候，四個全部相同 兩個的時候，上右，對邊補齊 三個的時候，上右下，對邊補齊 margin t...
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...
html盒子模型
什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解，日常生活中所見的盒子也具有這些屬性，所以叫...