當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2024/1/1 HTML 22 豆豆

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

小藍(lán)同學(xué)的前端之旅--HTML\CSS集成復(fù)習(xí)

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

前端學(xué)習(xí)路線

要想學(xué)好前端，首先得有一條明確的學(xué)習(xí)路線，這很重要。
以下轉(zhuǎn)載自博客園大牛
前端學(xué)習(xí)路線

復(fù)習(xí)模式

因?yàn)樵趯W(xué)校學(xué)過(guò)一個(gè)學(xué)期前端，對(duì)html、css、js基礎(chǔ)之類的東西多少有些了解，這篇博客記錄自己對(duì)之前所學(xué)知識(shí)的鞏固以及分享一些自己的復(fù)習(xí)方法

api的重要性

API是學(xué)習(xí)編程語(yǔ)言的必備工具文檔，API文檔里包含了很多官方的說(shuō)明，這也是深入編程技術(shù)必備API文檔的原因

本來(lái)想將一些api文檔放上來(lái)，發(fā)現(xiàn)沒(méi)有文檔附件的通道
不過(guò)問(wèn)題不大，推薦最合適的兩個(gè)網(wǎng)站自學(xué)
菜鳥教程
W3school

個(gè)人比較喜歡菜鳥教程…

HTML基礎(chǔ)總結(jié)

HTML(Hyper Text Markup Language)：超文本標(biāo)記語(yǔ)言
W3C(World Wide Web Consortium):萬(wàn)維網(wǎng)聯(lián)盟

HTML不區(qū)分大小寫

后綴名：.html 或 .htm

基本語(yǔ)法 <標(biāo)簽> 內(nèi)容 </標(biāo)簽> 文檔結(jié)構(gòu)***html標(biāo)簽***：文檔以<html>開始，以</html>結(jié)束***head標(biāo)簽***：主要包括頁(yè)面的標(biāo)題<title>、元信息<meta>CSS樣式<link><style>、JavaScript腳本<script>等這此標(biāo)簽中的元素通常不在頁(yè)面中顯示***body標(biāo)簽***：用戶在瀏覽器主窗口中看到的信息<html><head>頁(yè)面頭部信息</head><body>網(wǎng)頁(yè)正文</body></html>

head標(biāo)簽的常用標(biāo)簽

<!DOCTYPE HTML> <html><head><title>html</title><meta name="keywords" content="我愛你,對(duì)不起,表白"><meta name="description" content="這是一個(gè)憨憨的頁(yè)面">、<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>/* 這里設(shè)置是內(nèi)部的CSS樣式 */</style><script>// 這里寫是內(nèi)部的js腳本代碼</script> </head><body>111</body> </html>

body標(biāo)簽中常用標(biāo)簽

文本元素標(biāo)簽

效果如下：

在頁(yè)面中，有些字符不能直接使用，只能通過(guò)引用的方式實(shí)現(xiàn)

<html><head><title>body頁(yè)面主體中的標(biāo)簽</title><meta http-equiv="content-type" content="text/html;charser=utf-8"></head><body><h1>標(biāo)題一</h1><h2>標(biāo)題二</h2>....<h6>標(biāo)題六</h6><font face="楷體" size="10px" color="green">字體標(biāo)簽</font><br> 我是普通字<br><b>我是加粗字</b><br><i>我是傾斜字</i><br><s>我有刪除線</s><br><u>我有下劃線</u><br>我有上標(biāo)<sup>000</sup><br>我有下標(biāo)<sub>111</sub><br><strong>我是加強(qiáng)字跟加粗字體差不多</strong><br><big><font color="red">我</font></big>比周圍大一個(gè)字體<br><small><font color="red">我</font></small>比周圍小一個(gè)字體<p >我是段落標(biāo)簽</p>我是一個(gè)<br>換行標(biāo)簽我是一根<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> 無(wú)序列表</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>內(nèi)容1</dd><dt>自定義列表2</dt><dd>內(nèi)容2</dd><dt>自定義列表3</dt><dd>內(nèi)容3</dd></dl><div class="box" align="center" style="width: 150px; height: 150px; background-color: red;" >我是一個(gè)div塊</div><br><span style=" width: 150px; height: 150px; background-color: lawngreen;" >我是一個(gè)行級(jí)元素</span><br><br><span style="display: block; width: 150px; height: 150px; background-color: lawngreen;" >我是一個(gè)變成塊級(jí)元素的行級(jí)元素</span><a href="http://www.baidu.com">百度</a><br><a id="newAnchor">我是目標(biāo)錨點(diǎn)</a><br><a href="#newAnchor">我要跳轉(zhuǎn)到newAnchor錨點(diǎn)</a><br>單擊圖片進(jìn)入百度<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內(nèi)容過(guò)了一遍

表格標(biāo)簽

<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>我是一個(gè)五行五列的表格</caption> <tr><th bgcolor="yellow">標(biāo)題1</th><th>標(biāo)題2</th><th>標(biāo)題3</th><th>標(biāo)題4</th><th bgcolor="light-blue">標(biāo)題5</th></tr><tr><td>內(nèi)容1-1</td><td>內(nèi)容1-2</td><td colspan="3" align="center" valign="center">內(nèi)容1-3</td></tr><tr><td>內(nèi)容2-1</td><td>內(nèi)容2-2</td><td>內(nèi)容2-3</td><td rowspan="3" colspan="2" align="center" valign="center">內(nèi)容2-5</td></tr><tr><td>內(nèi)容3-1</td><td>內(nèi)容3-2</td><td>內(nèi)容3-3</td></tr><tr><td>內(nèi)容4-1</td><td>內(nèi)容4-2</td><td>內(nèi)容4-3</td></tr></table></body> </html>

表格分組

<html> <head><title>表格行分組</title> </head> <body><table border="2px" rules="groups"><caption>行分組</caption><thead><tr><th>標(biāo)題1</th><th>標(biāo)題2</th><th>標(biāo)題3</th><th>標(biāo)題4</th></tr></thead><tbody><tr><td>內(nèi)容A1</td><td>內(nèi)容A2</td><td>內(nèi)容A3</td><td>內(nèi)容A4</td></tr><tr><td>內(nèi)容A1</td><td>內(nèi)容A2</td><td>內(nèi)容A3</td><td>內(nèi)容A4</td></tr></tbody><TBODY><tr><td>內(nèi)容1</td><td>內(nèi)容2</td><td>內(nèi)容3</td><td>內(nèi)容4</td></tr><tr><td>內(nèi)容1</td><td>內(nèi)容2</td><td>內(nèi)容3</td><td>內(nèi)容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>標(biāo)題1</th><th>標(biāo)題2</th><th>標(biāo)題3</th><th>標(biāo)題4</th></tr><tr align="center"><td>內(nèi)容1</td><td>內(nèi)容2</td><td>內(nèi)容3</td><td>內(nèi)容4</td></tr><tr align="center"><td>內(nèi)容1</td><td>內(nèi)容2</td><td>內(nèi)容3</td><td>內(nèi)容4</td></tr ><tr align="center"><td>內(nèi)容1</td><td>內(nèi)容2</td><td>內(nèi)容3</td><td>內(nèi)容4</td></tr></table> <table border="1px"><caption>外表格</caption><tr><th>標(biāo)題1</th><th>標(biāo)題2</th><th>標(biāo)題3</th><th>標(biāo)題4</th></tr><tr><td>內(nèi)容1-1</td><td>內(nèi)容2-2</td><td>內(nèi)容3-3</td><td>內(nèi)容4-4</td></tr><tr><td>內(nèi)容1-1</td><td>內(nèi)容2-2</td><td>內(nèi)容3-3</td><td>內(nèi)容4-4</td></tr><tr><td><table border="1px"><caption>內(nèi)嵌表格</caption><tr><th> </th><th> </th><th> </th><th> </th><tr><td>內(nèi)容1</td><td>內(nèi)容2</td><td>內(nèi)容3</td><td>內(nèi)容4</td></tr></tr></table></td><td>內(nèi)容2-2</td><td>內(nèi)容3-3</td><td>內(nèi)容4-4</td></tr><tr><td>內(nèi)容1-1</td><td>內(nèi)容2-2</td><td>內(nèi)容3-3</td><td>內(nèi)容4-4</td></tr></table></body> </html>

框架

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

表單

<html> <head><title>表單標(biāo)簽</title> </head> <body> <form action="../plan2/framePage.html" method="GET" enctype="multipart/form-data" id="a-form-id" name="a-form-name"><span>單行文本框(長(zhǎng)度:20 字符數(shù):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>復(fù)選框：</span> <br> 復(fù)選1<input type="checkbox" name="checkbox" id="" checked><br>復(fù)選2<input type="checkbox" name="checkbox" id="" ><br>復(fù)選3<input type="checkbox" name="checkbox" id="" checked><br>復(fù)選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('調(diào)用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>多行文本區(qū)域：</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>復(fù)選1 <input type="checkbox" checked>復(fù)選2<input type="checkbox">復(fù)選3 <input type="checkbox">復(fù)選4<input type="checkbox"></fieldset> </body> </html>

因?yàn)樽约簳r(shí)間也比較緊迫，沒(méi)來(lái)得及梳理，所以又臭又長(zhǎng)，不過(guò)基礎(chǔ)部分大部分知識(shí)點(diǎn)都涉及可以通過(guò)標(biāo)題方便

CSS復(fù)習(xí)

筆記1

什么是CSS?

CSS(Cascading Style Sheets)層疊樣式表，用于對(duì)網(wǎng)頁(yè)的美化和布局網(wǎng)頁(yè)
CSS也是一種標(biāo)記語(yǔ)言
html只關(guān)注內(nèi)容的語(yǔ)義結(jié)構(gòu)
CSS最大的價(jià)值：由HTML專注做結(jié)構(gòu)的呈現(xiàn)，樣式交給CSS 結(jié)構(gòu)和樣式分離

CSS基礎(chǔ)選擇器？

標(biāo)簽選擇器

id選擇器 #
類選擇器 class .

通配符選擇器 *

設(shè)置字體屬性樣式

font-size 設(shè)置字號(hào) px

font-family 設(shè)置字體
font-weight 字體粗細(xì) 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不能省否則不起作用

設(shè)置文本屬性樣式

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

CSS的三種引入方式？

行內(nèi)樣式表行內(nèi)式 style 控制一個(gè)標(biāo)簽
內(nèi)部樣式表嵌入式 style 控制一個(gè)頁(yè)面
外部樣式表鏈接式控制多個(gè)頁(yè)面
rel 定義當(dāng)前文檔和被連接文檔之間的關(guān)系 stylesheet 這是鏈接的一個(gè)樣式表文件
href
使用Chrome 調(diào)試工具調(diào)試樣式
F12或右擊檢查元素

使用emmet語(yǔ)法

emmet快速格式化

使用CSS復(fù)合選擇器

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

偽類選擇器使用規(guī)范

鏈接偽類選擇器順序：LVHA a:link 未被選中的鏈接 a:visited 已被選擇過(guò)的鏈接 a:hover 鼠標(biāo)劃過(guò)的鏈接 a:active 鼠標(biāo)按下時(shí)的鏈接
:focus 偽類選擇器獲取焦點(diǎn)的表單元素
元素的集中顯示模式

塊元素和行內(nèi)元素行內(nèi)塊元素

塊元素：

——

、
、
、
、
、

特點(diǎn)：獨(dú)占一行、高寬和內(nèi)外邊距可以控制、寬度默認(rèn)是容器（父級(jí)寬度）的100%、是一個(gè)容器，里面可以放其他元素
行內(nèi)元素：、、、、、、、、、等行內(nèi)元素也稱內(nèi)聯(lián)元素
特點(diǎn)：一行可顯示多個(gè)行內(nèi)元素、高寬設(shè)置無(wú)效、默認(rèn)寬度就是內(nèi)容本身寬、行內(nèi)元素只能容納文本和其他行內(nèi)元素
行內(nèi)塊元素：、、他們同時(shí)具有行內(nèi)元素和塊元素的特點(diǎn)
特點(diǎn)：一行可以顯示多個(gè)、默認(rèn)寬度是本身寬度、可控制高寬內(nèi)外邊距

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

background-position：x y；背景圖片位置
x y 可以是方位名詞，也可以是精準(zhǔn)的坐標(biāo)
position：top/center/bottom/left/right
背景圖象固定
background-attachment: scroll | fixed
scroll：背景圖象隨對(duì)象內(nèi)容滾動(dòng)
fixed：背景圖象固定

background 復(fù)合寫法

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

筆記2

CSS的三大特性

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

盒子模型（box model ）

一個(gè)盛放內(nèi)容的容器 HTML頁(yè)面是一個(gè)盒子模型
準(zhǔn)確闡述盒子模型四個(gè)組成部分
內(nèi)容
內(nèi)邊距 padding 內(nèi)容區(qū)與邊框的距離
邊框 border 盒子的邊框
外邊距 margin 盒子和盒子之間的位置
利用邊框復(fù)合寫法給元素添加邊框
border-width 邊框粗細(xì)
border-style 邊框類型 solid 實(shí)線邊框 dashed虛線邊框 dotted 點(diǎn)線邊框
border-color 邊框顏色
border：邊框大小邊框類型邊框顏色
border：1px solid red ；

CSS設(shè)置表格的邊框線

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

盒子外邊距塌陷問(wèn)題

一般情況下當(dāng)給子盒子設(shè)置外邊距時(shí)父盒子必定會(huì)塌陷下來(lái)解決方法 1、給父盒子定義一個(gè)上邊框2、給父盒子添加一個(gè)上內(nèi)邊距3、給父盒子添加 overflow：hidden

span等行內(nèi)元素盡量只設(shè)置左右邊距不設(shè)置上下邊距

給盒子設(shè)置圓角邊框

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

給盒子添加陰影

給文字添加陰影

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

筆記3

為什么需要浮動(dòng)

很多布局效果，標(biāo)準(zhǔn)流無(wú)法完成，此時(shí)就可以利用浮動(dòng)流完成布局。因?yàn)楦?dòng)可以改變?cè)貥?biāo)簽的排列方式
浮動(dòng)最典型的應(yīng)用：讓多個(gè)塊級(jí)元素在同一行進(jìn)行排列
網(wǎng)頁(yè)布局標(biāo)準(zhǔn)：多個(gè)塊級(jí)元素縱向排列，使用標(biāo)準(zhǔn)流，橫向排列，使用浮動(dòng)
float 屬性用于給塊級(jí)元素添加浮動(dòng)框，使得塊級(jí)元素挨著左邊緣或者右邊緣或者另一個(gè)浮動(dòng)框的邊緣

浮動(dòng)的排列特性

1、浮動(dòng)元素會(huì)脫離文檔流

2、浮動(dòng)元素會(huì)在一行內(nèi)顯示并元素頂部對(duì)齊
3、浮動(dòng)元素具有行內(nèi)塊元素的特征
行內(nèi)元素和塊元素都可以設(shè)置浮動(dòng) 浮動(dòng)后都具有行內(nèi)塊元素的特性
行內(nèi)元素浮動(dòng)后不需要再轉(zhuǎn)換 display：block
一行可顯示多個(gè) 默認(rèn)寬度是本身寬度可設(shè)置高寬

3種常見的布局方式

標(biāo)準(zhǔn)流（普通流、文檔流）：按照網(wǎng)頁(yè)默認(rèn)布局方式排列
塊級(jí)元素：從上到下排列
行內(nèi)元素：從左到右碰到父元素邊緣換行
浮動(dòng)
float
浮動(dòng)布局注意點(diǎn)：
先使用標(biāo)準(zhǔn)流的父元素排列上下位置，再采用內(nèi)部子元素浮動(dòng)排列左右位置
一個(gè)元素浮動(dòng)，理論上其余的兄弟元素也要浮動(dòng)（防止出現(xiàn)問(wèn)題）
浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流

定位

position：absilutily | relative | fixed

為什么需要清除浮動(dòng)

父盒子不適合給高度當(dāng)盒子浮動(dòng)時(shí) 父盒子檢測(cè)不到子盒子的高度就不會(huì)撐開父盒子父盒子高度出現(xiàn)問(wèn)題會(huì)影響下標(biāo)準(zhǔn)流的位置
浮動(dòng)元素不再占用文檔流位置會(huì)對(duì)后面的元素排版產(chǎn)生影響
至少兩種清除浮動(dòng)的方法
清除浮動(dòng)的本質(zhì)：清除浮動(dòng)對(duì)標(biāo)準(zhǔn)流的影響
清除浮動(dòng)的策略：閉合浮動(dòng)，子盒子浮動(dòng)只在父盒子內(nèi)影響，不會(huì)影響父盒子外面的盒子
方法

額外標(biāo)簽法

在父盒子最末添加一個(gè)額外塊級(jí)標(biāo)簽設(shè)置塊級(jí)標(biāo)簽的樣式為clear：both；
給父元素添加一個(gè) overflow: hidden | auto | scroll 屬性會(huì)隱藏多余的盒子
偽元素清除法

單偽元素

雙偽元素

PS切圖

ps插件切圖
currentman切圖工具

筆記4

為什么要用定位

浮動(dòng)讓多個(gè)塊級(jí)盒子一行沒(méi)有縫隙排列顯示，經(jīng)常用于橫向排列盒子
定位讓一個(gè)盒子自由的在某個(gè)盒子內(nèi)移動(dòng)位置或者固定屏幕中某個(gè)位置并且可以壓住其他盒子
定位的4種分類以及他們的特點(diǎn)
static 靜態(tài)定位
沒(méi)有偏移量（標(biāo)準(zhǔn)流）

relative 相對(duì)定位

相對(duì)于自己原來(lái)的位置移動(dòng)
不脫離文檔流原先所占有的位置依舊保留
典型應(yīng)用：給絕對(duì)定位當(dāng)?shù)?/p>

absolute 絕對(duì)定位

相對(duì)于祖先元素來(lái)移動(dòng)位置
如果沒(méi)有祖先元素或者祖先元素沒(méi)有定位則根據(jù)瀏覽器定位
若父級(jí)或祖先級(jí)都有定位就近原則
絕對(duì)定位會(huì)脫離文檔流
子絕父相

絕對(duì)定位盒子水平居中

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

絕對(duì)定位盒子水垂直居中

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

fixed 固定定位

將盒子固定到瀏覽器可視區(qū)的某個(gè)位置
以瀏覽器的可視窗口為參照移動(dòng)元素
跟父類元素沒(méi)有關(guān)系
不會(huì)歲滾動(dòng)條滾動(dòng)
固定定位不占有原先的位置（脫標(biāo)）
固定定位可以看成一種特殊的絕對(duì)定位

將一個(gè)元素固定到瀏覽器版心右側(cè)

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

sticky 粘性定位

既有相對(duì)定位的特點(diǎn)又有絕對(duì)定位的特點(diǎn)
以瀏覽器的可是窗口為參照移動(dòng)盒子（固定定位）
不脫離標(biāo)準(zhǔn)流會(huì)一直占有原先的位置（相對(duì)定位）
top|right|bottom|left

設(shè)置疊放次序 z-index

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

淘寶輪播圖布局

顯示和隱藏調(diào)度兩種方式和區(qū)別

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

overflow:visible 照常顯示默認(rèn)|auto 自動(dòng) 在需要的時(shí)候添加滾動(dòng)條|hidden 超出部分隱藏|scroll 添加滾動(dòng)條顯示

CSS高級(jí)

精靈圖（CSS Sprites）

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

FW 軟件精確測(cè)量

字體圖標(biāo)

使用場(chǎng)景
如果遇到一些結(jié)構(gòu)和樣式比較簡(jiǎn)單的小圖標(biāo) 就用字體圖標(biāo)
如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點(diǎn)的小圖片，就用精靈圖
字體圖標(biāo)：顯示為圖標(biāo)，本質(zhì)是文字
下載地址：icomoon字庫(kù) http://icomoon.io
阿里 iconfont字庫(kù) 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用戶界面樣式

鼠標(biāo)樣式 cursor：default|pointer|move|text|not-allowed
default:默認(rèn) 鼠標(biāo)箭頭
pointer：小手
move：十字箭頭
text：文本選擇
not-allowed：不允許選擇

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

vertical-align屬性應(yīng)用

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

解決圖片底部默認(rèn)空白縫隙問(wèn)題

出現(xiàn)bug原因：當(dāng)圖片為行內(nèi)或者行內(nèi)塊元素時(shí)，圖片元素默認(rèn)會(huì)與文字的基線對(duì)齊，所以下方會(huì)留有一個(gè)小空隙
兩種解決
給圖片添加屬性：vertical-align:middle | bottom | top 只要不是基線對(duì)齊即可
將行內(nèi)元素或行內(nèi)塊元素改成塊級(jí)元素即添加 display：block；屬性

溢出的文字省略號(hào)顯示

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

常見的布局技巧

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

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

2、圖片跟文字左右分隔

浮動(dòng)的本質(zhì)：產(chǎn)生文字環(huán)繞效果，會(huì)使盒子浮動(dòng)起來(lái)，但是不會(huì)壓住文字
使用浮動(dòng)達(dá)到圖片跟文字左右分隔顯示

3、制作分頁(yè)按鈕

行內(nèi)塊元素會(huì)默認(rèn)有外邊距
設(shè)置text-align：center 會(huì)將元素中的行內(nèi)塊水平居中

4、三角強(qiáng)化訓(xùn)練

HTML5和CSS3新特性

CSS初始化

{
/ 內(nèi)外邊距清零 */
margin: 0;
padding: 0;
}

em,i{
/* 斜體字部?jī)A斜 */
font-style: normal;
}

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

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

HTML5新增特性、表單和布局

新的標(biāo)簽
因?yàn)?div是沒(méi)有語(yǔ)義的標(biāo)簽

新增語(yǔ)義化標(biāo)簽

頭部標(biāo)簽導(dǎo)航標(biāo)簽

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：第四届蓝桥杯单片机省赛自动灌溉系统
下一篇： html单选框对齐,HTML - 对齐单