Web前端基礎(6):CSS(三)

時間 2019-11-17

標籤 web 前端基礎 css 欄目 HTML 简体版

原文原文鏈接

1. 定位

定位有三種：相對定位、絕對定位、固定定位css

1.1 相對定位

現象和使用：html

1.若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。瀏覽器

2.設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right。佈局

特性：1.不脫標 2.形影分離 3.老家留坑性能

因此說相對定位在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果字體

用途：url

1.微調元素位置spa

2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。code

1.2 絕對定位

特性：1.脫標 2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。orm

參考點：

1、單獨一個絕對定位的盒子

1.當我使用top屬性描述的時候是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。

2、以父輩盒子做爲參考點

1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。

2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點。

3.不單單是父相子絕，父絕子絕，父固子絕,都是以父輩元素爲參考點。

注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

還要注意，絕對定位的盒子無視父輩的padding。

做用：頁面佈局常見的「父相子絕」，必定要會！

絕對定位中的居中：

　　 padding: 0;

　　 margin: 0;

}

.box{

　　 width: 100%;

　　 height: 69px;

　　 background: #000;

}

.box .c{

　　width: 960px;

　　 height: 69px;

　　 background-color: pink;

　　 /*margin: 0 auto;*/

　　 position: relative;

　　 left: 50%;

　　 margin-left: -480px;

　　 /*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/

}

1.3 固定定位

固定當前的元素不會隨着頁面滾動而滾動

特性: 1.脫標 2.遮蓋，提高層級 3.固定不變

參考點：

設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點

做用： 1.返回頂部欄 2.固定導航欄 3.小廣告

2. 文本屬性和字體屬性

2.1 文本屬性

屬性	描述	屬性值	說明
text-align	文本對齊方式	none center left right justify
color	文本顏色
text-indent	首行縮進，單位建議em
text-decoration	規定文本修飾的樣式	none underline overline line-through inherit	默認下劃線定義文本上的一條線定義穿過文本下的一條線繼承父元素text-decoration屬性的值
line-height	行高		針對單行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只適用單行文本。針對多行文本垂直居中行高不能小於字體，否則字會緊挨一塊兒。
text-shadow	陰影	5px 5px 5px #FF0000	水平方向偏移量垂直方向偏移量模糊度陰影顏色
text-overflow	文字溢出	clip ellipsis	修剪文本顯示省略號表明被修剪文本
white-space	處理元素內的空白	normal pre nowrap pre-wrap pre-line inherit	默認。空白被瀏覽器忽略。空白會被瀏覽器保留文本不換行，直到遇到 <br> 保留空白符序列，但正常地進行換行合併空白符序列，可是保留換行符繼承父元素 white-space 屬性的值

文字溢出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;
 
            /*強制在一行內顯示*/
            white-space: nowrap;
            /*超出部分隱藏*/
            overflow: hidden;
            /*顯示省略符號來表明被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="div0">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div1">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div2">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
<div class="div3">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br>
</body>
</html>

2.2 字體屬性

屬性	描述	屬性值	說明
font-size	字體大小
font-weight	字體粗細	none bold border lighter 100~900 inherit	默認值，標準粗細粗體更粗更細值，400=normal，700=bold 繼承父元素字體的粗細值
font-family	字體系列	"Microsoft Yahei","微軟雅黑", "Arial", sans-serif	瀏覽器使用它可識別的第一個值

使用font-family注意幾點：

1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝，
好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，
那麼就會變成宋體
頁面中，中文咱們只使用： 微軟雅黑、宋體、黑體。 
若是頁面中，須要其餘的字體，那麼須要切圖。 英語：Arial 、 Times New Roman

2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。
3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體，
就自動的變爲後面的中文字體： 
font-family: "Times New Roman","微軟雅黑","宋體";

4.全部的中文字體，都有英語別名，
咱們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高能夠用百分比，表示字號的百分之多少。
通常來講，都是大於100%的，由於行高必定要大於字號。 
font:12px/200% 「宋體」 等價於 font:12px/24px 「宋體」; 
反過來，好比： font:16px/48px 「宋體」;
等價於 font:16px/300% 「宋體」

3. background

給元素設置padding以後，發現padding的區域背景和content部分的一致。

3.1 background-color —— 背景顏色

設置背景色：

css: 
   <style>
       .demo{
           width: 50px;
           height: 100px;
           background-color: greenyellow;
       }
    </style>
html:
<body>
<div class="demo"></div>
</body>

3.2 background-image —— 背景圖片

設置背景圖片：

css:
     <style>
       .demo{
           width: 2000px;
           height: 1500px;
           background-image: url('img/1.jpg');
       }
    </style>
html:
    <body>
    <div class="demo"></div>
    </body>

那麼發現默認的背景圖片，水平方向和垂直方向都平鋪。

背景圖片相關配置：

background-repeat：設置背景圖像的平鋪方式

repeat

repeat-x

repeat-y

no-repeate

inherit

默認。背景圖像將在垂直方向和水平方向重複

背景圖像將在水平方向重複

背景圖像將在垂直方向重複

背景圖像將僅顯示一次

規定應該從父元素繼承 background-repeat 屬性的設置

background-position：設置背景圖像的起始位置

垂直位置水平位置

能夠從兩個緯度上設定關鍵詞：上中下左中右

垂直位置：top center bottom

水平位置：left center right

如僅規定了一個關鍵詞，那麼第二個值將是"center"。

默認值：0 0；

這兩個值必須挨在一塊兒。

background-attachment：設置固定的背景圖像

scroll

fixed

inherit

默認值。背景圖像會隨着頁面其他部分的滾動而移動。

當頁面的其他部分滾動時，背景圖像不會移動。

規定應該從父元素繼承 background-attachment 屬性的設置。

3.3 background屬性的簡寫

background：#ffffff url('1.png') no-repeat right top;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。