day 46

時間 2019-11-16

標籤 day 简体版

原文原文鏈接

目錄css

CSS樣式操做

CSS樣式操做

給字體設置長寬

只有塊級標籤才能夠設置長寬html

行內標籤設置了沒有任何做用(僅僅只取決於內部文本值)瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yeah</title>
    <style>

        div {
            width: 200px;
            height: 100px;
        }
        span {
            width: 500px;
            height: 400px;
        }

    </style>

</head>
<body>
<div>
    div
</div>
<span>span</span>

</body>
</html>

字體顏色

color後面能夠跟多種顏色數據字體

顏色英文：red
rgb(1,1,1)：能夠利用截圖軟件獲取三基色數字,數字範圍只能是0~255
直接使用 pycharm 提供的取色器
rgba(128,128,128,0.4)：最後一個數字能夠調節顏色的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YEAH</title>
    <style>
        p {
            font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif;
            font-size: 48px;
            font-weight: lighter;
            /*color: red;*/
            /*color: rgb(156,59,24);*/
            /*color: #c3ff69;*/
            color: rgba(61,94,86,0.7);
        }
        
    </style>

</head>
<body>

<p>
    鵝鵝鵝，曲項向天歌。
</p>

</body>
</html>

語義

a {
text-decoration: none;
}
取消a標籤默認的下劃線ui

背景圖片

默認是鋪滿整個區域url

一般一個頁面上的一個個小圖標，並非單獨的，而是經過一個很是大的圖片，該圖片上有網址所用到全部的小圖標。spa

經過控制背景圖片的位置，來顯示不一樣的圖標樣式code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YEAH</title>
    <style>
        #d1 {
            height: 800px;
            background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573737709470&di=3763ef1067405bd66e3c372343454bc6&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201608%2F24%2F20160824232248_PdVQU.jpeg");
            background-attachment: fixed;
        }

    </style>

</head>
<body>
<div style="height: 600px;background-color: red"></div>
<div style="height: 600px;background-color: blue"></div>
<div id="d1"></div>
<div style="height: 600px;background-color: greenyellow"></div>
</body>
</html>

邊框

後面跟三個參數htm

顏色，字體，樣式繼承

能夠單獨設置：樣式，顏色，粗細

border-top-style:dotted;

border-top-color:red;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

能夠單獨設置某一邊的樣式

border-top: 3px solid red;

border-left: 1px dotted green;

border-right: 5px dashed blue;

border-bottom: 10px solid pink;

也能夠簡寫統一設置

display

inline 將塊級標籤變成行內標籤

block 可以將行內標籤設置成長寬和獨佔一行

inline-block 便可以設置長度，也能夠在一行展現

display:none 隱藏標籤，而且標籤原來佔的位置也消失了

visibility:hidden 隱藏標籤，可是標籤原來的位置還在

盒子模型

以快遞盒爲例

1.兩個快遞盒之間的距離(標籤與標籤之間的距離)

2.快遞盒盒子的厚度(邊框border)

3.快遞盒中的物品距離內邊框的距離(內部文本與內邊框之間的距離)

4.物品的大小(文本大小)

margin: 10px; 只寫一個參數，上下左右全是

margin: 10px 20px; 第一個控制的是上下，第二個則是左右

margin: 10px 20px 30px; 第一個控制的是上，第二個是左右。第三個是下

margin: 10px 20px 30px 40px; 第一個控制的是上，第二個是右，第三個是下，第四個是左

margin:0 auto; 左右居中，不能上下居中

浮動(**************)

float

在CSS中，任何元素均可以浮動。

浮動的元素，是脫離正常的文檔流(原來的位置會空出來)

瀏覽器會優先展現文本內容(**********)

浮動帶來的影響

會形成父標籤塌陷

clear

可清除浮動帶來的影響

.clearfix:after {
    content: '';
    clear: both;    /*左右兩邊都不能有浮動的元素*/
    display: block;
}
哪個父標籤塌陷了，就給它加clearfix這個類屬性值

overflow溢出屬性

visible 默認值。內容不會被修改，會呈如今元素框以外

hidden 內容會被修剪，而且其他內容是不可見的

scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。

auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容

inherit 規定應該從父元素繼承 overflow屬性的值

定位

全部的標籤默認都是靜態的，沒法改變位置

position: static;

必須將靜態的狀態修改爲定位以後

相對定位(瞭解) relative

相對於標籤原來的位置，移動

絕對定位(購物車) absolute

相對於已經定位過(只要不是static均可以 relative)的父標籤，再作定位(**************)

固定定位(回到頂部) fixed

相對於瀏覽器窗口，固定在某個位置不動

位置的辯護是否脫離文檔流

1.不脫離文檔流

相對定位

2.脫離文檔流

浮動的元素

絕對定位

opacity

既能夠調顏色，也能夠調字體

1. 監控系統 day-46
2. day 46 html 標籤補充
3. 《從零開始學Swift》學習筆記（Day 46）——下標重寫
4. Flutter Weekly Issue 46
5. 46. Permutations
6. 46、Snap
7. Permutations(46)
8. 46.Permutations
9. Day learn,day up
10. Day Day UP UP !
更多相關文章...
• PHP juliantojd() 函數 - PHP參考手冊
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• JDK13 GA發佈：5大特性解讀
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解

相關標籤/搜索

每日一句

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