生活随笔
收集整理的這篇文章主要介紹了
前端基础之CSS_2
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
閱讀目錄
摘要
- 盒子模型
- 浮動
- 清除
- 溢出
- 定位
- 模態(tài)框
- rgba 與 opacity透明區(qū)別
一、CCS盒子模型
- margin:標簽與標簽之間的距離,主要用于控制標簽周圍間的間隔,從視覺上達到相互分開的目的。
- padding:標簽內(nèi)內(nèi)容與標簽邊框之間的距離。
- border:邊框的意思,每個標簽都會有一個區(qū)域,這個區(qū)域邊緣就是標簽的邊框。
- content:盒子的內(nèi)容,也就是每個標簽的內(nèi)容,顯示文本和圖像。
- 具體使用過程:
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>盒子模型
</title
>
</head
>
<style
>body
{margin
: 0;}.c1
{border
: black 1px solid
;width
: 100px
;height
: 100px
;margin
-left
: 50px
;margin
-top
: 25px
;background
-color
: tomato
;}.c2
{border
: black 1px solid
;width
: 100px
;height
: 100px
;margin
-top
: 25px
;margin
-left
: 50px
;background
-color
: blue
;}.c3
{border
: black 1px solid
;width
: 50px
;height
: 50px
;margin
-left
: 20px
;margin
-top
: 20px
;background
-color
: greenyellow
;}
</style
>
<body
>
<div
class="c1"><div
class="c3"></div
>
</div
>
<div
class="c2"></div
>
</body
>
</html
>
標簽與標簽之間的margin是相對的,它的上下左右有時候只能有2處可以確定,另外2邊由于沒有參照不會有間隔,所以使用時候一般不會全部上下左右都寫上。要表示那一邊就寫上那一邊。
- padding;使用方法與margin相同,相比margin有些不同:
div
{padding
-top
: 10px
;padding
-right
: 20px
;padding
-bottom
: 30px
;padding
-left
: 40px
;
}可以簡寫:padding
: 10px 20px 30px 40px順序:上右下左padding的常用簡寫方式有:提供一個,用于四邊;
提供兩個,第一個用于上-下,第二個用于左-右;
如果提供三個,第一個用于上,第二個用于左-右,第三個用于下;
提供四個參數(shù)值,將按上-右-下-左的順序作用于四邊;
需要注意:有一些標簽自帶一個或者多個屬性對應(yīng)值,比如p標簽在創(chuàng)建的時候就初始自帶margin-top:16px和margin-bottom:16px,ul標簽自帶margin-left:40px
二、浮動(只要涉及到頁面布局,都會用到浮動):
- 顧名思義,就是讓標簽浮動起來,任何標簽都能浮動,浮動后的標簽會變成一個塊級框。
- 浮動規(guī)律:
1:浮動框可以向左向右移動,知道它的外邊緣碰到包含框或另一個浮動的邊框為止。
2:浮動框不在文檔流中,所以它已經(jīng)脫離文檔流,也就是說,浮動下面的文檔流式無視浮動框的位置的。 - 浮動的三種方式:
float: left
;
float: right
;
float: none
;
--------------------------------------------------------------------注:如果你對python感興趣,我這有個學習Python基地,里面有很多學習資料,感興趣的
+Q群:
895817687
--------------------------------------------------------------------<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>浮動
</title
><style
>.c1
{width
: 80px
;height
: 300px
;background
-color
: red
;float: left
;}.c2
{width
: 80px
;height
: 300px
;background
-color
: blue
;float: left
;}</style
>
</head
>
<body
><div
class="c1"></div
><div
class="c2"></div
>
</body
>
</html
>
浮動的時候,如果是
2個div占用一行,可以將寬度width用百分比的形式設(shè)置,填充一整行。
<style
>.c1
{width
: 20%;height
: 300px
;background
-color
: red
;float: left
;}.c2
{width
: 80%;height
: 300px
;background
-color
: blue
;float: left
;}</style
>
三、清除 clear屬性規(guī)定標簽的那一側(cè)不允許其他浮動標簽
-
注意:clear屬性只會對自身起作用,不會影響其他標簽。
-
清除浮動:浮動雖然好用,但是也有缺點(會導致父標簽塌陷問題,可以用清除屬性來解決)
-
清除浮動副作用的三種方法:
1:固定高度
2:偽元素清除(使用較多)
3:overflow : hidden
-
偽元素清除法:
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>影響
</title
>
</head
>
<style
>body
{margin
: 0;}.clearfix
:after
{content
: '';clear
: both
;display
: block
;}.c1
{border
: 4px black solid
;}.c2
{width
: 100px
;height
: 100px
;float: left
;background
-color
: aquamarine
;}.c3
{width
: 100px
;height
: 100px
;float: left
;background
-color
: green
;}.c4
{background
-color
: red
;}</style
>
<body
>
<div
class="c1 clearfix"><span
class="c4">span
</span
><div
class="c2"></div
><div
class="c3"></div
>
</div
>
</body
>
</html
>
下面是清除前與清除后的截圖:
四、溢出(overflow)
- 當文本長度大于標簽設(shè)置的長度時候,文本就會超出標簽設(shè)置的寬度,跑到外面去,同理,如果是圖片也是一樣,這種情況就是溢出。
- 溢出是由于規(guī)定長寬與實際標簽內(nèi)容不一致導致的,所以有時候需要對溢出進行處理,處理方法有:
overflow(水平和垂直均設(shè)置)
overflow
-x(設(shè)置水平方向)
overflow
-y(設(shè)置垂直方向)
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>溢出
</title
>
</head
>
<style
>div
{width
: 60px
;height
: 60px
;border
: black solid 1px
;/*overflow
: hidden
; !
*隱藏
*!
*//*overflow
: scroll
; !
*水平滾動
*!
*/overflow
: scroll
;}
</style
>
<body
>
<div
>66666666666666666</div
>
</body
>
</html
>
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>頭像
</title
>
</head
>
<style
>body
{background
-color
: whitesmoke
;}/*img
{*//*width
: 100px
;*//*height
: 100px
;*//*border
: red 1px dashed
;*//*border
-radius
: 50%;*//*}*/.c1
{width
: 100px
;height
: 100px
;/*border
: red 1px dashed
;*/border
-radius
: 50%;overflow
: hidden
;}img
{width
: 100%;}
</style
>
<body
>
<div
class="c1"><img src
="泉新一.png" alt
="">
</div
>
</body
>
</html
>
五、定位(position) (通過某一相對位置或者絕對的位置將標簽定在某一個位置)
相對定位:(relative)
相對定位是相對于該元素在文檔流中的原始位置,即以自己原始位置為參照物。有趣的是,即使設(shè)定了元素的相對定位以及偏移值,元素還占有著原來的位置,即占據(jù)文檔流空間。對象遵循正常文檔流,但將依據(jù)top,right,bottom,left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意:position:relative的一個主要用法:方便絕對定位元素找到參照物。
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>相對定位
</title
><style
>body
{margin
: 0}.c1
{width
: 200px
;height
: 200px
;background
-color
: red
;left
: 100px
;top
: 100px
;position
: relative
;}.c2
{width
: 100px
;height
: 100px
;background
-color
: wheat
;}.c3
{width
: 100px
;height
: 100px
;background
-color
: aqua
;}</style
><!
--相對移動,不脫離文檔流,也就是標簽移動后,原來的位置還保留著,
--><!
--不會有其他的標簽填補。
--></head
>
<body
>
<div
class="c1">66666666</div
>
<div
class="c2">666666</div
>
<div
class="c3"></div
></body
>
</html
>
-
絕對定位:(absolute)
定義:設(shè)置為絕對定位的元素框從文檔流完全刪除,并相對于最近的已定位祖先元素定位,如果元素沒有已定位的祖先元素,那么它的位置相對于最初的包含塊(即body元素)。元素原先在正常文檔流中所占的空間會關(guān)閉,就好像該元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
重點:如果父級設(shè)置了position屬性,例如position:relative;,那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應(yīng)網(wǎng)站的標簽偏離問題,即父級為自適應(yīng)的,那我子元素就設(shè)置position:absolute;父元素設(shè)置position:relative;,然后Top、Right、Bottom、Left用百分比寬度表示。
另外,對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>絕對定位
</title
>
</head
>
<style
>body
{margin
: 0}.c1
{width
: 50px
;height
: 25px
;background
-color
: tomato
;position
: relative
;}.c2
{width
: 200px
;height
: 400px
;background
-color
: wheat
;left
: 30px
;top
: 25px
;position
: absolute
;}絕對定位,不脫離文檔流,移動之后原位置會被占用。
.c3
{width
: 100px
;height
: 100px
;background
-color
: red
;}
</style
>
<body
>
<div
class="c1">購物車
</div
>
<div
class="c2"></div
>
<div
class="c3"></div
>
</body
>
</html
>
-
固定定位(fixed)
fixed:對象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現(xiàn)滾動條時,對象不會隨著滾動。而其層疊通過z-index屬性
定義。 注意點: 一個元素若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這
是一個常識性的知識點,因為這是兩個不同的流,一個是浮動流,另一個是“定位流”。但是 relative
卻可以。因為它原本所占的空間仍然占據(jù)文檔流。
在理論上,被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標,不論窗口是否滾動,它都會固定在這個位置。
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>固定定位
</title
>
</head
>
<style
>a
{text
-decoration
: none
;}.c3
{width
: 50px
;height
: 150px
;background
-color
: rgba
(0,0,0,0);bottom
: 50%;right
: 10px
;position
: fixed
;}body
{background
-color
: floralwhite
;}.c1
{width
: 20%;height
: 400px
;background
-color
: red
;float: left
;}.c2
{width
: 80%;height
: 400px
;background
-color
: blue
;float: right
;}[xxx
] {width
: 100%;border
-radius
: 50%;opacity
: 0.4}
</style
>
<body
><div
class="c1"></div
><div
class="c2"></div
><div
class="c3"><a href
="#"><img src
="up.jpg" alt
="" title
="返回頂部" xxx
></a
><a href
="#"><img src
="up.jpg" alt
="" title
="返回頂部" xxx
></a
><a href
="#"><img src
="up.jpg" alt
="" title
="返回頂部" xxx
></a
></div
>
</body
>
</html
>
- 右邊的箭頭不管頁面怎么滾動,都會固定不動,就好像懸浮在那里。
六、模態(tài)框(z-index)
設(shè)置對象的層疊順序。
- z-index 值表示誰壓著誰,數(shù)值大的壓蓋住數(shù)值小的,
- 只有定位了的元素,才能有z-index,也就是說,不管相對定位,絕對定位,固定定位,都可以使用z-
- index,而浮動元素不能使用z-index
- z-index值沒有單位,就是一個正整數(shù),默認的z-index值為0如果大家都沒有z-index值,或者z-index值一
- 樣,那么誰寫在HTML后面,誰在上面壓著別人,定位了元素,永遠壓住沒有定位的元素。
- 從父現(xiàn)象:父親慫了,兒子再牛逼也沒用
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>模態(tài)框
</title
>
</head
>
<style
>body
{margin
: 0}.c1
{position
: fixed
;top
: 0;bottom
: 0;left
: 0;right
: 0;background
-color
: rgba
(128,128,128,0.5);z
-index
: 10;}.c2
{z
-index
: 15;width
: 300px
;height
: 100px
;background
-color
: tomato
;position
: fixed
;left
: 50%;margin
-left
: -150px
;top
: 50%;margin
-top
: -50px
;opacity
: 0.8;}.c3
{}</style
>
<body
>
<div
class="c1">今天天氣真好!
</div
>
<div
class="c2"></div
>
<div
class="c3"></div
>
</body
>
</html
>
七、rgba 與 opacity
- opacity:用來定義透明效果。取值范圍是0~1,0是完全透明,1是完全不透明,設(shè)置標簽所有的元素的透明度。
- rgba:一般來定義背景顏色時候設(shè)置背景顏色透明度,相比opacity來說限制性大,只能設(shè)置顏色透明度。
補充:簡單網(wǎng)頁頁面的搭建:(暫未使用JS)
個人代碼交流: - HTML:
OCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>蘇光體的頁面
</title
><link rel
="stylesheet" href
="sgt.css">
</head
>
<body
><!
--側(cè)邊開始
-->
<div
class="sidebar"><a href
="#"><img src
="up.jpg" title
="回到頂部"></a
><a href
="#bottom"><img src
="down1.jpg" title
="回到頂部"></a
>
</div
>
<!
--側(cè)邊開始
--><!
--左邊開始
-->
<div
class="b_left"><div
class="head_img"><img src
="泉新一.png" alt
=""></div
><div
class="b_title">萌新的港灣
</div
><div
class="b_info">硬核玩家,贊美太陽
</div
><div
class="b_contact"><ul
><li
>關(guān)于我
</li
><li
><a href
="https://www.cnblogs.com/suguangti/" target
="_blank">博客園
</a
></li
><li
>微信公眾號
</li
></ul
></div
><div
class="b_skill"><ul
><li
><li
><li
></ul
></div
>
</div
>
<!
--左邊結(jié)束
--><!
--右邊開始
-->
<div
class="b_all_right"><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
><div
class="b_right"><div
class="content_1"><span
>老男孩帶你走向人生癲瘋!
</span
><span
class="content_1_1">2019-05-30</span
></div
><div
class="content_2">哪有什么天生如此,只是我們天天堅持!
</div
><div
class="content_3"><span
>☆堅持
</span
><span
class="content_3_1">☆努力
</span
></div
></div
>
</div
>
<!
--右邊結(jié)束
-->
<a href
="" id="bottom"></a
>
</body
>
</html
>
/*通用設(shè)置
*/
body
{margin
: 0;background
-image
: url
("dm.jpg");background
-size
: 100%;background
-attachment
: fixed
;
}
ul
{list-style
-type: none
;padding
-left
: 0;}
a
{text
-decoration
: none
}
.sidebar
{width
: 50px
;height
: 150px
;opacity
: 0.4;bottom
: 30%;right
: 2px
;position
: fixed
;
}/*左部分設(shè)置
*/
.b_left
{position
: fixed
;width
: 20%;height
: 100%;background
: rgba
(76, 76, 76,0.7);float: left
;text
-align
: center
;
}
.head_img
{width
: 120px
;height
: 120px
;border
-radius
: 50%;overflow
: hidden
;margin
: 25px auto
;
}
img
{width
: 100%;
}
.b_title
{font
-family
: 華文隸書
;font
-size
: 24px
;color
: crimson
;}
.b_info
{font
-family
: 華文行楷
;font
-size
: 20px
;color
: white
;margin
-top
: 10px
;
}
.b_contact
{font
-family
: 華文隸書
;color
: whitesmoke
;font
-size
: 18px
;margin
-top
: 50px
;
}
.b_skill
{font
-family
: "Times New Roman";color
: black
;font
-size
: 18px
;margin
-top
: 50px
;
}
/*右部分設(shè)置
*/
.b_all_right
{width
: 80%;background
: rgba
(220,255,255,0.5);float: right
;}
.b_right
{width
: 96%;background
: rgba
(255,255,255,0.6);margin
-left
: 8px
;margin
-top
: 10px
;box
-shadow
: 10px 10px 10px rgba
(0,0,0,0.8);}
.content_1
{border
-left
: red 8px solid
;margin
-bottom
: 10px
;font
-size
: 36px
;font
-family
: 華文隸書
;text
-indent
: 12px
;
}
.content_1_1
{float: right
;margin
-right
: 10px
;
}
.content_2
{font
-family
: 華文行楷
;font
-size
: 22px
;text
-indent
: 22px
;margin
-bottom
: 6px
;border
-bottom
: black 1px solid
;padding
-bottom
: 4px
;
}
.content_3
{font
-family
: 新宋體
;font
-size
: 20px
;text
-indent
: 22px
;padding
-bottom
: 4px
;
}
.content_3_1
{margin
-left
: 30px
;
}
與50位技術(shù)專家面對面20年技術(shù)見證,附贈技術(shù)全景圖
總結(jié)
以上是生活随笔為你收集整理的前端基础之CSS_2的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。