動距離
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。
根節(jié)點(diǎn)
有兩種特殊的文檔屬性可用來訪問根節(jié)點(diǎn):
document.documentElement chome object HTMLHtmlElement
document.body IE、FF object HTMLBodyElement
第一個屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。
第二個屬性是對HTML頁面的特殊擴(kuò)展,提供了對<body>標(biāo)簽的直接訪問(body標(biāo)記)。
窗口尺寸、工作區(qū)尺寸
可視區(qū)尺寸寬度
document.body.clientWidth IE、FF
document.documentElement.clientWidth chome
兼容性寫法:
document.documentElement.clientWidth || document.body.clientWidth;
可視區(qū)尺寸高度
document.body.clientHeight IE、FF
document.documentElement.clientHeight chome
兼容性寫法:
document.documentElement.clientHeight || document.body.clientHeight;
獲取瀏覽器窗口水平滾動條的位置
document.body.scrollLeft;
document.documentElement.scrollLeft
兼容性寫法:
document.documentElement.scrollLeft || document.body.scrollLeft;
獲取瀏覽器窗口垂直滾動條的位置
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
document.documentElement.scrollTop || document.body.scrollTop;
注意:IE、FF已經(jīng)支持documentElement對象的各種屬性, 而
以上兼容性寫法不影響所獲的屬性值
編寫自定義函數(shù):
// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}
// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}
// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響
頁中添加滾動字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動字體的設(shè)置</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象
var ctx = canvas1.getContext("2d") // 2.上下文對象(畫筆)
ctx.shadowBlur = 10; // 陰影距離
ctx.shadowColor = "red" // 陰影顏色
ctx.shadowOffsetX = 30 // 陰影偏移
ctx.shadowOffsetY = 30 // 陰影偏移
ctx.font = "150px 楷體"
ctx.fillText("你好!", 20,150)
ctx.fillText("你好!", 20,350)
ctx.strokeText('你好!',23, 153)
ctx.strokeText('你好',23, 553)
canvas繪制文字
var x = 600
setInterval(function(){
if(x > -350){
//清空畫布
ctx.clearRect(0,0,600,600)
ctx.strokeText('你好!',x, 153)
ctx.fillText("你好!", x,350)
ctx.font = "50px 宋體"
ctx.strokeText('每天學(xué)習(xí)一點(diǎn)點(diǎn)',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
SS中的浮動(Floats)、定位(Positioning)和顯示(Display)屬性是前端工程師掌握頁面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場景,幫助開發(fā)者更好地理解和運(yùn)用它們來構(gòu)建響應(yīng)式和精確的網(wǎng)頁布局。
浮動是CSS中用于實(shí)現(xiàn)元素排列的一種方式,它可以讓元素脫離正常的文檔流,并可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位屬性允許你控制元素的位置,它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display屬性是CSS中最重要的用于控制布局的屬性之一,它定義了元素如何顯示在頁面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在這個例子中,我們創(chuàng)建了一個包含頭部、側(cè)邊欄、主要內(nèi)容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導(dǎo)航,以及創(chuàng)建一個側(cè)邊欄。我們還使用了相對定位來稍微下移頁腳,并使用固定定位為頁面添加了一個始終可見的固定元素。最后,我們使用了overflow: hidden;來清除頭部中浮動元素的影響。
浮動、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過深入理解和正確應(yīng)用這些屬性,前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展,我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性,以保持我們技能的前沿性。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。