前端學習總結

時間 2019-12-06

標籤前端學習總結简体版

原文原文鏈接

1.背景定位html

/*單同樣式*/
background-color:#f1f1f1;
/*CSS註釋：顏色單詞(red yellow ...) 16進制(#0CC)*/
background-image:url(img/2.jpg);
/*默認狀態下，背景會平鋪*/
background-repeat:no-repeat;
/*
no-repeat 不重複
repeat-x 水平平鋪
repeat-y 垂直平鋪
*/
background-position:bottom;
/*
背景定位：x  y 
      具體數值
      100px 30px
      10% 20%
      left | center | right    top | center | bottom
      左 中 右                  上 中 下
      當第二個屬性值沒有填寫，默認居中
*/
background-attachment: fixed;/*圖片固定，不會隨滾動條而滾動*/
/*複合樣式*/
/*前面的樣式等價於*/
background:#ccc url(img/dg.jpg) no-repeat -100px -20px fixed;/*之間位置能夠隨便放，可是定位的x和y兩個值必須連續靠近*/

background 複合樣式

不區分屬性書寫順序的

顏色相關圖片相關是否重複位置是否滾動

background-attachment 背景是否滾動

fixed 固定在瀏覽器可視區域

scroll 更跟隨滾動條滾動

2.邊框樣式chrome

/* border: 1px solid red; border: 1px dotted red; 10px 太粗了，不一樣瀏覽器兼容性問題*/
/*複合樣式*/
border-top: 50px solid red;
border-left: 50px solid yellow;
border-bottom: 50px solid blue;
border-right: 50px solid green;
background: #f1f1f1;

3.PS技術：切圖（摳圖），測量，圖片簡單處理瀏覽器

如何獲得一張圖片：
1).設計師給你的PS圖片（首頁.psd）
2).印屏幕：PrtSc SysRq
3).瀏覽器（chrome）的插件字體

PS使用快捷鍵url

Ctrl + N 新建spa

Alt+ 放大縮小插件

Ctrl + D 取消選框設計

Alt + Delete 鋪上前景顏色code

Ctrl + T 自由變換能夠抹掉文字htm

Ctrl + Delete 鋪上背景顏色

Alt + Ctrl + Shift + S 存儲爲Web應用格式

Ctrl + Shift + i 反選

P 裁剪

F 展現模式

F8 顯示寬度和高度

Ctrl + V 粘上背景顏色

4.邊框

1).邊框的形狀：非矩形（即它的角不是直角）, 要嚴謹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
           /*width: 400px;
           height: 400px;
           border: 20px solid red;
           border-top-color: black;*/
           width: 0px;
           height: 0px;
           border: 20px solid red;
           border-top-color: black;
        }
    </style>
    <!--
        邊框的形狀：非矩形（即它的角不是直角）, 
        要嚴謹
    -->
</head>
<body>
    <div></div>
</body>
</html>

2). 內容是會撐開容器寬高

背景不會佔用容器寬高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框練習</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: 10px solid pink;
        }
    </style>
    <!--
        內容是會撐開容器寬高
        背景不會佔用容器寬高
    -->
</head>
<body>
    <div>
       這是一段文字
    </div> 
</body>
</html>

5.em 是根據字體大小來進行計算的

1em = 當前字體的大小

word-spacing 單詞間距（以空格爲解析單位）

測量文字大小值，最好是使用從上到下的方式去測量文字大小

記錄：

16px 8px

12px 16px

一個空格有多大?

宋體字體下文字大小的一半。

字體格式不同，字體大小也不同。

文字屬性：是有順序的

6. padding 內填充

注意：設置padding 後會撐大容器的大小

padding 的四個方法

上右下左（記住小技巧：手錶順時針，12點，3點，6點，9點）

top right bottom left

padding複合方法

只有一個屬性值時：4個方向都是同一個值

設置兩個屬性值時：第一個屬性值設置的上下兩個方向，第二個屬性值設置的左右兩個方向。

設置三個屬性值時：第一個屬性值設置的上面一個方向，

第二個屬性值設置的左右兩個方向，

第三個屬性值設置的下面一個方向。

設置四個屬性值時：第一個屬性值設置的上面一個方向，

第二個屬性值設置的右面一個方向，

第三個屬性值設置下下面一個方向，

第四個屬性值設置的左面一個方向。

7.margin 外邊距

標籤於與標籤之間的間隔(距離)

margin複合方法

只有一個屬性值時：4個方向都是同一個值

設置兩個屬性值時：第一個屬性值設置的上下兩個方向，第二個屬性值設置的左右兩個方向。

設置三個屬性值時：第一個屬性值設置的上面一個方向，

第二個屬性值設置的左右兩個方向，

第三個屬性值設置的下面一個方向。

設置四個屬性值時：第一個屬性值設置的上面一個方向，

第二個屬性值設置的右面一個方向，

第三個屬性值設置下下面一個方向，

第四個屬性值設置的左面一個方向。

8.margin的問題

1.margin-top 傳遞

解決方法:僅學以學知識點能夠使用border解決具體方法：#box加上 border: 1px solid black;

2.margin上下疊壓 div1和div2之間的具距離應該爲200px，如今爲100px

解決技巧：

1.仍是使用margin，能夠建某一元素方向設置成預想的值。margin疊壓會取最大的margin值。

2.若是元素沒有特殊特徵，也能夠用padding代替

把#div1的margin: 100px 100px 200px 100px

相關代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       #box {
          background-color: red;
          border: 1px solid black;
       }
       #div1{
           height: 50px;
           background-color: pink;
           /*margin: 100px*/
           margin: 100px 100px 200px 100px;
       }
       #div2{
           height: 50px;
           background-color:yellow;
           margin: 100px;
       }
    </style>
</head>
<body>
    <div id="box">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
    </div>
</body>
</html>