盒子模型
盒子模型（框模型 box model）
- 瀏覽器在渲染頁面時，它會將頁面中的每一個元素都想象成是一個矩形的盒子，
- 想象成盒子以后，對于頁面的布局就變成了如何擺放盒子
- 每一個盒子從內到外都有以下幾個部分組成
內容區（content）：內容區決定這個盒子能裝多少東西（子元素）
內邊距（padding）：內容區和邊框之間的距離
邊框（border）：盒子的邊框，邊框，是盒子的邊界，出了邊框就是盒子外部的
外邊距（margin）：盒子距離其他盒子的距離
邊框（border）
邊框相關的三個樣式
border-color 邊框的顏色 border-color：#00ffcc;
border-style 邊框的樣式 border-style：dashed;
border-width 邊框的寬度 border-width：30px;
邊框會影響到盒子的可見框大小
border-width表示邊框的寬度
- 可以通過該屬性分別制定邊框四個方向的寬度
border-width: 10px 20px 30px 40px;
如果指定了四個寬度，則會分別設定上右下左四個方向的邊框的寬度
border-width: 10px 20px 30px;
三個值：上 左右 下
border-width: 10px 20px;
兩個值：上下 左右
border-width: 10px;
一個值：上下左右
border-color邊框的顏色，可以分別指定四個邊的顏色，規則和border-width一樣，
border-color: red orange blue aqua; 上右下左----順時針旋轉
border-color: silver;
border-style 指定邊框的樣式
solid 實線
dotted 點狀虛線
dashed 虛線
double 雙線
border-style: solid dotted dashed double;------順時針旋轉
border-style: solid dotted dashed ;--------------上左右下
border-style: solid dotted;------------------------上下左右
border-right: yellow solid ;
邊框（border）
不指定寬度，默認寬度 一般3px
不指定顏色，默認使用字體顏色-隨字體顏色變
邊框可同時設定四個方向邊框的寬度、顏色、樣式，并且沒有順序要求
border:red 10px solid
除了border還有四個
border-top 上 border-right 右 border-bottom 下 border-left 左
內邊距（padding）邊框和內容區之間的距離叫做內邊距
盒子的可見框大小由內容區，內邊距和邊框共同決定
四個方向的內邊距
padding-top 上 padding-right 右 padding-bottom下 padding-left 左
通過padding來同時設定四個方向的內邊距，規則和border-width一樣
padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ;
外邊框（margin）
當前盒子和其他盒子之間的距離，外邊距不會影響盒子的可見框的大小，但是外邊距會影響到盒子實際占地的大小，影響盒子的位置，
四個方向的外邊距：
margin-top margin-right margin-bottom margin-left
由于在瀏覽器中默認情況下，元素是靠左靠上排列的，所以設定上左外邊距時，會移動元素自身，而設定下和右外邊距時，會移動其他元素
外邊距可以是負值，如果是負值則元素會向相反方向移動 margin-top: -50px;
同時設定四個方向的外邊距margin: 10px 20px 30px 40px;
水平方向布局
子元素在父元素的位置是父元素的內容區
子元素在父元素中的水平方向的布局，必須滿足如下等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width（7個值和[自動補全]=父元素的寬度）
在水平方向，有三個值可以設定auto
分別是 margin-left width margin-right
設定為auto以后，瀏覽器會自動計算該屬性的值
- 若七個值和相加不等于父元素寬度，則屬于過度約束，則瀏覽器會自動調整右外邊距的值
- 如果將margin-left 或 margin-right 的一側設定為auto，則另一側會設定盡量大的值
- 若left和right都設定auto，則會將兩側外邊距設定相等的值，導致子元素在父元素中水平居中
垂直方向布局：（簡單）
margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom=父元素高度
box1>box2:
width設定auto時，子元素會占滿父元素
height設定auto時，父元素的高度由子元素內容決定
1. 當父元素寫死時，子元素的高度高于父元素時，會溢位，溢位的子元素不會影響頁面布局，
使用 overflow 來設定溢位內容的處理方式：
可選值：
visible，默認值 溢位內容不會被裁剪直接在父元素外部顯示
hidden，溢位的內容會被裁剪，超過父元素的不會顯示
scroll，生成滾動條，可以通過滾動條查看完整內容，滾動條一直在
auto，根據需要生成滾動條
2. 兄弟元素的外邊距的折疊（margin）
.box1{
height:100px;
Width:100px;
Margin-bottom:100px;
}
.box2{
height:100px;
Width:100px;
Margin-top:100px;
}
外邊距的折疊，垂直方向相鄰的外邊距，會發生外邊距折疊現象，
兄弟元素間的相鄰外邊距，會去兩個外邊距間的最大值（正值）；如果是負值，取絕對值較大的，
兩個外邊距：相鄰的外邊距，誰大用誰的距離
一正一負：取兩個值的和
3. 父子元素的外邊距折疊
父子元素的相鄰垂直外邊距，子元素的外邊距會傳遞給父元素
.box1{
width:200px;
heigth:300px;
background-color:#bfa;
border-top:1px red solid;
}
.box2{
width:200px;
heigth:300px;
background-color:orange;
margin-top:100px;
}
4. 檔案流（常規流、標準流）
-檔案流是網頁中的一個位置，默認情況下頁面中的所有元素都在檔案流中排列
-塊元素在檔案流中的特點
- 自上向下進行排列（獨占一行）
- 默認寬度和元素一樣
- 默認高度被內容撐開
<div> </div>
-行內元素在檔案流中的特點
- 自左向右水平排列，如果一行中不足以容納所有元素則切換到下一行繼續自左向右水平排列
- 默認高度和寬度都會被內容撐開
<span> </span>
5. 行內元素的盒模型
行內元素不支持設定寬度和高度<span> </span>
行內元素可以設定padding（border），但垂直方向padding（border）不會影響頁面的布局
行內元素支持水平方向的外邊距，不支持垂直方向的
6. display
-指定元素所產生的框的型別
-可選值：
inline行內元素
block塊元素
inline-block行內塊元素
-既有行內元素的特點，不會獨占一行；又有塊元素的特點，可設定寬高
none元素不在頁面中顯示
行內元素無法改變寬度和高度，將超鏈接變成塊元素，就可以改變大小
display:block;
a{
width:200px;
height:200px;
background:#ofd;
dispaly:none;
}
.box1:hover a { ////滑鼠碰到連接時出現
display:block;///////////inline
}
7. visibility設定元素的顯示狀態
可選值：visible:默認值，元素正常顯示
hidden不顯示元素，但元素依舊占據位置
display:none :不顯示元素，而且不占據位置
8. 二級選單
當滑鼠移動到xxx時，顯示二級選單
.outer>xxx:hover .inner{祖先與后代關系
display:block;}
9. 默認樣式
為了確保網頁在沒有樣式的情況下，也可以瀏覽，所以瀏覽器都會為網頁設定一些默認樣式，對開發者來說沒有任何作用，并且不同的瀏覽器所設定的默認樣式不同，開發中第一件事就是去除瀏覽器的默認樣式，
*{margin:0;
padding:0; 去掉所有邊框，外邊界}
重點：CSS權威指南---利用reset.css直接引入，可以去除所有默認樣式，推薦
normalize.css--統一
10. 塊元素和行內元素一般情況下，只會在塊中放行內元素，不會向行內元素放塊元素
塊元素：用于頁面的布局 p：不能放任何塊元素
行內元素：主要用于頁面中選中文字 a：什么都能放，除了自己
11. .img-list
{height:190px;
width:470px;
background-color:#33ffss;
margin:auto; //居中
list-style:none; //去掉串列前面的樣式}
.img-list img{
height:100%;
width:100%;}
<ul class=’img-list’>
<li><a href=https://www.cnblogs.com/huaweimian/p/”#”>
<li><a href=https://www.cnblogs.com/huaweimian/p/”#”>
<li><a href=https://www.cnblogs.com/huaweimian/p/”#”>
</ul>
12. 文本修飾text-decoration:none: 去除下劃線
<style>
.nav {width:190px;
height:450px;
padding:10px 0;
margin:0 auto;
list-style:none;
background-color:white;}
.nav li {height:25px;
padding-left:18px;}
.nav li:hover{
background-color:gray;}
.nav li a{
font-size:18px;
text-decoration:none;
color:#333;}
.nav li a:hover{
color:red;}
</style>
<ul class=’nav’>
<li><a href=https://www.cnblogs.com/huaweimian/p/”#”>xxx
<li><a href=”#”>xxx</a><a href=”#”>xxx</a><a href=https://www.cnblogs.com/huaweimian/p/”#”>xxx
<li><a href=”#”>xxx</a><a href=”#”>xxx</a><a href=https://www.cnblogs.com/huaweimian/p/”#”>xxx
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5421.html
標籤：Html/Css
上一篇：HTML基礎-01