1. 定位

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

1.1 相對定位

現象和使用：

1.如果對當前元素僅僅設定了相對定位，那么與標準流的盒子什么區別，

2.設定相對定位之后，我們才可以使用四個方向的屬性： top、bottom、left、right，

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

所以說相對定位在頁面中沒有什么太大的作用，影響我們頁面的布局，我們不要使用相對定位來做壓蓋效果

用途：

1.微調元素位置

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

1.2 絕對定位

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

參考點：

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

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

二、以父輩盒子作為參考點

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 >各國領匯入感謝中方作為東道主對各國參展給予的大力支持</div><br>
<div >各國領匯入感謝中方作為東道主對各國參展給予的大力支持</div><br>
<div >各國領匯入感謝中方作為東道主對各國參展給予的大力支持</div><br>
<div >各國領匯入感謝中方作為東道主對各國參展給予的大力支持</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 ></div>
</body>

3.2 background-image —— 背景圖片

設定背景圖片：

css:
     <style>
       .demo{
           width: 2000px;
           height: 1500px;
           background-image: url('img/1.jpg');
       }
    </style>
html:
    <body>
    <div ></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;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102370.html

標籤：Html/Css

上一篇：記錄一些小技巧-CSS篇

下一篇：如何給HTML標簽中的文本設定修飾線

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