標籤：word check css選取器 排序 廣告 提交 import filter button
今天把整個html和css的總結了一遍。可能還有疏忽之處，共同學習吧
【行為樣式三者分離】
不加行內css樣式，不加行內js效果
【標籤】
1》單標籤
<!doctype html>文檔頭，告訴瀏覽器這是一個網頁
br換行
img插入圖片，src屬性 預設有圖片上方3像素，間距
2》雙標籤
body主體，預設margin
span
div
h1-h6 標題標籤，預設字型加粗，間距，字型大小
p段落標籤，預設有間距
a超連結，可添加width、height屬性，如果給定的高度或者寬度比例不合適，圖片會扭曲或者展開，如果只給定一個值，瀏覽器會自動計算等比；href屬性可添加連結、路徑、錨點或javascript：；預設樣式底線，字型顏色
traget屬性traget=‘_blank‘; 從新頁面中開啟
traget=‘_self‘; 從本頁中開啟
b預設字型加粗 有強調的含義
strong預設字型加粗
i預設字型傾斜
em預設字型傾斜 有強調的含義
ul/ol/li 列表，預設文本樣式小圓點，間距
dl/dt/dd 描述列表，預設dt、dd有間距
link外聯樣式表，包含rel屬性（屬性值為stylesheet），href屬性
<iframe src="廣告的網址介面" width="300" height="250" scrolling="no" marginwidth="0" frameborder="0"></iframe>
scrolling="0"去掉廣告條
marginheight="0"內容邊距上邊距為0
marginwidth="0"內容邊距左邊距為0
frameborder="0"去掉邊框
【表單標籤】
inputtext文本輸入框value=‘預設文字，輸入時需要刪除‘placeholder=‘預設文字，輸入時不需要刪除‘
button按鈕value=‘按鈕的名稱‘
password密碼框
radio單選框 checked預設選中 實現單選功能需要選項中的name的值一樣
submit提交按鈕
rersect 重設按鈕
<secelt>
<option></option> 下拉式功能表 selected預設選中的
</select>
checkbox複選框checked預設選中
<label></label> 標記標籤 使用id和for屬性來相互關聯
<texteara></texteara> 文本域 預設樣式
<form action="提交地址"></form> 表單元素提交資料的外框
清除表單元素的預設樣式
border：none；
padding:0;
outline:none; 清除焦點框
background:none; 清除背景顏色
resize:none; 清除文本域的預設拖拽
【表格元素】
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格垂直置中的方式：
vertical-align:top;頂部
vertical-align:middle;中部對齊
vertical-align:bottom;底部對齊
表格邊框的合并：
table{border-collapse:collapse;};
表格的屬性
cellpadding="0";
cellspacing="0";
rowspan="2" 行合并
colspan="2" 列合并
【屬性】
屬性=‘屬性值’
href="連結地址"
src
type
name
value
title提示文本 滑鼠移上去的時候顯示的文字
alt=‘替換文本‘ 圖片載入失敗的時候顯示的文字
traget="_blank" 從新視窗開啟串連
traget="_self" 從本視窗開啟串連
【css樣式】
width
min-width:最小寬度（一般都等於網頁的內容寬度）
height
border：2px solid/dashed/dotted red;點線（dotted）在ieFirefox中顯示為圓點
border-top/right/bottom/left;
border-width:邊框粗細
border-style:邊框線性
border-color:邊框顏色
border-radius:50%; 圓角，百分數相當於對應長或者寬的比例 四個值得方向是左上、右上、右下、左下
text-align:left;（預設）
line-height：對於單行文本，行高與高度相等時，文本是垂直置中的
font
font-style:italic/normal;字型傾斜
font-weidth:bold/normal;
font-size 字型的大小
font-family:‘Mircosoft Yahei‘;
簡寫：font：italic bold 12px/20px ‘Mircosoft Yahei‘;
字型簡寫至少存在字型大小和字型系列
background
background-image：url(‘圖片的地址‘)；
background-repeat:no-repeat/repeat-x/repeat-y;
background-position:如果唯寫一個值，第二個預設為center；如果是數值表示，第一個是x軸
簡寫：background:url() no-repeat position color;不區分先後順序
background-position:50% 50%;圖片在中間位置
padding：內邊距（內容與邊框之間的距離）
padding:10px;四個方向的內邊距都未10px
padding:10px 20px;上下內邊距為10px，左右內邊距為20px
padding:10px 10px 30px; 上邊距為10排序，左右邊距各為20px，下邊距為30px
padding:10px 20px 30px 40px; 上、右、下、左的內邊距分別為10px/20px/30px/40px
分寫方式：
padding-top:
padding-right:
padding-bottom:
padding-left:
margin:外邊距
外邊距的簡寫和分寫方式和內邊距的完全相同
margin的問題：
margin的拖拽：子集的margin-top給了父級
解決：
給父級加一個邊框
給父級加overflow:hidden;
用父級的padding-bottom代替子集的margin-top
margin的合并：兩個相鄰元素如果都有margin的話只會執行最大的一個
解決：只給一個元素添加margin，margin的值為兩個元素margin值的和
margin負值：如果盒子不設定寬，margin負值可以使盒子變大
text-decoration:none/underline/overline/line-through;底線
text-indent:2em;首行縮排
opacity：透明度（值為0到1）；自己會繼承父級的opcity
cursor:pointer; 手型
overflow:hidden;溢出隱藏
overflow:scroll;一直顯示捲軸
overflow:auto;自動顯示捲軸
white-space:nowrap;不換行
overflow:hidden;溢出隱藏
text-overflow:ellipsis;省略符號
【css選取器】
1》群組選取器h1,h2,h3,h4
2》嵌套選取器p span a也叫包含選取器
3》篩選選取器div.span.img
4》直接自己選取器 ul>li
5》偽類選擇a:link{} 訪問之前
a:visited{} 訪問之後
a:hover{} 滑鼠移上去
a:active{} 滑鼠按下去
6》ID選取器 #box
7》類別選取器.box
8》標籤選取器 box
9》萬用字元選取器 *
【優先順序】：選擇範圍越小，優先順序越高
important>行內樣式>#id>類別選取器>標籤選取器>萬用字元*
自己有的樣式就不會繼承父級的樣式（比如a不繼承父級的字型顏色）；文本樣式可以繼承
【清除預設樣式】
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dt,dd,input,textarea{
padding:0;
margin:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:#666;
}
img{
vertical-align:top;
border:none;
}
input,textarea{
border:none;
outline:none;
background:none;
}
textarea{
resize:none;
}
body{
font-size:12px;
color:#666;
}
.w{
width:960px;
margin:0 auto;
}
.clearfix:after{
content:‘‘;
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}
【盒模型】
盒子模型：一個盒子模型佔據的實際大小
盒子模型的實際大小是 width/height+padding+border
盒子模型不包括margin
【浮動】
float:right;左浮動
float:right;右浮動
浮動的特性：
浮動都有方向
浮動使行內變成塊
浮動後，寬度窄到內容的寬度（沒有設定寬度的情況下）
浮動元素是半脫離文字資料流
父級寬度不夠，子集掉下來
浮動的要素：
一個元素浮動，它的同級盡量都浮動
浮動元素盡量都給寬高
有了浮動就要清除浮動
清除浮動的三種方法：
給浮動元素的父級加overfloat:hidden;
在浮動元素同級加一個div；並且設定css樣式clear：both；（也可以浮動元素向哪裡浮動，就清除那個方向）
給浮動元素的父級添加樣式content:‘‘;
display:block;
clear:both;
【定位】
position:relative/avsolute/fixed;相對定位、決定定位、固定定位
position:relative;
相對定位的特性：
參照物是自己
不脫離文檔流（和普通元素是一樣的）
不能讓行內變成塊
相對定位的用途：
給絕對位置做父級
提高層級
position:absolute;
絕對位置的特性：
參照物是有定位的父級，如果沒有，參照物是body
完全脫離文檔流
絕對位置使行內變成快
寬度靠內動撐大（在沒設定寬度的情況下）
讓一個盒模型垂直水平置中的方法
position:absolute;
top:50%;
left:50%;
margin-top:負的高度的一半；
margin-left:負的寬度的一半；
position:fixed;
固定定位的特性：
參照物是可視區
完全脫離文檔流
固定定位使行內變成塊
內容靠寬度撐大（在不設定寬度的情況下）
層級：z-index：自然數
子集的層級永遠高於父級（不管如何給父級和自己設定層級）
後面的元素的層級大於前面元素的層級
z-index只對定位元素起作用
【塊標籤與行內標籤】
塊標籤：h1-h6 div p ol ul li dl dt dd
特性：
寬度預設是父級的寬度
塊標籤可以設定寬高
塊標籤獨佔一行
不受空格影響
可以設定四個方向的margin和padding
用來布局和分塊
行內標籤：span a i em b strong
特性：
寬度靠內容撐大
行內標籤不能設定寬高
行內標籤共處一行
受空格影響
只能設定水平方向的margin和padding
用來小修飾和裝飾細節
塊標籤和行內標籤的嵌套規則為：
塊標籤可以嵌套任意，但是p標籤不能嵌套塊標籤
行內標籤只能嵌套行內標籤，但是a可以嵌套任意標籤，不過a不能嵌套a標籤
【置中方式的總結】
有寬度的盒子和圖片水平置中：margin:0 auto;
文字和插入圖片水平置中：text-align:center;
表格和插入圖片水平位置調整：vertical-align:top/middle/bottom
【相容性問題】
a包img:有邊框
img{border:none;}
雙倍邊距：
給浮動元素加display:inline;
清浮動:
給父級加zoom:1;zoom:1;可以觸發父級的haslayout,然後讓盒子正常顯示
透明度:opcity:0.2;
filter:alpha(opcity:10); 或者 filter:alpha(opcity=20);
png透明圖片：
用js解決
單像素：
用雙數
margin負值：
給元素加position:relative;
最小高度：
元素加overflow:hidden;
【一些基本的小東西】
em單位：
首行縮排兩個字元 text-indent:2em;
搜尋最佳化： text-indent:-999em; 用於網站logo和標題
div的寬度可以容納三個字： width：3em；
>>
<<
空格
rgb三原色：紅綠藍
檔案路徑
絕對路徑：從盤符開始找
相對路徑：相對於當前編輯的檔案的路徑
html和css知識總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
