html和css知識總結

時間 2019-12-17

標籤 html css 知識總結欄目 HTML 简体版

原文原文鏈接

今天把整個html和css的總結了一遍。可能還有疏忽之處，共同窗習吧javascript

【行爲樣式三者分離】css

不加行內css樣式，不加行內js效果html

【標籤】
1》單標籤
<!doctype html> 文檔頭，告訴瀏覽器這是一個網頁
br 換行
img 插入圖片，src屬性默認有圖片上方3像素，間距java

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屬性瀏覽器

【表單標籤】
input text文本輸入框 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）在ie火狐中顯示爲圓點
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;
固定定位的特性：
參照物是可視區
徹底脫離文檔流
固定定位使行內變成塊
內容靠寬度撐大（在不設置寬度的狀況下）