文章目錄

1.HTML

1.html負責結構，css負責樣式，js負責行爲，哪一個最重要？

我覺得是html，就像人的骨架。只有html紮實了，纔有進一步優化的可能，雖然簡單，但很重要。

2.html已經發展到html5了，還有必要學習html嗎？

存在即合理，通過html的學習，才能叩開前端的大門！

3.主要內容要學些啥？（梳理一下）

內核、web標準；
div-span；
常見標籤：img、a、base、p、h1~h6（注意，只有6個）；
相對路徑/絕對路徑；
三表：列表（有序、無序、自定義[dl,dt,dd]）、表格、表單

1.1 表格

1.如何解釋barder，cellspacing和cellpadding（表格屬性三參）？

把table看作一個表格域，裏面放了很多單元格td
cellspacing：單元格與單元格之間的距離
cellpadding：單元格內容距離其邊距的距離
設置了border值才能看見表格線
通常這三個參數都設置爲0
屬性還包括：width，height

2.表格其他標籤？

caption：表格標題，置於table標籤內
thead：標題部分；tbody：內容部分
合併單元格：rowspan，colspan

1.2 表單

1.常見形式？

<input type=" ">

2.type內容？

radio：多選一按鈕，若是多組，同一組命名相同的名字
text：文本框，value=" "內填默認顯示文字
checkbox：多選按鈕，當checked="checked"默認選中
image：圖片形式按鈕，需要src
file：上傳文件

3.其他標籤？

select：選擇標籤，子爲option標籤，實現下拉菜單功能，當selected=“selected”時默認選中
form：包裹input，實現表單上傳
label：其for標籤與input中的id標籤一致，實現聚焦
textarea：文本域，用於大文本，標籤內文字爲默認文本

2.CSS

1.主要內容？

基本選擇器：類、標籤、Id、通用
樣式表：內部、外部、行內
字體、文本
複合選擇器：空格（後代）；>（子代）；無空格（交集）；逗號（並集）；+（兄弟）；鏈接僞類（lv hao）
顯示模式（display）：行內、行內塊、塊級
chrome調試
盒子：行高、內容、padding、border、margin
佈局：標準流、浮動、定位
背景

2.目的？

添加樣式，實現結構與樣式的分離
分離效果最好的是外部樣式表，可實現整個站點的設計；其次是內部樣式表，實現當前網頁；而行內樣式表的權重最高，較爲方便，做測試和練習可使用

2.1 字體

1.常見屬性？

font-size：字號
font-family：字體，在font連寫時，與第1項是必須的
font-weight:是否加粗，400（normal）爲不加粗，否則700（bold），取代或修改b或strong標籤
font-style:是否傾斜，normal與italic，取代或修改em或i標籤

2.2 文本

1.常見屬性？

corlor：字體顏色
line-height：行高
text-align：水平方式，tac（首字母）再按tab鍵則爲居中模式
text-indent：首行縮進，常用縮進2字符爲2em
text-decoration：none：取消下劃線等；underline：下劃線；line-through：刪除線，取代或修改s或del標籤
textarea{resize:none;}用戶不能操縱機制調節元素的尺寸；默認爲both，可以。textarea標籤中resize縮放屬性的設置
針對行內塊元素，通常是圖片、表單與文字對齊，設置垂直方向對齊方式

vertical-align:baseline;//基線對齊；middle，中線；top，頂部；bottum，底線

2.3 顯示模式（display）

1.顯示模式有哪幾種？常見標籤？區別？

塊級：block，可設置寬高背景等、換行；
行內：inline，均不可；
行內塊：inline-block，僅可以設置寬高背景等，之間有空隙；如span

2.應用？

設置導航欄時直接設置a標籤，無需li標籤包裹，然後設置行內塊元素

3.注意點？

文本類塊級元素如p、h和dt等不要再放塊級元素
a鏈接內不要放a，但可以放塊級元素，特殊
選擇器嵌套儘量不要多餘3級

4.顯示與隱藏？

display有兩個屬性值可以搭配使用，分別是none（隱藏後不保留位置）；block（顯示）；
visibility（不常用，有兩個屬性值）：hidden（隱藏後仍保留位置）和visible；
overflow :visible,auto,hidden,scroll
5.顯示與隱藏的應用舉例？
可用於視頻播放器的圖標,開始隱藏，懸停顯示
步驟1：先設置一個父a，相對定位；
步驟2：插入子圖片；
步驟3：插入子盒子，class=“mask”，半透明，絕對定位，隱藏
步驟4：在.mask內再插入背景圖標
步驟5：

a:hover .mask{
			display:block;
			}

6.溢出的文字隱藏，哪3步？

    li{
            white-space: nowrap;/* 強制一行顯示 */
            overflow: hidden;
            text-overflow: ellipsis;/* 溢出的部分省略號替代 */
        }

2.4 盒子

1.行高設置？

行高的準確定義：兩行文字基線與基線間的距離，因爲上距離等於下距離
行高=盒子高即垂直居中
行高大於盒子高則文本往下移

2. css三大特性？

層疊：權重相同並衝突的情況下以最後的樣式爲準（就近原則）
繼承：文本、字體等，如text-、font-、line-、corlor
優先級：！important（特殊情況使用）
css的三大特性（繼承，層疊，優先級）

3.水平居中？

margin：0 auto；盒子必須有寬纔有效！
auto自動充滿，0可以設着爲任意數字
margin-left：0 auto;盒子在頁面右邊

2.5 背景

1.常用屬性？

background-color
background-image：url（）；
background–repeat
background-position，位置有兩種方式，1）水平，垂直，爲對齊方式；2）x軸，y軸，爲偏移距離
background-attachment：scroll或 fixed，背景圖是否固定
簡寫形式：顏色圖片是否平鋪是否固定位置

2. 背景透明（css3）?

raba（0 0 0 0.5），透明度爲最後一個值
推薦軟件（切片、測距）：FW

3.背景圖片？

當產品展示類的時候選擇插入圖片
當用到小圖標或超大背景圖，需要移動圖片位置的時候則使用背景圖片

2.6 邊框border

1.邊框屬性？

常用的簡寫形式：border：1px solid red；
除了盒子，還可以應用在input邊框、按鈕；
表格的單元格td和table，防止疊加使其變粗，操作如下：

table,td{
	border-collapse:collapse;
}

2.圓角邊框（CSS3）?

border-radius，從左上角順時針開始，IE8及以下不支持

2.7 內邊距padding

1.如何理解？

邊框bodder與內容之間的距離
padding-left：常用在a鏈接佈置導航欄
推薦編輯器：FastStone，用作測像素、截圖
chrome調試時右鍵有個hover

2.撐開盒子？

盒子一般指margin+border+padding+content（包含height和width），若保證總寬度不變，一個變大則其餘元素變小
方法1：父盒子提供的內容寬高=子盒子提供的內容寬高（居中設置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         .father{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 100px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

方法2：設置父盒子上左內邊距即可,父盒子寬高無需等於子盒子，子盒子位置不變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         .father{
            width: 200px;
            height: 200px;
            background-color: red;
            padding-left: 100px;
            padding-top: 100px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

3.調試時的顏色？

藍色：content
小青色：padding
橘黃色：border
淡黃色：margin

4.佈局注意點？

父子之間儘量在父盒子中用padding，兄弟之間則用margin（margin的垂直會出現重疊，水平則是疊加）
margin和padding分別適合什麼場景使用？

4.不會撐開父盒子的情況？

子盒子無需指定寬度，會跟隨父盒子

5.盒子陰影（CSS3）

box-shadow:水平陰影（必須，正值則向右）垂直陰影（必須，正值則向下）模糊距離（虛實）陰影大小陰影顏色（包括透明度）

2.8 外邊距margin

1. 當子盒子設置margin-top，則父盒子會一起下移，如何設置父盒子解決？

border-top
padding-top
overflow：hidden

2.padding有撐開問題，那margin呢？

塌陷

2.9 浮動float

1.常規佈局？

標準流
浮動：（核心）多個div在一個行內顯示，方便佈局
定位

2.注意點？

第1個浮，第2個不浮，則第2個到第1個原位置並在底層
第2個浮，第1個不浮，則第1個位置不變，第2個貼在下面，浮動隻影響後面的盒子
只考慮左右，不佔位置，會影響後面的標準流
若用行內塊元素中間會有縫隙，用浮動則不會，更爲方便和靈活
浮動不會超過內邊距

3.隱藏模式？

可以讓元素默認轉爲行內塊元素特性，但不佔位置，空隙幾乎沒有，若設置了浮動無需再給行內元素轉爲行內塊元素

4.簡記3點，浮漏特？

浮：浮在標準流盒子上面
漏：不佔位置，漏給標準流盒子
特：特別注意2點，1）需要和標準父盒子搭配；2）具有行內塊元素特性

5.清除浮動原因？

本質：由於父盒子不方便設置高度，標準流會撐開父盒子，但浮動不會；要解決父盒子因爲子盒浮動引起的內部高度爲0的問題，以免影響後面的標準流。
記住：誰影響佈局就清除誰，並不是要所有都清除

6.清除浮動方法？

額外標籤法：在最後浮動的標籤後新加一個變遷，css設置clear：both；缺點是添加無意義的標籤，結構化差！
給父盒子添加overflow：hidden；
添加:after僞元素，並將類名.clearfix添加到父標籤，固定語句：

.clearfix { *zoom:1; } //爲了兼容性，因爲ie6/7不能使用僞類，所以加上此行代碼。
.clearfix:after { clear:both;content:'';display:block;width:0;height:0;visibility:hidden; }

雙僞元素：before和：after清除

.clearfix:after,
.clearfix:before {
             content: '.';
           display: table;
         }
               .clearfix:after {
          clear: both;
        }         
         .clearfix {
           *zoom: 1;
        }

2.10 頁面佈局

table可以佈局，不常用
流程：1）確定版心；2）分析頁面中行模塊以及每個行模塊中的列模塊；3）制定HTML結構；4）CSS初始化，div+css佈局控制模塊
善於運用ps或FW進行切片、測距
除了定位可以實現圖片壓蓋效果，還可以設置兩個盒子（父子），子盒子的margin-top設置爲負值

2.11 樣式

1.鼠標樣式cursor

pointer:手型
text：選擇型
move：移動型
default：默認

2.輪廓性outline，當點擊文本框時顯示藍色邊框，設置none取消；此外，input內也可以插入背景圖標，先設置爲塊級元素

*3.CSS重難點

3.1 定位

1.常與js特效結合，重點理解定位類型和偏移量
2.定位類型：

靜態定位static：默認，可用作取消定位；
相對定位relative：原位置還佔着，以其左上角爲基點進行偏移；
絕對定位absolute：不佔位置，與浮動一樣，以當前屏幕爲基準，若父盒子設置相對定位則以父盒子爲基準；
固定定位fixed：盒子不隨着滾動，脫標，始終以頁面爲基準。

3.父相子絕：圖片可以不用背景插入，直接在html標籤中插入；不一定要圖片，盒子即可。
4.定位的盒子居中：用margin無效，需要先設置left：50%；然後margin-left：-width/2;垂直方向同理。
5.跟浮動一樣，添加絕對定位和固定定位以後，元素模式都轉換爲行內塊元素，其寬高與內容有關，固定定位最後再去設置，反正不佔位置。
6.z-index默認值爲0，多個元素定位後可能會發生重疊，後來者居上。因此，設置z-index的級別，數字越大級別越高，越在上層。
7.邊框緊挨在一起的話會造成1+1=2的情況造成加粗：

可設置margin-left：-1px；因爲設置定位的盒子都是緊挨着，第一個向左移1px會帶動其餘盒子，然後第2個及其後面的盒子都向左移動1px。
在懸停時候可重新設置border，然後再設置相對定位使盒子浮起來，不然左邊的邊框被蓋住了，不設置相對定位的話就設置z-index：1；

8.小結：三者區別可從是否脫標、是否佔有位置（僅相對定位佔位置）、以何爲基準考慮

3.2 精靈圖

1.價值：減少服務器請求次數，提高加載速度；
2.應用：主要做背景圖片而不是產品展示；
3.原理：把多個小背景圖片放在一個大圖上，通過background-position獲取，只需請求1張圖片而無需多張圖片。
4.不足：維護成本高，一般由美工製作，背景圖不多的情況下不需要。

3.3 滑動門

1.典型應用：微信網頁導航欄：https://weixin.qq.com/, 導航欄字數不一，精靈圖材料如下，ao.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            margin: 100px;
            height: 33px;
            background: url(ao.png) no-repeat;
            padding-left: 15px;
            line-height: 33px;
            display: inline-block;
            text-decoration: none;
            color:#fff;
        }
      span{
            background: url(ao.png) no-repeat  right;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <a href="#">
        <span>首頁</span>
    </a>
</body>
</html>

2.導航欄的背景顏色可以設置，也可以插入背景圖片，採用橫向平鋪方式
3.背景不可繼承

【HTML+CSS】詳細整理！備戰秋招，夯實基礎，查漏補缺！

文章目錄

1.HTML

1.1 表格

1.2 表單

2.CSS

2.1 字體

2.2 文本

2.3 顯示模式（display）

2.4 盒子

2.5 背景

2.6 邊框border

2.7 內邊距padding

2.8 外邊距margin

2.9 浮動float

2.10 頁面佈局

2.11 樣式

*3.CSS重難點

3.1 定位

3.2 精靈圖

3.3 滑動門

DAPPER 事務 TRANSACTION

Java中線程的創建方式

一鍵自動化博客發佈工具,chrome和firfox詳細配置

【Vue】組件的定義與切換

【前端】筆試題 2019.08.09

【前端】計劃

【JavaScript】編程題 2019.08.12

【前端】筆試題 2019.08.07

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結