生活随笔
收集整理的這篇文章主要介紹了
前端基础之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)容還不錯，歡迎將生活随笔推薦給好友。
