CSS(day02)
1.尺寸屬性
注意
max-width:100% 代碼元素可以縮放,但是最大寬度不能超過原始尺寸
2.頁面中運行設置尺寸的元素
總結: 1.有塊級元素都可以設置寬高
2.所有行內塊默認自帶寬高,也可以設置寬高
3.多數行內元素設置寬高無效
4.屬性帶有寬高的標籤,都可以設置樣式的寬高(img,table)
3.溢出的處理
當內容較大,元素區域較小的時候,會發生溢出
默認是縱向溢出
overflow: 取值 1.默認缺省值 visible 溢出部分顯示
hidden 溢出部分隱藏
scroll 添加滾動條,不管是否溢出都添加滾動條的槽
auto 自動添加滾動條,不溢出不添加
overflow-x:scroll;單獨設置x軸
overflow-y:scroll;單獨設置y軸
如何改成橫向溢出
在寬度比較小的容器內部,添加一個寬度較大的子元素
附加知識點–
1.顏色的單詞
2.#rrggbb 6個16進制 #000000黑色 #ffffff 白色
#ff0000 #00ff00 #0000ff
3.簡寫方式#aabbcc—>#abc
#f00 #0f0 #00f #ff0 #f0f #0ff
4.rgb(r,g,b)
5.rgba(r,g,b,alpha); alpha:透明度,取值 0~1之間
6.rgb(r%,g%,b%)
7.hsl();
#006699—>rgb(0,102,153)
3.邊框
①邊框的簡寫方式
border:width style color;
width:邊框的粗細,px爲單位的數字
style:邊框的樣式 solid實線
dotted 點點虛線
dashed 斷線虛線
double 雙實線
color:邊框顏色 transparent等同於 rgba(0,0,0,0)
最簡方式:border:style;
border:0;取消邊框 (css中,只有數值0,可以省略單位)
②單邊定義
只設置某一條邊的3個屬性
border-方向:width style color;
方向:top/right/bottom/left
③單屬性定義
border-style:solid;
border-width:10px;
border-color:#0ff;
④單邊單屬性定義
border-方向-屬性: 一共12個
ex:border-top-color:#f00;
border-bottom-style:solid;
4.倒角,圓角
border-radius: 以px爲單位的數字
% 50%就是一個圓
單角設置
border-上下-左右-radius:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
border-radius:0 取消圓角
5.邊框陰影
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow 水平方向的陰影偏移
v-shadow 垂直方向的陰影偏移
blur 陰影模糊距離
spread 陰影大小
color 陰影顏色
最簡方式 box-shadow:h-shadow v-shadow;
6.輪廓
邊框的邊框,繪製於邊框外面的線條,不佔據元素空間
outline:width style color;
一般情況,我們會把輪廓,清除 outline:0;
———————————————————————————————————————————————
五.框模型----盒子模型(重點☆☆☆☆☆)
框模型—元素在頁面上實際佔地空間的計算方式(公式)
默認實際佔地寬度:
左外邊距+左邊框+左內邊距+內容區域寬度+右內邊距+右邊框+右外邊距
默認實際佔地高度:
上外邊距+上邊框+上內邊距+內容區域高度+下內邊距+下邊框+下外邊距
外邊距margin:邊框以外的距離(元素與元素之間的距離)
內邊距padding:邊框與內容區域之間的距離
1.外邊距margin
改變外邊距,元素有位移效果,
外邊距,由於元素位置的微調,
精確的關注,上外邊距和左外邊距
①語法
margin:v1; 設置4個方向的外邊距
margin-top:
margin-right
margin-bottom
margin-left
取值:距離哪個方向有多遠
1.px爲單位的數字,
top: + ↓, - ↑
left: + →,- ←
2.% 上右下左,都是父元素寬度的百分比
3.auto, 上下外邊距auto無效,auto只對設置了寬度的元素有效
讓元素在父元素內,水平居中
②簡寫方式
margin:v1; 設置4個方向的外邊距 margin:auto; 水平居中
margin:v1 v2; v1:上下 v2:左右
margin:0 auto; 水平居中 margin:20px auto;
margin:v1 v2 v3; v1:上 v2:左右 v3:下 margin:10px auto 20px
margin:v1 v2 v3 v4; 上右下左
2.外邊距的特殊效果
①外邊距合併
兩個垂直外邊距相遇時,會合併成一個.值以大的爲準
解決方案:1.佈局設計的時候進行規避
2.只寫一個垂直外邊距,一下把數值寫滿
☆☆☆☆☆☆☆☆☆
③默認自帶外邊距元素
body 8px h1~h6 p ol dl pre
ul 上下16px 左內邊距40
④外邊距的溢出 在特殊情況下,爲子元素添加上外邊距,會作用到父元素上 特殊情況:1.父元素沒有上邊框 2.子元素內容區域的上沿與父元素內容區域的上沿重合 (爲第一個子元素設置上外邊距時,此說法不嚴謹) 解決方案: 1.給父元素添加上邊框,弊端:增加了父元素實際佔地高度 2.給父元素設置上內邊距,弊端: 增加了父元素實際佔地高度 3.給父元素添加overflow:auto/hidden; 弊端,如果父元素就不能溢出顯示 ☆☆☆☆☆ 4.給父元素添加一個大兒子,
,空的table