CSS之樣式屬性(背景固定、圓形頭像、模態框)

時間 2019-11-12

標籤 css 樣式屬性背景固定圓形頭像模態欄目 CSS 简体版

原文原文鏈接

CSS屬性
1、寬和高
width屬性能夠爲元素設置寬度。
height屬性能夠爲元素設置高度。
塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。
div {width: 1000px;background-color: red}   /*塊級標籤設置了width會生效*/
span {width: 1000px;background-color: red} /*內聯標籤設置了width不生效*/



2、字體屬性
一、文字字體：font-family
font-family能夠把多個字體名稱做爲一個「回退」系統來保存。
若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}


二、字體大小：font-size(默認字體大小是12px或者100%)
p {
  font-size: 14px;
}

p {
  font-size: 100%;
}

三、字體粗細：font-weight

值	描述
normal	默認值，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細，400等同於normal，而700等同於bold
inherit	繼承父元素字體的粗細值



div {
        font-weight: bold;
        font-weight: 800;
}



四、文本顏色
三種方式：
1.顏色的名稱-如：red
2.十六進制值-如: ＃FF0000
3.一個RGB值 - 如: RGB(255,0,0)
還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。


div {
    color: green;
    color: #00FF00;
    color: rgb(251,97,19);
}



3、文字屬性
一、文字對齊：text-align 屬性規定元素中的文本的水平對齊方式。

值	描述
left	左邊對齊默認值
right	右對齊
center	居中對齊
justify	兩端對齊


div {
    text-align: center;
}


二、文字裝飾
text-decoration 屬性用來給文字添加特殊效果。

值	描述
none	默認。定義標準的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。




經常使用的爲去掉a標籤默認的自劃線：
a {
  text-decoration: none;
}


三、首行縮進
text-indent 屬性用來縮進
將段落的第一行縮進 32像素：
p {
  text-indent: 32px;
}



4、背景屬性
一、背景相關屬性
1.背景顏色
background-color: red;

2.背景圖片
background-image: url('1.jpg');

3.背景重複
background-repeat: no-repeat; 
repeat(默認):背景圖片重複排滿整個網頁
repeat-x：背景圖片只在水平方向上重複
repeat-y：背景圖片只在垂直方向上重複
no-repeat：背景圖片不重複



4.背景位置
background-position: right top;

background-position: 200px 200px;





5.簡寫(背景顏色、圖片地址、重複次數、位置)
上面背景屬性能夠直接簡寫成：
background:red url('xx.jpg') no-repeat right top;




6.背景圖片大小background-size
background-size:100% 100%; 讓背景圖片填充滿整個容器(自適應)




7.雪碧圖
有些網站會把不少小圖標放在一張圖片上，而後根據位置去顯示圖片。減小頻繁的圖片請求。


8.background-attachment
background-attachment屬性的默認值是 scroll，也就是說，在默認的狀況下，背景會隨文檔滾動，
若是將圖像background-attachment屬性設置爲fixed，圖片會相對於當前窗口固定住，所以不會受到滾動的影響

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("pic.JPG") no-repeat center center;
            background-attachment: fixed;
            background-size:100%;
        }
        .c1 {
            height: 500px;
            background-color: red;
        }
        .c2 {
            height: 500px;
            background-color: blue;
        }
        .c3 {
            height: 500px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="box"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</body>
</html>

背景固定






5、邊框
一、邊框屬性 
border-width：邊框粗細
border-style：邊框樣式
border-color：邊框顏色

/*CSS樣式*/
#d1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

能夠簡寫：
#d1 {
  border: 2px solid red;
}


二、邊框樣式style可取的值

值	描述
none	無邊框。
dotted	點狀虛線邊框。
dashed	矩形虛線邊框。
solid	實線邊框。





三、除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式
border是對整個邊框進行統一的樣式修改，
咱們也能夠對某條邊框進行樣式的修改，以下：
#d1 {
  border-top-style:dotted;
  border-top-color: red;
  border-top-width: 100px;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}


某一邊框也是能夠簡寫：
#d1 {
    border-left:solid black 10px;
}




四、border-radius
這個屬性能實現圓角邊框的效果
例如：
向div元素添加圓角邊框：
div {
border:2px solid;
border-radius:25px;
}


圓形邊框：將border-radius設置爲長或高的一半便可獲得一個圓形。
div {
border:2px solid;
border-radius:50%;
}





6、display屬性
用於控制HTML元素的顯示效果。

值	意義
display:"none"	此元素不會被顯示
display:"block"	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
display:"inline"	此元素會被顯示爲內聯元素，元素先後沒有換行符。
display:"inline-block"	行內塊元素，使元素同時具備行內元素和塊級元素的特色。

 特色： inline: 1.使元素變成行內元素，擁有行內元素的特性，便可以與其餘行內元素共享一行，不會獨佔一行. 2.不能更改元素的height，width的值，大小由內容撐開. 3.可使用padding，margin的left和right產生邊距效果，可是top和bottom就不行. block: 1.使元素變成塊級元素，獨佔一行，在不設置本身的寬度的狀況下，塊級元素會默認填滿父級元素的寬度. 2.可以改變元素的height，width的值. 3.能夠設置padding，margin的各個屬性值，top，left，bottom，right都可以產生邊距效果. inline-block: 1.結合了inline與block的一些特色，結合了上述inline的第1個特色和block的第2,3個特色. 2.用通俗的話講，就是不獨佔一行的塊級元素，或者說是能夠設置寬高的行內元素。


注意： display:"none"與visibility:hidden的區別： visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。 display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。
    
    
    


7、CSS盒子模型
一、幾個概念
margin:用於控制盒子與盒子之間的距離
padding:用於控制盒子內容與邊框之間的距離
Border(邊框):圍繞在內邊距和內容外的邊框
Content(內容):盒子的內容，顯示文本和圖像




二、margin外邊距
2-一、具體寫法
.c1 {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

2-二、簡寫
1.四個參數的順序分別是：上  右  下  左(順時針)
.c1 {
  margin: 5px 10px 15px 20px;
}


2.三個參數，第一個用於上，第二個用於左 右，第三個用於下
.c1 {
    margin: 10px 20px 30px;
}


3.兩個參數的順序：第一個用於上下，第二個用於左右
.c1 {
  margin: 10 20;
}


上下外邊距0，左右自動適應
.c1 {
  margin: 0 auto;
}


4.一個參數：應用於四邊
.c1 {
 margin:10px;
}



三、padding內填充
.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}


簡寫：四個參數的順序分別是：上  右  下  左
.padding-test {
  padding: 5px 10px 15px 20px;
}


padding的簡寫方式和margin相似：
    提供一個參數，用於四邊；
    提供兩個參數，第一個用於上－下，第二個用於左－右；
    若是提供三個參數，第一個用於上，第二個用於左－右，第三個用於下；
    提供四個參數值，將按上－右－下－左的順時針順序做用於四邊；



8、float浮動
在CSS 中，任何元素均可以浮動。
浮動元素會生成一個塊級框，而不論它自己是何種元素。

關於浮動的兩個特色：
    浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
    因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。
    
一、float的三種取值
left：向左浮動
right：向右浮動
none：默認值，不浮動



二、浮動的反作用




三、clear清除浮動
clear屬性規定元素的哪一側不容許其餘浮動元素

值	描述
left	在左側不容許浮動元素。
right	在右側不容許浮動元素。
both	在左右兩側均不容許浮動元素。
none	默認值。容許浮動元素出如今兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。



注意：clear屬性只會對自身起做用，而不會影響其餘元素。

解決float反作用：要解決哪一個盒子的浮動就給哪一個盒子應用這個樣式
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}



四、display:"inline-block"佈局和float浮動佈局區別：
a.不一樣之處：對元素設置display：inline-block ，元素不會脫離文本流，而float就會使得元素脫離文本流，且還有父元素高度坍塌的效果
b.相同之處：能在某程度上達到同樣的效果

使用場景：
a.對於橫向排列東西來講，我更傾向與使用inline-block來佈局，由於這樣清晰，也不用再像浮動那樣清除浮動，懼怕佈局混亂等等。
b.對於浮動佈局就用於須要文字環繞的時候，畢竟這纔是浮動真正的用武之地，水平排列的是就交給inline-block了。



五、清除浮動例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 0;
        }

        .c1{
            border:1px black solid;
        }

        .c2,.c3{
            height:100px;
            width:200px;
            background-color:red;
            border:solid 1px black;
        }

        .c4{
            width:100%;
            height:200px;
            background-color:deeppink;
        }

        .left{
            float:left;
        }

        .right{
            float:right;
        }

        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
    </style>
    
</head>
<body>
<!--能夠嘗試第一個div不用clearfix樣式的時候，進行對比-->
<div class="c1 clearfix">
    <div class="c2 left"></div>
    <div class="c3 right"></div>
</div>

<div class="c4"></div>

</body>
</html>

清除浮動





9、overflow溢出
 overflow屬性

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。



注意：
overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 0;
        }

        /*把div設置成一個圓形框*/
        .avatar{
            height:110px;
            width:110px;
            border:2px solid red;
            border-radius:50%;
            overflow:hidden;
        }

        /*讓圖片填充這個圓框*/
        .avatar>img{
            width:100%;
        }

    </style>

</head>
<body>
<div class="avatar">
    <img src="pic.JPG">
</div>

</body>
</html>

圓形頭像例子





10、position定位
一、static
static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。


二、relative（相對定位）：相對標籤原來的位置作的定位，原來的位置還佔着。
相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。
要注意的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。
對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。


三、absolute(絕對定位)：相對已經定位過的祖先標籤作參照物進行定位，原來的位置會關閉，元素定位後生成一個塊級框，且元素是脫離文檔的(浮起來)
定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位，若是元素沒有已定位的祖先元素， 那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。
元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。
這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。


四、fixed（固定）：固定在屏幕的某個位置，固定定位的元素也是脫離文檔的(浮起來)
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考物進行定位，當出現滾動條時，對象不會隨着滾動。
而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，
由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。


五、例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
        }

        .c1,.c2,.c3{
            height:200px;
            width:200px;
        }

        .c1{
            background: red;
        }

        .c2{
            background-color: green;
            position: relative;
            left: 200px;
            top: -200px;

        }

        .c3{
            background: blue;
        }

    </style>

</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

相對定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        .c0, .c2, .c3 {
            height: 200px;
            width: 200px;
        }

        .c0 {
            background-color: blue;
        }

        .c1 { /*若註釋c1的相對定位，則c2的父元素(c1)沒有進行定位，那麼c2就會根據body來定位，c2就會把c3覆蓋了*/
            position: relative;
            left: 200px
        }

        .c2 {
            background-color: red;
            position: absolute;
            top: 200px;
        }

        .c3 {
            background-color: green;
        }

    </style>
</head>
<body>
<div class="c0"></div>

<div class="c1">
    <div class="c2"></div>
</div>

<div class="c3"></div>

</body>
</html>

絕對定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            color:red;
            background-color: deeppink;
            border: 1px solid black;
            width: 80px;
            height: 40px;
            line-height: 40px;  /*將行高設置成標籤的高度能夠實現垂直居中*/
            text-align: center;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>

<div class="c1">返回頂部</div>
</body>
</html>

fixed







11、z-index和opacity
一、z-index
設置對象的層疊順序，數值大的會覆蓋在數值小的標籤之上。z-index 僅能在定位元素上奏效(relative absolute fixed)。 二、opacity：設置透明度


三、例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /*background-color: rgb(0,0,0);*/
            background-color: rgba(0,0,0,0.4);
            z-index: 99;
            /*opacity: 0.4;*/
        }
        .modal {
            background-color: white;
            height: 300px;
            width: 400px;
            z-index: 1000;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>
<body>


<div>嘿嘿嘿。</div>

<div class="cover"></div>
<div class="modal">
    <form action="">
        <p>用戶名<input type="text"></p>
        <p>密碼<input type="password"></p>
        <p><input type="submit" value="提交"></p>
    </form>
</div>
</body>
</html>

模態框




四、rgba(0,0,0,0.4)和 opacity: 0.4的區別
.c1 {
    height: 100px;
    width: 100%;
    color: red;
    background-color: rgba(0,0,0,0.4);    <!--rgba應用在哪裏就只有那裏生效，這裏只有背景顏色會有透明度-->
}
.c2 {
    height: 100px;
    width: 100%;
    color: red;
    background-color: rgb(0,0,0);
    opacity: 0.4;  <!--整個c2內的全部元素都生效，都有透明度-->
}

總結：絕對定位、固定定位、浮動能夠脫離文檔流(可是background-attachment:fixed不能夠)