當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

小蓝同学的前端之旅--HTML\CSS集成复习

發布時間：2024/1/1 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了小蓝同学的前端之旅--HTML\CSS集成复习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

小藍同學的前端之旅--HTML\CSS集成復習

前端學習路線
- 復習模式
- - api的重要性
  - HTML基礎總結
  - - head標簽的常用標簽
    - body標簽中常用標簽
    - - 文本元素標簽
      - 表格標簽
      - 表格分組
      - 框架
      - 表單
  - CSS復習
  - - 筆記1
    - - 什么是CSS?
      - CSS基礎選擇器？
      - 設置字體屬性樣式
      - 設置文本屬性樣式
      - CSS的三種引入方式？
      - 使用CSS復合選擇器
      - 偽類選擇器使用規范
      - 塊元素和行內元素行內塊元素
      - background 復合寫法
    - 筆記2
    - - CSS的三大特性
      - 盒子模型（box model ）
      - CSS設置表格的邊框線
      - 盒子外邊距塌陷問題
      - 給盒子設置圓角邊框
      - 給盒子添加陰影
      - 給文字添加陰影
    - 筆記3
    - - 為什么需要浮動
      - 浮動的排列特性
      - 3種常見的布局方式
      - 定位
      - 為什么需要清除浮動
      - 額外標簽法
        單偽元素
        雙偽元素
      - PS切圖
    - 筆記4
    - - 為什么要用定位
      - relative 相對定位
      - absolute 絕對定位
      - 絕對定位盒子水平居中
      - 絕對定位盒子水垂直居中
      - fixed 固定定位
      - 將一個元素固定到瀏覽器版心右側
      - sticky 粘性定位
      - 設置疊放次序 z-index
      - 顯示和隱藏調度兩種方式和區別
    - CSS高級
    - - 精靈圖（CSS Sprites）
      - FW 軟件精確測量
      - 字體圖標
      - CSS三角
      - CSS用戶界面樣式
      - vertical-align屬性應用
      - 解決圖片底部默認空白縫隙問題
      - 溢出的文字省略號顯示
      - 常見的布局技巧
      - 1、制作緊緊挨著的邊框盒子
        2、圖片跟文字左右分隔
        3、制作分頁按鈕
        4、三角強化訓練
    - HTML5和CSS3新特性
    - - CSS初始化
      - HTML5新增特性、表單和布局
      - 新增語義化標簽
        視頻標簽 video mp4/webM/ogg
        音頻標簽 audio mp3/wav/ogg 格式
        新的input表單
        新的表單標簽屬性
      - css新增選擇器
      - 屬性選擇器
        結構偽類選擇器
        nth-child（n）和 nth-of-type（n）的區別
        偽元素選擇器

前端學習路線

要想學好前端，首先得有一條明確的學習路線，這很重要。
以下轉載自博客園大牛
前端學習路線

復習模式

因為在學校學過一個學期前端，對html、css、js基礎之類的東西多少有些了解，這篇博客記錄自己對之前所學知識的鞏固以及分享一些自己的復習方法

api的重要性

API是學習編程語言的必備工具文檔，API文檔里包含了很多官方的說明，這也是深入編程技術必備API文檔的原因

本來想將一些api文檔放上來，發現沒有文檔附件的通道
不過問題不大，推薦最合適的兩個網站自學
菜鳥教程
W3school

個人比較喜歡菜鳥教程…

HTML基礎總結

HTML(Hyper Text Markup Language)：超文本標記語言
W3C(World Wide Web Consortium):萬維網聯盟

HTML不區分大小寫

后綴名：.html 或 .htm

基本語法 <標簽> 內容 </標簽> 文檔結構***html標簽***：文檔以<html>開始，以</html>結束***head標簽***：主要包括頁面的標題<title>、元信息<meta>CSS樣式<link><style>、JavaScript腳本<script>等這此標簽中的元素通常不在頁面中顯示***body標簽***：用戶在瀏覽器主窗口中看到的信息<html><head>頁面頭部信息</head><body>網頁正文</body></html>

head標簽的常用標簽

<!DOCTYPE HTML> <html><head><title>html</title><meta name="keywords" content="我愛你,對不起,表白"><meta name="description" content="這是一個憨憨的頁面">、<meta http-equiv="content-type" content="text/html"><meta http-equiv="refresh" content="5;url=http://www.baidu.com"/><meta name="autor" content="lwj"><link rel="stylesheet" href="css/myhtml.css"><style>/* 這里設置是內部的CSS樣式 */</style><script>// 這里寫是內部的js腳本代碼</script> </head><body>111</body> </html>

body標簽中常用標簽

文本元素標簽

效果如下：

在頁面中，有些字符不能直接使用，只能通過引用的方式實現

<html><head><title>body頁面主體中的標簽</title><meta http-equiv="content-type" content="text/html;charser=utf-8"></head><body><h1>標題一</h1><h2>標題二</h2>....<h6>標題六</h6><font face="楷體" size="10px" color="green">字體標簽</font><br> 我是普通字<br><b>我是加粗字</b><br><i>我是傾斜字</i><br><s>我有刪除線</s><br><u>我有下劃線</u><br>我有上標<sup>000</sup><br>我有下標<sub>111</sub><br><strong>我是加強字跟加粗字體差不多</strong><br><big><font color="red">我</font></big>比周圍大一個字體<br><small><font color="red">我</font></small>比周圍小一個字體<p >我是段落標簽</p>我是一個<br>換行標簽我是一根<hr size="2px" color="blue" width="80%" align="center">水平線<ol type="A"><strong>有序列表</strong> <li>列表1</li><li>列表2</li><li>列表3</li><li><ol start="3"><li>列表1</li><li>列表2</li></ol></li></ol><ul type="circle"><strong> 無序列表</strong> <li>列表1</li><li>列表2</li><li>列表3</li><li><ul type="none"> <li>列表1</li><li>列表2</li><li>列表3</li></ul> </li></ul> <dl><dt>自定義列表1</dt><dd>內容1</dd><dt>自定義列表2</dt><dd>內容2</dd><dt>自定義列表3</dt><dd>內容3</dd></dl><div class="box" align="center" style="width: 150px; height: 150px; background-color: red;" >我是一個div塊</div><br><span style=" width: 150px; height: 150px; background-color: lawngreen;" >我是一個行級元素</span><br><br><span style="display: block; width: 150px; height: 150px; background-color: lawngreen;" >我是一個變成塊級元素的行級元素</span><img src="img/Af10.png" alt="Af10"><br><img src="E:\20201230來自C盤\學校\圖片\BackImage\bpic20267_s.jpg" alt="背景"><br><a href="http://www.baidu.com">百度</a><br><a id="newAnchor">我是目標錨點</a><br><a href="#newAnchor">我要跳轉到newAnchor錨點</a><br>單擊圖片進入百度<br><a href="http://www.baidu.com"><img src="img/Af3.png" alt=""></a><br><map name="map"><area shape="circle" coords="" href="" alt=""><area shape="rect" coords="" href="" alt=""><area shape="poly" coords="" href="" alt=""></map><img src="img/Df11.png" alt="" usemap="map"><br><a href="#">空鏈接</a><br><a href="mailto:1494782535@qq.com">lwj的郵箱鏈接</a><br><a href="javascript:alter('javascipt!!!')">javascript鏈接</a><br></body> </html>

這幾天比較忙，抽空將所有的HTML內容過了一遍

表格標簽

<html> <head><title>表格</title><meta http-equiv="content-type" content="text/html"></head> <body><table align="left" bgcolor="red" border="5px" bordercolor="black" cellpadding="10px" cellspacing="0px"height="500px" width="500px" rules="all"> <caption>我是一個五行五列的表格</caption> <tr><th bgcolor="yellow">標題1</th><th>標題2</th><th>標題3</th><th>標題4</th><th bgcolor="light-blue">標題5</th></tr><tr><td>內容1-1</td><td>內容1-2</td><td colspan="3" align="center" valign="center">內容1-3</td></tr><tr><td>內容2-1</td><td>內容2-2</td><td>內容2-3</td><td rowspan="3" colspan="2" align="center" valign="center">內容2-5</td></tr><tr><td>內容3-1</td><td>內容3-2</td><td>內容3-3</td></tr><tr><td>內容4-1</td><td>內容4-2</td><td>內容4-3</td></tr></table></body> </html>

表格分組

<html> <head><title>表格行分組</title> </head> <body><table border="2px" rules="groups"><caption>行分組</caption><thead><tr><th>標題1</th><th>標題2</th><th>標題3</th><th>標題4</th></tr></thead><tbody><tr><td>內容A1</td><td>內容A2</td><td>內容A3</td><td>內容A4</td></tr><tr><td>內容A1</td><td>內容A2</td><td>內容A3</td><td>內容A4</td></tr></tbody><TBODY><tr><td>內容1</td><td>內容2</td><td>內容3</td><td>內容4</td></tr><tr><td>內容1</td><td>內容2</td><td>內容3</td><td>內容4</td></tr></TBODY><tfoot><tr><td colspan="4"> </td></tr></tfoot></table> <table border="1px" rules="groups"><caption>列分組</caption><colgroup span="3" ></colgroup><colgroup bgcolor="red"></colgroup><tr align="center"><th>標題1</th><th>標題2</th><th>標題3</th><th>標題4</th></tr><tr align="center"><td>內容1</td><td>內容2</td><td>內容3</td><td>內容4</td></tr><tr align="center"><td>內容1</td><td>內容2</td><td>內容3</td><td>內容4</td></tr ><tr align="center"><td>內容1</td><td>內容2</td><td>內容3</td><td>內容4</td></tr></table> <table border="1px"><caption>外表格</caption><tr><th>標題1</th><th>標題2</th><th>標題3</th><th>標題4</th></tr><tr><td>內容1-1</td><td>內容2-2</td><td>內容3-3</td><td>內容4-4</td></tr><tr><td>內容1-1</td><td>內容2-2</td><td>內容3-3</td><td>內容4-4</td></tr><tr><td><table border="1px"><caption>內嵌表格</caption><tr><th> </th><th> </th><th> </th><th> </th><tr><td>內容1</td><td>內容2</td><td>內容3</td><td>內容4</td></tr></tr></table></td><td>內容2-2</td><td>內容3-3</td><td>內容4-4</td></tr><tr><td>內容1-1</td><td>內容2-2</td><td>內容3-3</td><td>內容4-4</td></tr></table></body> </html>

框架

<html> <head><title>框架集的基本結構</title> </head> <iframe src="http://www.baidu.com" frameborder="1" valign="middle" align="center" height="600px" width="1000px"></iframe></html>

表單

<html> <head><title>表單標簽</title> </head> <body> <form action="../plan2/framePage.html" method="GET" enctype="multipart/form-data" id="a-form-id" name="a-form-name"><span>單行文本框(長度:20 字符數:5):</span> <input type="text" name="text" value="4546454654" size="20px" maxlength="5"><br><span>文本框:</span> <input type="text" name="text" value="" placeholder="text"><br><span>只讀文本框:</span> <input type="text" name="text" value="只讀" readonly><br><span>禁用文本框:</span> <input type="text" name="text" value="禁用" disabled><br><span>密碼框:</span> <input type="password" name="password" id="password" value=""><br><span>隱藏域:</span> <input type="hidden" name="hidden" id=""><br><span>單選按鈕：</span> <br>單選1<input type="radio" name="radio" id="" value="單選1" checked><br>單選2<input type="radio" name="radio" id="" value="單選2"> <br>單選3<input type="radio" name="radio" id="" value="單選3"><br><span>復選框：</span> <br> 復選1<input type="checkbox" name="checkbox" id="" checked><br>復選2<input type="checkbox" name="checkbox" id="" ><br>復選3<input type="checkbox" name="checkbox" id="" checked><br>復選4<input type="checkbox" name="checkbox" id="" checked><br><span>文件選擇框：</span> <input type="file" name="" id="" accept="image/*"><br><span>郵箱框</span> <input type="email"><br><input type="submit" name="" id=""><br><input type="reset"><br><input type="button" value="按鈕" onclick="alert('調用js腳本')"><br><input type="image" src="../plan1/img/Af19.png" width="50px" height="50px" name="" id=""><br><button type="submit">提交表單</button><button type="reset">重置表單</button><button type="button">按鈕</button><br><span>多行文本區域：</span><br><textarea name="" id="" cols="50" rows="10" ></textarea><br><span>下拉列表：</span><br><select name="" id="" size="" > <option value="a">a</option><option value="b" selected>b</option><optgroup label="分組1"><option value="c">c</option><option value="d">d</option><option value="e">e</option></optgroup><optgroup label="分組2"><option value="f">f</option><option value="g">g</option></optgroup></select> </form><input type="text" name="" id="" placeholder="這是表單外部控件" form="a-form-id"><fieldset><legend>表單分組1</legend>單選1 <input type="radio" name="radio1" checked>單選2 <input type="radio" name="radio1">單選3 <input type="radio" name="radio1">單選4 <input type="radio" name="radio1"></fieldset><fieldset><legend>表單分組2</legend>復選1 <input type="checkbox" checked>復選2<input type="checkbox">復選3 <input type="checkbox">復選4<input type="checkbox"></fieldset> </body> </html>

因為自己時間也比較緊迫，沒來得及梳理，所以又臭又長，不過基礎部分大部分知識點都涉及可以通過標題方便

CSS復習

筆記1

什么是CSS?

CSS(Cascading Style Sheets)層疊樣式表，用于對網頁的美化和布局網頁
CSS也是一種標記語言
html只關注內容的語義結構
CSS最大的價值：由HTML專注做結構的呈現，樣式交給CSS 結構和樣式分離

CSS基礎選擇器？

標簽選擇器

id選擇器 #
類選擇器 class .

通配符選擇器 *

設置字體屬性樣式

font-size 設置字號 px

font-family 設置字體
font-weight 字體粗細 700/bold 加粗 400 /normal 不加粗
font-style 字體樣式 itlic傾斜 normal 不傾斜
font 字體連寫 font:font-style font-weight font-size/line-height font-family
例font:
順序不能顛倒 font-size和font-family不能省否則不起作用

設置文本屬性樣式

color 文本顏色
text-align 文本對齊方式設置文字水平對齊方式
text-indent 文本縮進 em為單位 text-indent:2em;
text-decoration 文本修飾下戶線 text-decoration：underline 取消下劃線 text-decration：none
line-height 行高行與行之間的距離

CSS的三種引入方式？

行內樣式表行內式 style 控制一個標簽
內部樣式表嵌入式 style 控制一個頁面
外部樣式表鏈接式控制多個頁面
rel 定義當前文檔和被連接文檔之間的關系 stylesheet 這是鏈接的一個樣式表文件
href
使用Chrome 調試工具調試樣式
F12或右擊檢查元素

使用emmet語法

emmet快速格式化

使用CSS復合選擇器

后代選擇器、子類選擇器、并集選擇器、偽類選擇器
后代選擇器 div p{ } 空格隔開
子類選擇器 div>p{ } >號隔開
并集選擇器 div,p{ } 英文，隔開
偽類選擇器 a:hover 冒號隔開

偽類選擇器使用規范

鏈接偽類選擇器順序：LVHA a:link 未被選中的鏈接 a:visited 已被選擇過的鏈接 a:hover 鼠標劃過的鏈接 a:active 鼠標按下時的鏈接
:focus 偽類選擇器獲取焦點的表單元素
元素的集中顯示模式

塊元素和行內元素行內塊元素

塊元素：

——

、
、
、
、
、

特點：獨占一行、高寬和內外邊距可以控制、寬度默認是容器（父級寬度）的100%、是一個容器，里面可以放其他元素
行內元素：、、、、、、、、、等行內元素也稱內聯元素
特點：一行可顯示多個行內元素、高寬設置無效、默認寬度就是內容本身寬、行內元素只能容納文本和其他行內元素
行內塊元素：、、他們同時具有行內元素和塊元素的特點
特點：一行可以顯示多個、默認寬度是本身寬度、可控制高寬內外邊距

元素顯示模式互相轉換代碼
display：block —> 塊元素
display：inline —> 行內元素
display：inline-block —>行內塊元素
背景圖片設置方式
background-color：black；背景顏色
background-image：url（）/none 默認情況背景平鋪
background-repeat：no-repeat 不平鋪
repeat 平鋪
repeat-x 沿著x軸平鋪（橫向平鋪）
repeat-y 沿著y軸平鋪 (縱向平鋪)

background-position：x y；背景圖片位置
x y 可以是方位名詞，也可以是精準的坐標
position：top/center/bottom/left/right
背景圖象固定
background-attachment: scroll | fixed
scroll：背景圖象隨對象內容滾動
fixed：背景圖象固定

background 復合寫法

background:背景顏色背景圖片地址背景平鋪背景圖象滾動背景圖片位置
background：transparent url(image.jpg) no-repeat fixed center top;

筆記2

CSS的三大特性

1、層疊性
給相同的選擇器設置相同的樣式就近原則
2、繼承性
子標簽可以繼承父親的某些樣式如文字樣式（text-，font-，line- 開頭的元素以及color屬性）
簡化代碼，降低CSS樣式復雜性
行高的繼承：12px/1.5 行高為字體大小的1.5倍
3、優先級
！important 無窮大
style行內樣式 1000
id選擇器 # 100
類選擇器偽類選擇器 . 10
標簽選擇器 1
繼承或者通配符選擇器 * 0
z-index設置優先級

盒子模型（box model ）

一個盛放內容的容器 HTML頁面是一個盒子模型
準確闡述盒子模型四個組成部分
內容
內邊距 padding 內容區與邊框的距離
邊框 border 盒子的邊框
外邊距 margin 盒子和盒子之間的位置
利用邊框復合寫法給元素添加邊框
border-width 邊框粗細
border-style 邊框類型 solid 實線邊框 dashed虛線邊框 dotted 點線邊框
border-color 邊框顏色
border：邊框大小邊框類型邊框顏色
border：1px solid red ；

CSS設置表格的邊框線

table，td，th{
border：1px solid red；
boder-collapse：collapse；合并相鄰的變寬避免邊框線重合變粗的情況
font-size：14px；
text-align：center；
}
padding
當盒子沒有指定width/height屬性時 padding不會撐開盒子大小
margin
盒子居中對齊 margin：0 auto；
計算盒子的實際大小
利用盒子模型布局模塊案例

盒子外邊距塌陷問題

一般情況下當給子盒子設置外邊距時父盒子必定會塌陷下來解決方法 1、給父盒子定義一個上邊框2、給父盒子添加一個上內邊距3、給父盒子添加 overflow：hidden

span等行內元素盡量只設置左右邊距不設置上下邊距

給盒子設置圓角邊框

border-radius:length；
圓形：border-radius：50%；
圓角矩形：border-radius：height的一半；
border-radius：Apx Bpx；
A:左上右下
B：右上左下

給盒子添加陰影

給文字添加陰影

text-shadow h-shadow v-shadow spread blurCSS的三大特性

筆記3

為什么需要浮動

很多布局效果，標準流無法完成，此時就可以利用浮動流完成布局。因為浮動可以改變元素標簽的排列方式
浮動最典型的應用：讓多個塊級元素在同一行進行排列
網頁布局標準：多個塊級元素縱向排列，使用標準流，橫向排列，使用浮動
float 屬性用于給塊級元素添加浮動框，使得塊級元素挨著左邊緣或者右邊緣或者另一個浮動框的邊緣

浮動的排列特性

1、浮動元素會脫離文檔流

2、浮動元素會在一行內顯示并元素頂部對齊
3、浮動元素具有行內塊元素的特征
行內元素和塊元素都可以設置浮動浮動后都具有行內塊元素的特性
行內元素浮動后不需要再轉換 display：block
一行可顯示多個默認寬度是本身寬度可設置高寬

3種常見的布局方式

標準流（普通流、文檔流）：按照網頁默認布局方式排列
塊級元素：從上到下排列
行內元素：從左到右碰到父元素邊緣換行
浮動
float
浮動布局注意點：
先使用標準流的父元素排列上下位置，再采用內部子元素浮動排列左右位置
一個元素浮動，理論上其余的兄弟元素也要浮動（防止出現問題）
浮動的盒子只會影響浮動盒子后面的標準流，不會影響前面的標準流

定位

position：absilutily | relative | fixed

為什么需要清除浮動

父盒子不適合給高度當盒子浮動時父盒子檢測不到子盒子的高度就不會撐開父盒子父盒子高度出現問題會影響下標準流的位置
浮動元素不再占用文檔流位置會對后面的元素排版產生影響
至少兩種清除浮動的方法
清除浮動的本質：清除浮動對標準流的影響
清除浮動的策略：閉合浮動，子盒子浮動只在父盒子內影響，不會影響父盒子外面的盒子
方法

額外標簽法

在父盒子最末添加一個額外塊級標簽設置塊級標簽的樣式為clear：both；
給父元素添加一個 overflow: hidden | auto | scroll 屬性會隱藏多余的盒子
偽元素清除法

單偽元素

雙偽元素

PS切圖

ps插件切圖
currentman切圖工具

筆記4

為什么要用定位

浮動讓多個塊級盒子一行沒有縫隙排列顯示，經常用于橫向排列盒子
定位讓一個盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置并且可以壓住其他盒子
定位的4種分類以及他們的特點
static 靜態定位
沒有偏移量（標準流）

relative 相對定位

相對于自己原來的位置移動
不脫離文檔流原先所占有的位置依舊保留
典型應用：給絕對定位當爹

absolute 絕對定位

相對于祖先元素來移動位置
如果沒有祖先元素或者祖先元素沒有定位則根據瀏覽器定位
若父級或祖先級都有定位就近原則
絕對定位會脫離文檔流
子絕父相

絕對定位盒子水平居中

1、盒子左側走到瀏覽器的中心位置 left：50%
2、向左走自身位置的一半 margin-left：-100px

絕對定位盒子水垂直居中

1、盒子上側走到瀏覽器的中心位置 top：50%
2、向上走自身位置的一半 margin-top：-100px

fixed 固定定位

將盒子固定到瀏覽器可視區的某個位置
以瀏覽器的可視窗口為參照移動元素
跟父類元素沒有關系
不會歲滾動條滾動
固定定位不占有原先的位置（脫標）
固定定位可以看成一種特殊的絕對定位

將一個元素固定到瀏覽器版心右側

1、將盒子元素設置 position:fixed
2、設置位置到版心的中間位置 left：50%
3、再右移版心元素的一半像素例如版心width：500px 則設置為 margin-left：250px

sticky 粘性定位

既有相對定位的特點又有絕對定位的特點
以瀏覽器的可是窗口為參照移動盒子（固定定位）
不脫離標準流會一直占有原先的位置（相對定位）
top|right|bottom|left

設置疊放次序 z-index

默認 auto
數字后面不能加單位
只有定位的盒子才有z-index屬性
為什么常用子絕父相布局
子盒子絕對定位（absolute）不占有位置可以放到父盒子的任意位置不會影響兄弟盒子
父盒子必須加上定位才能限制子盒子在父盒子內顯示
父盒子必須占有位置所以必須要相對定位
父類盒子采用相對定位（relative）
相對定位經常用來作為絕對定位的父級

淘寶輪播圖布局

顯示和隱藏調度兩種方式和區別

display：none 隱藏元素將元素隱藏，不占有原來位置
display：block 顯示元素
visibility:hidden 隱藏保留原來位置
visbility:visible

overflow:visible 照常顯示默認|auto 自動在需要的時候添加滾動條|hidden 超出部分隱藏|scroll 添加滾動條顯示

CSS高級

精靈圖（CSS Sprites）

目的：為了有效的減少服務器接收和請求次數，提高頁面的加載速度
原理：將網頁中的一些小背景圖像整合到一張大圖中，這樣服務器只需要一次請求就可以了
使用方法：主要針對背景圖片的使用，將多個小背景圖片整合到一張大圖片中
稱這個大圖片為sprite圖（精靈圖、雪碧圖）
移動背景圖片的位置即使用 background-position
移動的距離就是目標圖片的X和Y坐標圖片的 X軸往左移動數值為負值 Y軸往上移動數值為負值
精靈圖需要最精準的測量每個圖片的大小和位置

FW 軟件精確測量

字體圖標

使用場景
如果遇到一些結構和樣式比較簡單的小圖標就用字體圖標
如果遇到一些結構和樣式復雜一點的小圖片，就用精靈圖
字體圖標：顯示為圖標，本質是文字
下載地址：icomoon字庫 http://icomoon.io
阿里 iconfont字庫 http://www.iconfont.cn/

CSS三角

代碼

div{
width：0px；
height：0px；
border：10px solid transparent；
border-top-color：red；
}
div{
width：0px；
height：0px；
border-top：10px solid red；
border-left：10px solid transparent；
border-bottom：10px solid transparent；
}

CSS用戶界面樣式

鼠標樣式 cursor：default|pointer|move|text|not-allowed
default:默認鼠標箭頭
pointer：小手
move：十字箭頭
text：文本選擇
not-allowed：不允許選擇

表單樣式：文本邊框 outline：none
文本域大小：resize：none

vertical-align屬性應用

用于設置元素的垂直對齊方式只針對行內元素及行內塊元素有效
vertical-align：baseline | top | middle | bottom
baseline：基線對齊 top 頂線對齊 middle 中線對齊 bottom 底線對齊

解決圖片底部默認空白縫隙問題

出現bug原因：當圖片為行內或者行內塊元素時，圖片元素默認會與文字的基線對齊，所以下方會留有一個小空隙
兩種解決
給圖片添加屬性：vertical-align:middle | bottom | top 只要不是基線對齊即可
將行內元素或行內塊元素改成塊級元素即添加 display：block；屬性

溢出的文字省略號顯示

行文本溢出
代碼
/* 將文本正常顯示，遇到邊緣自動換行 /
/ white-space: normal; /
/ 將文本強制放到一行顯示 /
white-space: nowrap;
/ 隱藏超出區域的內容 /
overflow: hidden;
/ 將超出的內容使用省略號顯示 /
text-overflow: ellipsis;
多行文本溢出省略
有較大的兼容性問題，適合與webKit瀏覽器或移動端（webKit 瀏覽器內核谷歌瀏覽器和移動端）
代碼
overflow: hidden;
text-overflow: ellipsis;
/ 彈性伸縮盒子顯示 /
display: -webkit-box;
/ 限制行數 /
-webkit-line-clamp: 3;
/ 設置伸縮盒子的子元素的排列方式 */
-webkit-box-orient: vertical;

常見的布局技巧

1、制作緊緊挨著的邊框盒子

防止多個盒子排列邊框線出現1+1=2的情況
在排列的盒子中添加 margin-left：-1px；

2、圖片跟文字左右分隔

浮動的本質：產生文字環繞效果，會使盒子浮動起來，但是不會壓住文字
使用浮動達到圖片跟文字左右分隔顯示

3、制作分頁按鈕

行內塊元素會默認有外邊距
設置text-align：center 會將元素中的行內塊水平居中

4、三角強化訓練

HTML5和CSS3新特性

CSS初始化

{
/ 內外邊距清零 */
margin: 0;
padding: 0;
}

em,i{
/* 斜體字部傾斜 */
font-style: normal;
}

li{
/* 清除小圓點 /
list-style: none;
}
img{
/ 照顧低版本瀏覽器圖片外鏈接有邊框問題*/
border: 0;
/* 取消圖片底部空隙問題默認為基線對齊,會在圖片下面占有位置 /
vertical-align: middle;
}
botton{
/ 鼠標放在按鈕上變成小手 /
cursor:pointer;
}
a{
columns: #000000;
/ 刪除鏈接下劃線 */
text-decoration: none;

}
/* 清楚浮動 */
.clearfix:after{
content: ‘’;
visibility: hidden;
clear: both ;
display:block;
height: 0;
}
clearfix{
*zoom: 1;
}

HTML5新增特性、表單和布局

新的標簽
因為 div是沒有語義的標簽

新增語義化標簽

頭部標簽導航標簽

總結

以上是生活随笔為你收集整理的小蓝同学的前端之旅--HTML\CSS集成复习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：第四届蓝桥杯单片机省赛自动灌溉系统
下一篇： linux的FHS目录结构简要介绍