box盒子
它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。
盒子模型的組成:
盒子內容 + 盒子的內邊距(盒子內容到邊框的填充) + 盒子邊框 + 盒子外邊距
border-style 邊框樣式
/*border-style: solid;*/
/*border-style: dotted;*/
/*border-style: dashed;*/
border-style: double;
border-color 邊框顏色
/*border-color: green;*/
/*border-color: #008000;*/
border-color: rgb(255,0,0);
border-width 邊框粗細
border-width: 1px;
上方的樣式直接設定多個值可以表示不同的方向
/* 所有的 */
/*border-color: red;*/
/* 上下 左右 */
/*border-color: red green;*/
/* 上 左右 下 */
border-color: red green yellow;
/* 順時針:上右下左 */
/*border-color: red green black pink;*/
例如:
border-top-style
border-right-style
border-bottom-style
border-left-style
…另外css還給提供了統一的邊框設定方式:
/* 可以同時設定顏色、粗細、樣式 */
border: 1px solid red;
例如:
border-top:1px solid red;
border-bottom:***;
padding(填充):它可以調整邊框到元素內容的距離。
padding-top
padding-right
padding-bottom
padding-left
padding:它可以統一設定不同方向的距離
/*padding: 50px;*/
/* 上下 左右 */
/*padding: 50px 20px;*/
/* 上 左右 下 */
/*padding: 10px 20px 30px;*/
/* 上右下左 */
padding: 10px 20px 30px 40px;
margin:設定元素的外邊距,也就是和其他元素之間的距離
margin-top
margin-ritght
margin-bottom
margin-left
margin
box-sizing:設定盒子模型尺寸計算規則的。
content-box(預設值):計算盒子尺寸時,只計算盒子元素內容,不包括內邊距和邊框。
border-box:計算盒子尺寸時,不止計算盒子元素內容,還包括內邊距和邊框。(大小一共就那麼大,所以到時候會調整元素內容的空間)
預設情況下,在標準文件流中,元素是分為兩大類的。
塊元素:獨佔一行
,擁有完整的盒子模型設定
行內/內聯元素:如果有多個內聯,會排在一行,且盒子模型不完整。它的大小主要由內容撐開。
實際上之所以出現這種效果,就是因為dispaly
屬性,塊元素預設為block
,而內聯元素預設為inline
。
如果想將塊元素和內聯元素進行轉換,可以通過此屬性。
display:
none 隱藏
block 塊元素的預設值
inline 內聯元素的預設值
inline-block 行內塊元素 (但是有不可控的間隙)
**float:**能夠實現塊元素在一行並列布局展示。
none 預設值
left 左浮動
right 右浮動
當浮動出現後,會導致:
兄弟元素受到浮動影響,導致顯示錯亂
可以通過clear
清除浮動,解除浮動影響。
如果都浮動了,父級元素會產生邊框塌陷
利用新增空子元素解決
在父級元素最後新增乙個子元素,然後將其清除兩側浮動。
/* 表示在元素最後面設定資訊 */
.father:after
設定父級高度(變通玩法 下三濫玩法)(不推薦)
利用overflow(溢位)特性
當overflow設定的標籤沒有設定高度時,會自動跟隨溢位元素進行高度適應。
position:定位
static 預設的
relative 相對的
設定它,會保留原有的位置,然後通過方向調整可以定位位置,但是它的定位偏移是相對於原來的位置
absolute 絕對的
設定它之後,原有位置會消除,但是它缺省會保留在原有位置上方,它後面的元素會向上偏移。
使用方向調整,預設情況下會相對於瀏覽器邊框進行偏移,
當然如果它的某一級父元素設定過定位,則會相對於父級元素偏移。
往往它會結合著relative使用
fixed固定的
「狗皮膏藥」 固定定位
CSS高階操作
box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1 邊框 例如 另外css還給提供了統一的邊框設定方式 可以同時設定顏...
CSS高階操作
box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看做是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過布局盒子資訊來進行 盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.1邊框 border style solid border style...
CSS高階操作
css高階操作box盒子 它是抽象於現實生活中的盒子,將網頁中的所有元素看作是乙個個的盒子,那麼在調整網頁中的這些元素布局時,就可以通過調整盒子資訊來進行。盒子模型的組成 盒子內容 盒子的內邊距 盒子內容到邊框的填充 盒子邊框 盒子外邊距 2.掌握盒子模型的使用 2.1邊框 border syle邊...