css盒子模型說明以及實例
- 无忌哥哥原創
- 2018-06-28 17:23:442883瀏覽
一、什麼是盒子:
1.盒子模型也叫框模型,頁面上的一切元素,都可以看作是盒子
2.盒子是元素的容器,也是元素的載體,說人話就是,盒子是元素的家
二、盒子的種類與功能:
1.元素有二種:塊元素和行內元素,所以他們對應的家:盒子,當然也有二種:塊級盒子,行內盒子
2.塊級盒子通常當作其它元素的容器,行內盒子中總是放內容,通常行內盒子放在區塊級盒子中
三、盒子的排列方式:
1.盒子是頁面上的排列順序,由總調度師:文檔流說了算,除非盒子離家出走,脫離了文檔流
2.文檔流既是元素排列的方式,又是排列的動作,所以既是名詞也是動詞
四、盒子模型的組成部分:
# 1.因為盒子大多做元素容器使用,所以我們主要以塊級盒子為例進行介紹
2.盒子的四大組成部分:content(內容),padding(內邊距),border (邊框),margin(外邊距)
五、我們用四大美女來快速記憶盒子模型:
1.content內容: 我們自己的老婆或女朋友,這是看得見,摸得著的東西
2.padding內邊距:它是透明的,就像你老婆的閨蜜,時刻影響著你和老婆的關係
3.border邊框:它是可見的,它變化多端,風情萬種,最撩人最風騷,就像你的紅顏知己,夢中情人或小情人
4.margin外邊距:和padding內邊距一樣也是透明的,就像老大的女人,哥們的老婆,永遠活在你的想像中
#六、content內容:
1.支持寬度width和高度height設定
2.內部可以是區塊元素,也可以是行內元素
3.支援背景設定
七、padding內邊距:
1.支援四個方向設定大小,按順時針排列:上、右、下、左
2.也可以單獨設定
padding-top: 上邊距
pad padding-top: 上邊距
## -right: 右距 padding-bottom: 下邊距 padding-left: 左邊界 3.支援簡寫:#; 10px 5px; 上10px,右5px,下10px,下5px padding: 10px 20px 30px; 上10px,左右20px,下30px 上下10px, 左右20px padding: 10px; 上,右,下,左全部為10px#八、margin外邊距:## .排列:上、右、下、左
2.也可以單獨設定
margin-top: 上方邊距
margin-right: 右距
# margin-bottom: 下邊距
margin-left: 左邊距
3.支援簡寫:
margin: 10px 5px 10px
margin: 10px 5px 10px 5px, 10px 10px,下5px margin: 10px 20px 30px; 上10px,左右20px,下30px margin: 10px,下30px margin: 10px 20px# margin: 10px;上,右,下,左全部為10px九、border邊框: 1.內外邊距是透明不可見的,所以只有寬度可以設定 2 .邊框是可見的,所以他有三個子屬性可以設定: 寬度,樣式,顏色 3.設定順序: 上、右、下、左 設定上邊框:# border-top-width: 5px; //設定寬度 border-top-style: solid; 設定前景色/顏色 border-top: 5px solid #f60; //簡寫 設定右框:border-right-style: dashed;
border-right-color: #888;
# b -right: 10px d
## border-right: 10px dashed #8# # : border-bottom-width: 10px; border-bottom-style: solid; bordertom-style: solid; bordertom-style:-color:55-bot border-bottom: 10px solid #555; 設定左邊框: border-left-width: 8px;##dotborder-left-width: 8px;##dot
border-left-width -style:border-left-color: #333;
border-left: 8px dotted #333;
; //四條邊框統一設定寬度
border-style: solid; //四條邊框統一設定樣式
#-color: gray;#-color: gray; ## border: 10px solid gray; //四條邊框統一設定的簡寫
十、圓角盒子的設定技巧:
# 1:設定圓角:之前都是透過圖片方式來實作,現在透過程式碼就可以
2:邊框有四個頂點,可以針對每個頂點進行設定
2.1:左上角border-top-left-radius:20px;
2.2:右上角border-top-right-radius:20px;
2.1:右下角border-bottom-right-radius:20px;
## 下角下角 2.1 bottom-left-radius:20px; 注意:老外與我們思維不一樣,屬性中是把上top下bottom寫在左右之前<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.盒子模型</title>
<style>
.box1 {
/*在父级盒子.box已经设置过了*/
/*width: 200px;*/
/*height:200px;*/
/*background-color: #f89;*/
border: 2px solid #363636;
/*通过计算,设置内边距40px,可实现图片居中*/
padding:40px;
/*结果并未实现居中,这是为什么呢?因为内边距会撑开盒子,这与我们生活中的盒子是不一样的*/
/*解决方法有二个:1.修改盒子大小,宽高减去padding值,2.为该盒子套一个父级盒子,单独设置宽高*/
/*第一种方案:修改当前盒子大小*/
/*width: 120px;*/
/*思考:为什么要减去80px?因为边距是成对的,40px的2倍就是80px*/
/*height:120px;*/
}
/*.box是.box1的父级盒子,在这里设置了宽高,子盒子就不必设置了*/
/*我这里忽略了边框宽度的影响*/
.box {
width: 200px;
height:200px;
}
.box2{
width: 200px;
height:200px;
background-color: lightskyblue;
borer: 2px solid #333;
margin-bottom: 20px;
}
.box3{
width: 200px;
height:200px;
background-color: lightgreen;
borer: 2px solid #333;
/*margin-top: 20px;*/
/*上下外边距的二个特征:*/
/*1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;*/
/*2.如果上下外边距不相待,则会产生塌陷,最终数值大的外边距胜出,以它为准*/
margin-top: 30px;
/*注意:左右外边距不会产生叠加和塌陷,仍是各自相加为最终结果*/
}
/*边框设置*/
.box4 {
width: 200px;
height:200px;
background-color: lightskyblue;
/*设置上边框:*/
/*设置宽度*/
/*border-top-width: 5px;*/
/*设置样式*/
/*border-top-style: solid;*/
/*设置前景色/颜色*/
/*border-top-color: #f60;*/
/*简写*/
/*border-top: 5px solid #f60;*/
/*设置右边框:*/
/*border-right-width: 10px;*/
/*border-right-style: dashed;*/
/*border-right-color: #888;*/
/*border-right: 10px dashed #888;*/
/*设置下边框:*/
/*border-bottom-width: 10px;*/
/*border-bottom-style: solid;*/
/*border-bottom-color: #555;*/
/*border-bottom: 10px solid #555;*/
/*设置左边框:*/
/*border-left-width: 8px;*/
/*border-left-style: dotted;*/
/*border-left-color: #333;*/
/*border-left: 8px dotted #333;*/
/*所有边框使用统一设置:*/
/*统一设置宽度*/
/*border-width: 10px;*/
/*统一设置样式*/
/*border-style: solid;*/
/*统一设置颜色*/
/*border-color: gray;*/
/*统一设置的简写*/
/*border: 10px solid gray;*/
}
/*圆角盒子设置技巧*/
.box5 {
width: 200px;
height:200px;
background-color: #f89;
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;
/*如果每个角的圆度是一样的,可以简化*/
border-radius: 20px;
/*如果原盒子是一个正方形的话,只需要把角度设置为宽度的一半即可得到一个正圆*/
border-radius: 100px;
/*为了适应外部盒子变化,建议设置为百分比,例如:50%,效果完全一样*/
/*border-radius: 50%;*/
}
/*创建有阴影盒子的技巧*/
.box6 {
width: 200px;
height:200px;
background-color: lightskyblue;
/*设置圆角*/
border-radius:50%;
/*设置内边距并重新调整盒子大小*/
padding: 10px;
width: 180px;
height: 180px;
/*设置盒子的阴影*/
/*box-shadow: X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 ;*/
/*外发光:模糊8px,阴影到边框为3px*/
box-shadow:0 0 8px 3px #888;
/*内发光:模糊8px,阴影到边框为3px*/
box-shadow:0 0 8px 3px #888 inset;
/*向右下投影*/
box-shadow:8px 8px 8px 3px #888;
/*向左上投影*/
box-shadow:-8px -8px 8px 3px #888 ;
}
</style>
</head>
<body>以上是css盒子模型說明以及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！