擊關(guān)閉窗口
<a href="javascript.:top.window.close();">點擊關(guān)閉窗口</a>！
請問如何去掉主頁右面的滾動條？
<body scroll="no">
<body style="overflow-y:hidden">
如何做到讓一個網(wǎng)頁自動關(guān)閉.
<html>
<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
這個窗口會在10秒過后自動關(guān)閉,而且不會出現(xiàn)提示. </body>
如何在不刷新頁面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標(biāo)簽里button選擇符使按鈕改為 紅色</button>
請問如何讓網(wǎng)頁自動刷新？
在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。
如何讓頁面自動刷新？
方法一，用refresh
HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新時間
[Ctrl+A 全部選擇 提示:你可先修改部分代碼，再按運行]
方法二，使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>
如何讓超鏈接沒有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style. type="text/css"> <!--
a { text-decoration: none}
--> </style>
請問如何去掉IE的上下滾動條？
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>
怎樣才能把RealPlayer文件在網(wǎng)頁做一個試聽連接？
<embed height=25 src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>
如何用html實現(xiàn)瀏覽器上后退按鈕的功能？
<a href="java script.:history.go(-1)">點擊后退</a>
或者
<script> history.back() </SCRIPT>
OM to Image
dom-to-image是一個js庫，可以將任意dom節(jié)點轉(zhuǎn)換為矢量(SVG)或光柵(PNG或JPEG)圖像。
安裝
npm install dom-to-image -S
加載
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
用法
所有高階函數(shù)都接受DOM節(jié)點和渲染選項options ，并返回promises。
- 獲取PNG圖像base64編碼的data URL：
<div id="my-node"></div>
var node = document.getElementById('my-node');
// options 可不傳
var options = {}
domtoimage.toPng(node, options)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
- 獲取圖像blob：
domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
console.log('blob', blob)
});
- 獲取JPEG圖像base64編碼的data URL并下載：
domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
});
- 獲取SVGdata URL，但篩選出所有元素：
function filter (node) {
return (node.tagName !== 'i');
}
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
.then(function (dataUrl) {
/* do something */
});
- 以uint8數(shù)組的形式獲取原始像素數(shù)據(jù)，每4個數(shù)組元素表示一個像素的RGBA數(shù)據(jù)：
var node = document.getElementById('my-node');
domtoimage.toPixelData(node)
.then(function (pixels) {
for (var y = 0; y < node.scrollHeight; ++y) {
for (var x = 0; x < node.scrollWidth; ++x) {
pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
/* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
}
}
});
options參數(shù)
Name | 類型 | Default | Description |
filter | Function | —— | 以DOM節(jié)點為參數(shù)的函數(shù)。如果傳遞的節(jié)點應(yīng)包含在輸出中，則應(yīng)返回true(排除節(jié)點意味著也排除其子節(jié)點) |
bgcolor | String | —— | 背景色的字符串值，任何有效的CSS顏色值。 |
height | Number | —— | 渲染前應(yīng)用于節(jié)點的高度（以像素為單位）。 |
width | Number | —— | 渲染前應(yīng)用于節(jié)點的寬度（以像素為單位）。 |
style | Object | —— | object對象，其屬性在渲染之前要復(fù)制到節(jié)點的樣式中。 |
quality | Number | 1.0 | 介于0和1之間的數(shù)字，表示JPEG圖像的圖像質(zhì)量(例如0.92=>92%)。默認值為1.0（100%） |
cacheBust | Boolean | false | 設(shè)置為true可將當(dāng)前時間作為查詢字符串附加到URL請求以啟用清除緩存。 |
imagePlaceholder | Boolean | undefined | 獲取圖片失敗時使用圖片的數(shù)據(jù)URL作為占位符。默認為未定義，并將在失敗的圖像上引發(fā)錯誤。 |
原理
dom-to-image使用SVG的一個特性，它允許在標(biāo)記中包含任意HTML內(nèi)容。
- 遞歸地克隆原始DOM節(jié)點
- 計算節(jié)點和每個子節(jié)點的樣式，并將其復(fù)制到相應(yīng)的克隆 創(chuàng)建偽元素，因為它們不是以任何方式克隆的
- 嵌入web字體 查找所有@font face聲明的web字體 解析文件URL，下載相應(yīng)文件 base64編碼的內(nèi)聯(lián)作為data：URLs 將所有已處理的CSS放入中，然后將其附加到克隆
- 嵌入圖片 在嵌入圖片URL 使用backgroundCSS屬性的圖片，方法類似于字體
- 將克隆的節(jié)點序列化為XML
- 將XML包裝到標(biāo)記中，然后包裝到SVG中，然后使其成為data URL
- 或者，要以Uint8Array的形式獲取PNG內(nèi)容或原始像素數(shù)據(jù)，可以創(chuàng)建一個以SVG為源的圖像元素，并將其呈現(xiàn)在已經(jīng)創(chuàng)建的canvas上，從canvas讀取內(nèi)容
部分源碼分析
dom-to-image.js
// Default impl options
var defaultOptions = {
// Default is to fail on error, no placeholder
imagePlaceholder: undefined,
// Default cache bust is false, it will use the cache
cacheBust: false
};
var domtoimage = {
toSvg: toSvg,
toPng: toPng,
toJpeg: toJpeg,
toBlob: toBlob,
toPixelData: toPixelData,
impl: {
fontFaces: fontFaces,
images: images,
util: util,
inliner: inliner,
options: {}
}
};
if (typeof module !== 'undefined')
module.exports = domtoimage;
else
global.domtoimage = domtoimage;
- defaultOptions設(shè)置默認options選項
- domtoimage的核心api:
- toSvg
- toPng
- toJpeg
- toBlob
- toPixelData
- 例：toJpeg：將draw函數(shù)返回的canvas實例，使用canvas的toDataURL方法生成jpeg圖片。toSvg函數(shù)將遞歸地克隆原始DOM節(jié)點, 將克隆的節(jié)點序列化為XML,將XML包裝到標(biāo)記中，然后包裝到SVG中，然后使其轉(zhuǎn)成dataURL。
function toJpeg(node, options) {
options = options || {};
return draw(node, options)
.then(function (canvas) {
return canvas.toDataURL('image/jpeg', options.quality || 1.0);
});
}
復(fù)制代碼
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
canvas.getContext('2d').drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
if (options.bgcolor) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
function toSvg(node, options) {
options = options || {};
copyOptions(options);
return Promise.resolve(node)
.then(function (node) {
return cloneNode(node, options.filter, true);
})
.then(embedFonts)
.then(inlineImages)
.then(applyOptions)
.then(function (clone) {
return makeSvgDataUri(clone,
options.width || util.width(node),
options.height || util.height(node)
);
});
function applyOptions(clone) {
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
if (options.width) clone.style.width = options.width + 'px';
if (options.height) clone.style.height = options.height + 'px';
if (options.style)
Object.keys(options.style).forEach(function (property) {
clone.style[property] = options.style[property];
});
return clone;
}
}
作者：知其
https://juejin.cn/post/6988045156473634852
二部分 CSS
第八章 css基礎(chǔ)知識
- css基礎(chǔ)知識：
- css樣式表的定義
- css：（Cascading Style Sheets）層疊樣式表；
- 分類及位置：內(nèi)部樣式-head區(qū)域style標(biāo)簽里面
- 外部樣式-link調(diào)用
- 內(nèi)聯(lián)樣式-標(biāo)簽元素里面
- css內(nèi)的注釋：/*注釋內(nèi)容*/
- css樣式表的語法
- CSS規(guī)則由兩個主要的部分構(gòu)成：要添加樣式的盒子名或者標(biāo)簽名、和要添加的樣式。
- 盒子名或者標(biāo)簽名{屬性:值;}
- CSS中幾種顏色的表示方法
- 用顏色名表示
- 有17個預(yù)先確定的顏色，它們是
- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
- olive, orange, purple, red, silver, teal, white, and yellow
- 用十六進制的顏色值表示(紅、綠、藍)
- #FF0000或者#F00
- 用rgb(r,g,b)函數(shù)表示
- 如：rgb(255,255,0)
- 用hsl(Hue,Saturation,Lightness)函數(shù)表示（色調(diào)、飽和度、亮度)
- 如：hsl(120,100%,100%),色調(diào)0代表紅色，120代表綠色，240代表
- 藍色
- 用rgba(r,g,b,a)函數(shù)表示
- 其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
- 用hsla(Hue,Saturation,Lightness,alpha)函數(shù)表示
- 色調(diào)、飽和度、亮度、透明度
- 例子
<div style="position:absolute;top:0px">
<div style="background-color:gray;">background-color:gray</div>
<div style="background-color:#F00;">background-color:#F00</div>
<div style="background-color:#ffff00;">background-color:#ffff00</div>
<div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div>
<div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div>
<div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div>
<div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div>
</div>
- 內(nèi)部樣式表
- 當(dāng)單個頁面需要設(shè)置樣式時，就應(yīng)該使用內(nèi)部樣式表。
- 使用 <style></style>標(biāo)簽在文檔<head></head>里面定義內(nèi)部樣式表
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>
- 從外部引入到樣式分為兩種：（注意寫在head標(biāo)簽里面）
- 當(dāng)樣式需要應(yīng)用于很多頁面時，就需要用到外部樣式表，首先需要創(chuàng)建一個css文件，然后引用到我們的頁面中。
- Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
- Html式： <style type="text/css">@import url("css.css");></style>
- 內(nèi)聯(lián)樣式表（優(yōu)先級高）
- 寫在標(biāo)簽里面的樣式
- 如：<p style="color:red;"></p>
- 表示給p標(biāo)簽里面的文字顏色設(shè)置為紅色
- 區(qū)別：外鏈樣式與導(dǎo)入樣式
- link標(biāo)簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
- 加載的順序的區(qū)別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
- 兼容性的區(qū)別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效。
- 在樣式控制上(比如動態(tài)改變網(wǎng)頁的布局時,使用javascript操作DOM)的區(qū)別，此時@import就無能為力了。
- 樣式的優(yōu)先級補充
- 相同權(quán)值情況下，CSS樣式的優(yōu)先級總結(jié)來說，就是——就近原則（離被設(shè)置元素越近優(yōu)先級別越高）：
- 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部） > 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）
- 權(quán)值不同時，瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，哪種樣式權(quán)值高就使用哪種樣式
- 層疊優(yōu)先級是:
- 瀏覽器缺省< 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式
- 其中樣式表又有:類選擇器 < 類派生選擇器<ID選擇器 < ID派生選擇器
- 派生選擇器以前叫上下文選擇器，所以完整的層疊優(yōu)先級是:
- 瀏覽器缺省 <外部樣式表 < 外部樣式表類選擇器 < 外部樣式表類派生選擇器< 外部樣式表ID選擇器< 外部樣式表ID派生選擇器< 內(nèi)部樣式表 < 內(nèi)部樣式表類選擇器 < 內(nèi)部樣式表類派生選擇器 < 內(nèi)部樣式表ID選擇器 < 內(nèi)部樣式表ID派生選擇器 < 內(nèi)聯(lián)樣式…共12個優(yōu)先級
- 另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優(yōu)先級順序為：
- 一個元素同時應(yīng)用多個class，后定義的優(yōu)先（即近者優(yōu)先），加上!important者最優(yōu)先！
第九章 css選擇器(上)
- css選擇器：
- class類選擇器可以重復(fù)利用
- id選擇器唯一
- 標(biāo)簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對象
- 選擇器{屬性:值;屬性:值;}
- 標(biāo)簽選擇器：頁面中所有的標(biāo)簽都是一個選擇器 p{color:red;}
- ID選擇器
- 選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}
- 類選擇器
- class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}
- css代碼寫完后上線前要經(jīng)過壓縮處理
- 本地和服務(wù)器分兩個css版本（備份）
- 壓縮后注釋都清除，空間體積減少
- 群組選擇器
- 選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}
- 包含選擇器
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
- span{color:red;}
- 屬性選擇器
- 選擇包含某一屬性的元素
- a[title]{color:red;} 選擇包含title的a標(biāo)簽
- a[title][href]{color:red;} 選擇包含title和href的a標(biāo)簽
- > + 選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當(dāng)于包含元素）
- p > span{color:red;}
- 相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
- p + span{color:red;}
第十章 css選擇器(下)
- <a>偽類選擇器
- a:link {color:#FF0000;} / 未訪問的鏈接 / （只用于a標(biāo)簽）
- a:visited {color:#00FF00;} / 已訪問的鏈接 / （只用于a標(biāo)簽）
- a:hover {color:#FF00FF;}/* 鼠標(biāo)移動到鏈接上
- */（可和其他標(biāo)簽結(jié)合一起用）
- a:active {color:#0000FF;} / 選定的鏈接 /
- 注意
- 偽類選擇器的排序很重要，a:link a:visited a:hover a:active，記作lvha
- 輸入偽類選擇器（針對表單）
- input:focus{color:red;} / 鍵盤輸入焦點 /
- 其他偽類選擇器
- p:first-child{color:red;} /* 第一個p */
- :before 在元素之前添加內(nèi)容。
- :after 在元素之后添加內(nèi)容。
- css優(yōu)先規(guī)則
- 內(nèi)聯(lián)樣式表-> ID 選擇器—> Class 類選擇器->標(biāo)簽選擇器
第十一章 背景屬性
- 背景屬性：
- 背景的添加 ：
- 背景顏色的添加:
- background:red;
- backgronnd-color:red;
- 背景圖片的添加：
- background:url(“images/1.jpg”);
- backgronnd-image:url(“images/1.jpg”);
- 背景的平鋪
- 什么是平鋪？平鋪就是圖片是否重復(fù)出現(xiàn)
- 不平鋪：background-repeat:no-repeat;
- 水平方向平鋪：background-repeat:repeat-x;
- 垂直方向平鋪：background-repeat:repeat-y;
- 完全平鋪：默認為完全平鋪
- 背景圖片的定位
- 背景圖片的定位就是可以設(shè)置顯示背景圖片的位置，通過屬性background-position來實現(xiàn)
- background-position的取值可為英文單詞或者數(shù)值和百分值。
- background-positon的英文單詞取值
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- ottom right
- background-positon的數(shù)值取值
- background-position:x y;
- positon的百分值取值
- background-position:x% y%;
- 背景圖片的大小
- 背景圖片的大小可以通過屬性background-size來設(shè)置background-size的取值可為數(shù)值和百分值。
- background-size的數(shù)值取值
- background-size:x y;
- background-size的數(shù)值取值
- background-size:x% y%;
- 背景圖片的滾動
- 背景圖片是否隨著內(nèi)容的滾動而滾動由background-attachment設(shè)置
- background-attachment:fixed; 固定，不隨內(nèi)容的滾動而滾動
- background-attachment:scroll; 滾動，隨內(nèi)容的滾動而滾動
第十二章 文字文本屬性
- css文字文本屬性：
- 文字屬性
- color:red; 文字顏色
- font-size:12px; 文字大小
- font-weight:“bold” 文字粗細(bold/normal)
- font-family:“宋體” 文字字體
- font-variant:small-caps小寫字母以大寫字母顯示
- 文本屬性
- text-align:center; 文本對齊(right/left/center)
- line-height:10px; 行間距(可通過它實現(xiàn)文本的垂直居中)
- text-indent:20px; 首行縮進
- text-decoration:none;
- 文本線(none/underline/overline/line-through)
- letter-spacing: 字間距
第十三章 盒子模型
- 盒子模型
- 盒子模型就是一個有高度和寬度的矩形區(qū)域
- 所有html標(biāo)簽都是盒子模型
- div標(biāo)簽自定義盒子模型
- 所有的標(biāo)簽都是盒子模型
- class和id的主要差別是：class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識單獨的唯一的元素。
- 盒子模型的組成
- 盒子模型組成部分：
- 自身內(nèi)容：width、height 寬高
- 內(nèi)邊距： padding
- 盒子邊框： border 邊框線
- 與其他盒子距離： margin外邊距
- 內(nèi)容+內(nèi)邊距+邊框+外邊距=面積
- border 邊框
- 常見寫法 border:1px solid #f00;
- 單獨屬性：
- border-width:
- border-style:
- dotted 點狀虛線
- dashed（虛線）
- solid（實線）
- double（雙實線）
- border-color (顏色)
- padding 內(nèi)邊距
- 值：像素/厘米等長度單位、百分比
- padding:10px; 上下左右
- padding:10px 10px; 上下 左右
- padding:10px 10px 10px; 上 左右 下
- padding:10px 10px 10px 10px; 上 右 下 左（設(shè)置4個點–>順時針方向）
- 單獨屬性：
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
- 當(dāng)設(shè)置內(nèi)邊距的時候會把盒子撐大，為了保持盒子原來的大小，應(yīng)該高度和寬度進行減小，根據(jù)width和height減小
- margin 外邊距
- 值：與padding相同
- 單獨屬性：與padding相同
- 外邊距合并：兩個盒子同時設(shè)置了外邊距，會進行一個外邊距合并
補充盒子模型內(nèi)容
- 標(biāo)準盒子模型
- 盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie盒子模型和標(biāo)準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟知的標(biāo)準盒子模型
- 從上圖可以看到標(biāo)準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content部分不包含其他部分
- IE盒子模型
- 從上圖可以看到 ie盒子模型的范圍也包括 margin、border、padding、content
- 和標(biāo)準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border和 padding
- IE盒子模型width = padding+border+內(nèi)容
- 標(biāo)準盒子模型 = 內(nèi)容的寬度（不包含border+padding）
- 例：
- 一個盒子的 margin為 20px，border 為 1px，padding為 10px，content 的寬為 200px、高為 50px，假如用標(biāo)準 w3c 盒子模型解釋，那么這個盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px
- 那應(yīng)該選擇哪中盒子模型呢？當(dāng)然是“標(biāo)準 w3c 盒子模型”了。怎么樣才算是選擇了“標(biāo)準 w3c盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上 doctype 聲明。
- 假如不加doctype 聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 ie瀏覽器會采用 ie 盒子模型去解釋你的盒子，而 ff會采用標(biāo)準w3c 盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。
- 反之，假如加上了 doctype 聲明，那么所有瀏覽器都會采用標(biāo)準 w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。
<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
- 上面的代碼沒有加上 doctype 聲明，在 ie 瀏覽器中顯示 ie盒子模型，在 ff 瀏覽器中顯示“標(biāo)準w3c盒子模型”。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標(biāo)準w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sbox = $.boxmodel ? "標(biāo)準w3c":"ie";
document.write("您的頁面目前支持："+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
- 代碼2 與代碼1 唯一的不同的就是頂部加了 doctype聲明。在所有瀏覽器中都顯示“標(biāo)準 w3c盒子模型”
- 所以為了讓網(wǎng)頁能兼容各個瀏覽器，讓我們用標(biāo)準 w3c 盒子模型
- 擴展
- 學(xué)會使用box-sizing布局
第十四章 塊元素、行元素與溢出
- 基本概念
- 塊級元素：默認情況下獨占一行的元素，可控制寬高、上下邊距；
- 行內(nèi)元素：默認情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
- 行塊轉(zhuǎn)換
- display:none; 不顯示
- display:block; 變成塊級元素
- display:inline; 變成行級元素
- display:inline-block; 以塊級元素樣式展示，以行級元素樣式排列
- 溢出
- overflow:hidden; 溢出隱藏
- overflow:scroll; 內(nèi)容會被修剪，瀏覽器會顯示滾動條
- overflow:auto; 如果內(nèi)容被修剪，則產(chǎn)生滾動條
- 文本不換行：white-space:nowrap;
- 長單詞換行：word-wrap:break-word;
- 行內(nèi)元素和快級元素小結(jié)
- 一、塊級元素：block element
- 每個塊級元素默認占一行高度，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float浮動后除外）。兩個塊級元素連續(xù)編輯時，會在頁面自動換行顯示。塊級元素一般可嵌套塊級元素或行內(nèi)元素；
- 塊級元素一般作為容器出現(xiàn)，用來組織結(jié)構(gòu)，但并不全是如此。有些塊級元素，如只能包含塊級元素。
- DIV 是最常用的塊級元素，元素樣式的display:block都是塊級元素。它們總是以一個塊的形式表現(xiàn)出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。
- 二、行內(nèi)元素：inline element
- 也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語義級(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
- 三、block（塊）元素的特點:
- ①、總是在新行上開始；
- ②、高度，行高以及外邊距和內(nèi)邊距都可控制；
- ③、寬度缺省是它的容器的100%，除非設(shè)定一個寬度。
- ④、它可以容納內(nèi)聯(lián)元素和其他塊元素
- 四、inline元素的特點
- ①、和其他元素都在一行上；
- ②、高，行高及外邊距和內(nèi)邊距不可改變；
- ③、寬度就是它的文字或圖片的寬度，不可改變
- ④、內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
- 對行內(nèi)元素，需要注意如下:
- 設(shè)置寬度width 無效。 設(shè)置高度height無效，可以通過line-height來設(shè)置。 設(shè)置margin
- 只有左右margin有效，上下無效。
- 設(shè)置padding只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。
- 五、常見的塊狀元素
- address – 地址
- blockquote – 塊引用
- center – 舉中對齊塊
- dir – 目錄列表
- div – 常用塊級容易，也是CSS layout的主要標(biāo)簽
- dl – 定義列表
- fieldset – form控制組
- form – 交互表單
- h1 – 大標(biāo)題
- h2 – 副標(biāo)題
- h3 – 3級標(biāo)題
- h4 – 4級標(biāo)題
- h5 – 5級標(biāo)題
- h6 – 6級標(biāo)題
- hr – 水平分隔線
- isindex – input prompt
- menu – 菜單列表
- noframes – frames可選內(nèi)容，（對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
- noscript – 可選腳本內(nèi)容（對于不支持script的瀏覽器顯示此內(nèi)容）
- ol – 有序表單
- p – 段落
- pre – 格式化文本
- table – 表格
- ul – 無序列表
- 六、常見的內(nèi)聯(lián)元素
- a – 錨點
- abbr – 縮寫
- acronym – 首字
- b – 粗體(不推薦)
- bdo – bidi override
- big – 大字體
- br – 換行
- cite – 引用
- code – 計算機代碼(在引用源碼的時候需要)
- dfn – 定義字段
- em – 強調(diào)
- font – 字體設(shè)定(不推薦)
- i – 斜體
- img – 圖片
- input – 輸入框
- kbd – 定義鍵盤文本
- label – 表格標(biāo)簽
- q – 短引用
- s – 中劃線(不推薦)
- samp – 定義范例計算機代碼
- select – 項目選擇
- small – 小字體文本
- span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike – 中劃線
- strong – 粗體強調(diào)
- sub – 下標(biāo)
- sup – 上標(biāo)
- textarea – 多行文本輸入框
- tt – 電傳文本
- u – 下劃線
- 七，可變元素
- 可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
- applet - java applet
- button - 按鈕
- del- 刪除文本
- iframe - inline frame
- ins - 插入的文本
- map - 圖片區(qū)塊(map)
- object - object對象
- script - 客戶端腳本
- 八、行內(nèi)元素與塊級元素有什么不同
- 區(qū)別一：
- 塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
- 行內(nèi)：行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排在同一行。其寬度隨內(nèi)容的變化而變化。
- 區(qū)別二：
- 塊級：塊級元素可以設(shè)置寬高
- 行內(nèi)：行內(nèi)元素不可以設(shè)置寬高
- 區(qū)別三：
- 塊級：塊級元素可以設(shè)置margin，padding
- 行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right;
- padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
- 區(qū)別四：
- 塊級：display:block;
- 行內(nèi)：display:inline;
- 替換元素有如下：（和img一樣的設(shè)置方法）
- <img>、<input>、<textarea>、<select>
- <object>都是替換元素，這些元素都沒有實際的內(nèi)容
- 可以通過修改display屬性來切換塊級元素和行內(nèi)元素
第十五章 定位
- static靜態(tài)定位（不對它的位置進行改變，在哪里就在那里）
- 默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者 z-index 聲明）。
- fixed固定定位（參照物–瀏覽器窗口）—做 彈窗廣告用到
- 生成固定定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規(guī)定。
- relative（相對定位 ）（參照物以他本身）
- 生成相對定位的元素，相對于其正常位置進行定位。
- absolute（絕對定位）(除了static都可以，找到參照物–>與它最近的已經(jīng)有定位的父元素進行定位)
- 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
- 元素的位置通過 “l(fā)eft", "top", "right" 以及 "bottom" 屬性進行規(guī)定
- z-index
- z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
- 定位的基本思想: 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
- 一切皆為框
- 塊級元素: div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ;
- 行內(nèi)元素: span,strong,a等元素 即：內(nèi)容顯示在行中稱 “行內(nèi)框”;
- 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級元素，display:none; 沒有框
- 相對定位：
- 如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。
- 通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動
- .adv_relative { position: relative; left: 30px; top: 20px; }
- 絕對定位：
- 元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位 的祖先元素，它的位置相對于最初的包含塊。 .adv_absolute { position: absolute; left: 30px; top: 20px; }
第十六章 框架
- frameset框架：
- <frameset> —- 用來定義一個框架；雙標(biāo)簽
- 不能和 <body> 一起使用
- rows、cols屬性
- rows 定義行表示框架有多少行（取值 px/%/ * ）
- cols 定義列表示框架有多少列（取值px/ %/ * ）
- frame子框架
- <frame> —- 表示框架中的某一個部分；單標(biāo)簽，要跟結(jié)束標(biāo)志
- src 顯示的網(wǎng)頁的路徑
- name 框架名
- frameborder 邊框線（取值 0 / 1）
- <noframes>屬性
- <noframes> 提供不支持框架的瀏覽器顯示body的內(nèi)容；雙標(biāo)簽
<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>內(nèi)容</body>
</noframes>
</frameset>
- <iframe>內(nèi)聯(lián)框架
- iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
- 允許和 body 一起使用
- width 寬（取值 px / %）
- height 高（取值 px / %）
- name 框架名
- frameborder 邊框線（取值 0 / 1）
- src 顯示的網(wǎng)頁的路徑
第十七章 css高級屬性
- opacity透明屬性
- opacity
- 對于IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
- 對于Webkit，Opera，F(xiàn)irefox，IE9+，使用opacity:值; 值為0-1
- 對于早期火狐，使用-moz-opacity:值; 值為0-1
- 所以寫透明屬性時，一般寫法是
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->針對早起版本的火狐兼容問題的解決
}
- border-radius圓角邊框?qū)傩?/li>
- 向 div 元素添加圓角邊框
- border-radius:10px;
- box-shadow陰影屬性
- box-shadow屬性向框添加陰影效果,后面跟4個參數(shù)。
- box-shadow:0px 0px 10px #000;
- <embed>屬性
- 是HTML5中新增的標(biāo)簽,媒體嵌入插件標(biāo)簽，可以通過<embed>插入音頻或視頻
- <embed src=“media/music.mp3” />
- 格式.mid .wav .mp3等
