2. 程式人生 > >前端基礎：CSS屬性操作

前端基礎：CSS屬性操作

阿新 • • 發佈：2018-05-20
多個 red 自己 list 機制 bis SQ col 文本顏色

CSS屬性操作

1.文本

  • 文本顏色：color，顏色屬性被用來設置文字的顏色，顏色是通過CSS經常指定的，其格式有：
    1.十六進制：#FF0000；
    2.RGB值：RGB(255,0,0)；
    3.顏色名稱：red；

  • 水平對其方式：text-align屬性規定元素中的文本的水平對齊方式；
    1.left：文本排列到左邊；默認值：由瀏覽器決定；
    2.right：文本排列到右邊；
    3.center：文本排列到中間；
    4.justify：文本兩端對齊；

  • 文本其他操作：

text-align：center    文本居中
font-size: 10px;
line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效
text-decoration:none       text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線
font-family: ‘Lucida Bright‘
font-weight: lighter/bold/border/
font-style: oblique 或者italic...(設置字體的樣式為斜體)
text-indent: 150px;      首行縮進150px
letter-spacing: 10px;  字母間距
word-spacing: 20px;  單詞間距
text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫

2.背景屬性

  • background-color：背景顏色
  • background-image：背景圖片連接
  • background-repeat：x-軸平鋪
  • background-position：調整背景的位置
background-color: cornflowerblue；
 
background-image: url(‘1.jpg‘)；
 
background-repeat: no-repeat；(repeat:平鋪滿)
 
background-position: right top（20px 20px）；

簡寫：background:#FFFFFF url(‘1.png‘) no-repeat right top;

背景調試小黃人的眼睛

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景處理</title>
    <style>
        .c1{
           width: 300px;
           height: 200px;
           border: 1px solid red;
           background: url("xhr.jpg")  -206px -29px;
           /*可在那個網頁上右擊點擊檢查，調試*/
            /*background-position: center; */
           /*定位*/

        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

3.外邊框(margin)和內邊距(padding)
1.盒子模型

  • margin：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺上達到相互隔開的目的；
  • padding：用於控制內容與邊框之間的距離；
  • border：圍繞在內邊距和內容外的邊框；
  • content：盒子的內容，顯示文本和圖像；

2.margin(外邊距)
單邊外邊距屬性

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

屬性簡寫

margin:10px 20px 20px 10px；

        上邊距為10px
        右邊距為20px
        下邊距為20px
        左邊距為10px

margin:10px 20px 10px;

        上邊距為10px
        左右邊距為20px
        下邊距為10px

margin:10px 20px;

        上下邊距為10px
        左右邊距為20px

margin:25px;

        所有的4個邊距都是25px

居中應用

margin:0 auto;

3.padding(內邊距)
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變都該改變，其設置同margin；
思考1：body的外邊距
邊框在默認情況下輝定位於瀏覽器的左上角，但是並沒有緊貼著瀏覽器窗口的邊框，這是因為body本身也是一個盒子(外層還有html)。在默認情況下，body距離html會有若幹像素的margin，具體數值因瀏覽器不同而不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框，為了檢驗這一點加上如下樣式：

body{
    border:1px solid;
    background-color:cadetblue;
}

解決方法：

body{
    margin:0;
}

思考2：margin collapse(邊界塌陷或邊界重疊)
1、兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裏面值最大的作為顯示值；
2、父子div：如果父級div中沒有border、padding、inline content，子級div的margin會一直向上趙，直到找到某個標簽包括border、padding、inline content中的一個，然後按此div進行margin；

父級塌陷問題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collapse</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;
        }
        .div2{
            background-color: red;
            width: 200px;
            height: 200px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div style="background-color: bisque; width: 300px; height: 300px;"></div>
    <div class="div1">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

</body>
</html>

解決方法：

overflow:hidden;

4.float屬性
布局關鍵點：如何能夠讓可以調節長度的元素(標簽)在一行顯示？如果上一個元素是浮動的，那麽就緊貼著；如果上一個不是浮動的，那麽就保持垂直距離不變；
1.基本浮動規則
block元素通常被實現為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效；

  • 常見塊級元素：div、form、table、p、pre、h1-h6、dl、ul等；
  • 常見內聯元素：span、a、strong、em、label、input、select、textarea、img、br等；

文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列；
脫離文檔流，也就是將元素從普通的布局排版中拿走，其它盒子再定位的時候，會當作脫離文檔流的元素不存在而進行定位；
假如：某個div元素A是浮動的，如果A元素上的一個元素也是浮動的，那麽A元素會跟隨在上一個元素的後面(如果一行放不下兩個元素，那麽A元素會被擠到下一行)；如果A元素上的一個元素是標準流中的元素，那麽A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的邊框之後的block元素會認為這個框不存在，但其中的文本以仍然會給這個元素讓出位置，浮動邊框之後的inline元素會為這個框空出位置，然後按順序排序；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .r1{
            width: 300px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="r1"></div>
    <div class="r2"></div>
    <div class="r3"></div>
</body>
</html>

2.非完全脫離文檔
左右結構div盒子重疊現象，一般是由於相鄰兩個div一個使用浮動另一個沒有使用浮動，這樣會導致div不是在同一個"平面"上，但內容不會造成覆蓋現象，私有div形成覆蓋現象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
    <div class="r1"></div>
    <div class="r2">region two</div>
</body>
</html>

解決方法：要麽都不使用浮動；要麽都使用浮動；要麽對沒有使用浮動的div設置margin樣式。
3.清除浮動
clear語法

clear：none | left | right | both
  • 1.clear：left清除左邊的浮動；
  • 2.clear：both清除左右兩邊的浮動；

註意：排序的時候是一個標簽已給標簽地排序，如果上一個是浮動的，就緊貼上一個；如果上一個不是浮動的，就和上一個保持垂直不變；

5.列表屬性
去掉列表前面的標誌：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}
上面兩行也可以寫成：*{margin:0;padding:0;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            font-family: 華文中宋;
            list-style: none; //去掉點
            /*list-style: circle;//空心圓*/
            /*list-style: disc;//實心圓（默認也是實心圓）*/
        }
        ul{
            padding: 0; //把字體移到前面

        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
    </ul>
</div>
</body>
</html>

6.display屬性
display屬性

  • 1.將塊級標簽設置成內聯標簽：display：inline；
  • 2.將內聯標簽設置成塊級標簽：display：block；
  • 3.內聯塊級標簽：像塊級標簽一樣可以設置長度和高度，也可以像內聯標簽一樣在一行顯示：display：inline-block；
  • 4.將不像讓用戶看到的屬性隱藏：display：none；
  • 5.visibility：hidden，也是隱藏；

註意：visibility可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間，也就是說，該元素被隱藏了，仍然會影響頁面布局；display：none可以隱藏某個元素，且隱藏的元素不會占用任何空間，也就是說，該元素不但被隱藏了，且該元素占用的空間也會從頁面布局中消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
        .c2{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }
        .c3{
            width: 100px;
            height: 100px;
            background-color: crimson;
            display: inline;
        }
        .c4{
            width: 100px;
            height: 100px;
            background-color: gray;
        }
        .s1{
            width: 100px;
            height: 100px;
            background-color: royalblue;
            /*visibility: hidden;*/     // 隱藏了其他的不會頂上去
            display: none;      // 隱藏了其他的會頂上去
        }
    </style>
</head>
<body>
    <div class="c4">十年之後</div>
    <span class="s1">我們還是朋友</span>
    <div class="c1">還可以溫柔</div>
    <div class="c2">還可以溫柔</div>
    <div class="c3">還可以溫柔</div>
</body>
</html>

7.position(定位)屬性
position四種屬性：

  • static：默認位置；
  • fixed：完全脫離文檔流，固定位置(以可視窗口為參照物)；
  • relative：相對位置(參照的是自己本身的位置)，沒有脫離文檔流，可以使用top、left進行定位；
  • absolute：絕對定位，脫離文檔流(參照已定位的父級標簽定位，如果找不到會按照body的去找)；
    註意：將定位標簽設置為absolute，將其父級標簽設置為定位標簽relative

固定位置實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定位置實例</title>
    <style>
        .c1{
            background-color: white;
            width: 100%;
            height: 1000px;
        }
        .returntop{
            width: 100px;
            height: 40px;
            background-color: gray;
            /* 透明度 */
            /*opacity: 0.4;*/
            color: black;
            text-align: center;
            line-height: 40px;
            position: fixed;
            bottom: 50px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="returntop">返回頂部</div>
</body>
</html>

相對位置實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對定位</title>
    <style>
        *{
            margin: 0px;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: blue;
            position: relative;
        }
        .box2{
            background-color: darksalmon;
            position: relative;
            /*position: absolute;*/
            left: 200px;
            /*right: 200px;*/
            top: 200px;
        }
        .box3{
            background-color: lime;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

絕對位置實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>絕對定位</title>
    <style>
        .father{
            position: relative;
        }
        *{
            margin: 0px;
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: blue;
            position: relative;
        }
        .box2{
            background-color: darksalmon;
            /*position: relative;*/
            position: absolute;
            left: 200px;
            /*right: 200px;*/
            top: 200px;
        }
        .box3{
            background-color: lime;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="father">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

float和position的區別：float是半脫離文檔；position是全脫離文檔。

8.其他常用屬性
1.去掉下劃線：text-decoration：none；
2.加上下劃線：text-decoration：underline；
3.調整文本和圖片位置(設置元素的垂直對齊方式)：vertical-align：-20px；
4.外邊距：margin；
5.內邊距：padding；
6.內聯標簽是不可以設置長度和高度的，有時候需要把內聯標簽變成塊級標簽或者塊級內聯標簽，這就用到display屬性了：
7.隱藏的兩個方法：display：none；visibility：hidden；
8.隱藏溢出的兩個方法：overflow：auto；overflow：scroll；(滾動機制)
9.文本居中：text-align：center(水平居中)；line-height(垂直居中)；
10.z-index：屬性設置元素的堆疊順序，擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素前面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素堆疊</title>
    <style>
        .imag1{
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -10;
        }
        .imag2{
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -3; // 值越大越往前
        }
        .imag3{
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -5;
        }
    </style>
</head>
<body>
    <div class="imag3"><img src="作業/1.jpg" ></div>
    <div class="imag2"><img src="作業/2.jpg" ></div>
    <div class="imag1"><img src="作業/3.jpg" ></div>
</body>
</html>

11.透明度：opacity：0.3；
12.邊框弧度：border-radius：50%；
13.去除列表前面的標誌：list-style：none；
14.對其上面和左邊最頂部：padding：0；margin：0；
15.字體加粗：font-weight：900；

幾個實例
1.圖片切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .outer{
            width:790px;
            height: 340px;
            border: solid 1px red;
            margin: 0 auto;
            margin-top: 40px;
            position: relative;
        }
        ul{
            list-style: none;
            position: absolute;
            top: 0;
            left:0;
        }
        .com{
            position: absolute;
            display: none;
            /*visibility: hidden;*/
        }
        .num{
            position: absolute;
            top: 300px;
            left: 330px;
        }
        .num li{
            display: inline-block;
            width: 20px;
            height: 20px;
            color: black;
            background-color: white;
            border-radius: 50%; //邊框弧度
            line-height: 20px;
            text-align: center;
        }
        .btn{
            position: absolute;
            width: 40px;
            height: 60px;
            background-color: grey;
            opacity: 0.5; //透明度
            color: black;
            font-weight: 900;  //加粗
            text-align: center;
            line-height: 60px;
            top:50%;
            margin-top: -30px;
        }
        .leftbtn{
            left:0;
        }
         .rightbtn{
             right:0;

        }
    </style>
</head>
<body>
<div class="outer">
    <ul class="img">
        <li><a href=""><img src="1.jpg" ></a></li>
        <li class="com"><a href=""><img src="2.jpg" ></a></li>
        <li class="com"><a href=""><img src="3.jpg" ></a></li>
        <li class="com"><a href=""><img src="4.jpg" ></a></li>
        <li class="com"><a href=""><img src="5.jpg" ></a></li>
        <li class="com"><a href=""><img src="6.jpg" ></a></li>
    </ul>
    <ul class="num">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="leftbtn btn"> < </div>
    <div class="rightbtn btn"> > </div>

</div>

</body>
</html>

2.後臺管理布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後臺管理布局</title>
    <style>
        *{
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .header{
            width: 100%;
            height: 44px;
            background-color: #2459a2;
        }
        .title li{
            width: 100px;
            height: 80px;
            list-style: none;
            text-align: center;
            line-height: 80px;
            margin-top: 20px;
            padding: 50px;
            background-color: blue;
        }
        .leftmenu .title a{
            font-size: 18px;
            color: white;
        }
        .leftmenu{
            width: 300px;
            background-color: grey;
            position: fixed;
            top: 44px;
            left:0;
            bottom: 0;
        }
        .con{
            position: fixed;
            top: 44px;
            left: 300px;
            right:0;
            bottom: 0;
            background-color: darksalmon;
            overflow: scroll;
        }

    </style>
</head>
<body>
<div class="header"></div>
<div class="content">
    <div class="leftmenu">
        <ul class="title">
            <li><a href="">菜單一</a></li>
            <li><a href="">菜單二</a></li>
            <li><a href="">菜單三</a></li>
        </ul>
    </div>
    <div class="con">
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
        <h1>厲害了，我的國</h1>
    </div>
</div>
</body>
</html>

3.遮蓋層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩層</title>
    <style>
        .backgroup{
            width: 100%;
            height: 2000px;
        }
        .zzc{
            position: fixed;
            bottom: 0;
            top:0;
            left:0;
            right:0;
            background-color: grey;
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="backgroup">
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
    <p>厲害了，我的國</p>
</div>
<div class="zzc"></div>
</body>
</html>

前端基礎：CSS屬性操作

相關推薦

前端基礎：CSS屬性操作

多個 red 自己 list 機制 bis SQ col 文本顏色 CSS屬性操作 1.文本 文本顏色：color，顏色屬性被用來設置文字的顏色，顏色是通過CSS經常指定的，其格式有： 1.十六進制：#FF0000； 2.RGB值：RGB(255,0,0)； 3.顏色名稱

Day49：CSS屬性操作（文本、背景、邊框、列表、display、邊距）

tro 驗證 介紹 lec ica 基本 next eat 敬畏 一、CSS屬性操作 1、CSS text 文本顏色：color 顏色屬性被用來設置文字的顏色。 顏色是通過CSS最經常的指定： 十六進制值 - 如: ＃FF0000 一個RGB值 - 如: RGB(255,

css基礎：樣式屬性

-h otto 下劃線 基礎 size out 去掉 滾動 ddl 1.背景與前景：background-color：；背景色，樣式表優先級高。 background-image：url（路徑）；設置背景圖片 background-attachment：fixed；背景固定

web前端【第四篇】CSS屬性操作

idt lba adding 人的 ... charset 平鋪 cit stat 一、文本屬性 1.text-align:cnter 文本居中2.line heigth 垂直居中 ：行高，和高度對應3.設置圖片與文本的距離：vertical-align4.text-de

前端之JQuery：JQuery屬性操作

lec 圖片 code info boot class clas url 如果 Jquery2--屬性相關的操作 知識點總結 1、屬性 屬性（如果你的選擇器選出了多個對象，那麽默認只會返回出第一個屬性）、 attr(屬性名|

前端之JQuery：JQuery屬性操作 Jquery2--屬性相關的操作

Jquery2--屬性相關的操作   知識點總結  1、屬性 屬性（如果你的選擇器選出了多個物件，那麼預設只會返回出第一個屬性）

前端基礎之CSS

strong 解耦 技術分享 查找 lan span htm src body CSS：對html標簽進行批量渲染的，一般分兩步 1、進行查找標簽 2、操作標簽； 1、查找標簽： 2、操作標簽： css樣式層疊的引入方式： 1、行內引入：只能對單一標簽進行CSS

web前端教程：CSS 布局十八般武藝都在這裏了

lin bcb 學習資料 ng- .com 垂直 改進 fcc block CSS布局 布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的盒模型布局和比較新的fle

flask前端優化：css/js/html壓縮

flask sta ask 技術分享 all 時間 減少 ges 技術 1、先壓縮再傳輸，可以減少傳輸的大小，減少傳輸時間，但是壓縮需要時間，所以最終頁面顯示是快了還是慢了，需要比較 2、先看html壓縮模塊：pip install Flask-HTMLmin 壓縮前：大小

前端基礎之css復習

play 平鋪 city port 空格 ul li input 現實 進行 !/usr/bin/env python# -*- coding: utf-8 -*-#前端基礎之CSS#CSS 語法#CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。‘‘‘

前端基礎學習css

前端基礎學習css一、偽類anchor用於控制鏈接效果a:link (沒有訪問過的鏈接)，定義鏈接的常規狀態a:hover(鼠標放在鏈接上的狀態)，用於控制顯示效果 （常用）a:visited(訪問過的鏈接) ，能清楚判斷訪問過的鏈接a:active(在鼠標按下時的狀態)例子：Title.{

CSS屬性操作

基線 對齊方式 per lai 對齊 functions css 間距 rep 一、css文本顏色的表示方式 　　1、十六進制值 - 如: ＃FF0000 　　2、一個RGB值 - 如: RGB(255,0,0,0) （紅，綠，藍，透明度） 　　3、顏色的名稱 -

Day50：CSS屬性（float、position）

定位 alt 變化 white 覆蓋問題 ecc wid 寬度 epp 一、float屬性 1、基本屬性 先來了解一下block元素和inline元素在文檔流中的排列方式。 　　block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block

python學習_day52_前端基礎之CSS布局3

兩個 表示 sans ucid grand -i 參照物 原始的 doctype 一、定位屬性position 1、相對定位relative 　　相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著

Web前端基礎（CSS position的正確用法）

屬性 文本 區域 osi 一個 relative 上一個 計算 com position屬性的relative以及absolute的區別是什麽？ 任何元素的默認position的屬性值都為static（靜態），但我們在布局的時候也會經常用到relative（相對）以及ab

前端基礎之CSS-Day13

r語 基於 float 不但 contain 自身 luci 子div cpp 1、CSS 語法 1.1、CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。 selector { property: value;

Web編程基礎：CSS、JavaScript、jQuery (何婕著) 完整pdf掃描版

3.2 jquery 知識點 網頁特效 3.1 OS 文本 scrip clas 《Web編程基礎：CSS、JavaScript、jQuery》緊密圍繞網頁設計師在進行Web前臺開發中實際需要掌握的技術，全面介紹了使用DIV+CSS、JavaScript、jQuery進行W

前端基礎：JavaScript介紹

ets 表達 語句 應用 roi CA 優勢 退出 添加 JavaScript介紹 JavaScript簡介 1.在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現二層，因為Netscape與Sun合作，Netscape管理

CSS之旅:前端基礎之CSS

dot bms 布局 兩個 vbr 元素定位 padding 占滿 one CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。 CSS語

前端(2)：CSS

一、CSS CSS（cascading style sheet，層疊樣式表）定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它會按照這個樣式表來對文件進行格式化（渲染）。 1、CSS語法 每個CSS樣式由兩個部分組成：選擇器   +    宣告（屬性、屬性值