一般元素在頁(yè)面所占的空間包括：magin border padding content。以前一直以為子元素設(shè)置百分比寬高都是以父元素的content值為基準(zhǔn)計(jì)算的。但是當(dāng)子元素的position不同時(shí)，卻是不同的結(jié)果。

demo

用如下小demo測(cè)試：

.container{

position: relative;

margin: 100px auto;

padding: 20px;

height: 100px;

width: 100px;

border : 10px solid green;

background-color: red;

}

.test{

height: 20%;

width: 20%;

position: relative;

top:;

left:;

background-color: #000000;

}

效果如下：

子元素以父元素的content寬度100px為基準(zhǔn)計(jì)算的20%為20px 且是以content為參考進(jìn)行的偏移(雖然這里為0)

若子元素position為absolute時(shí)，效果如下：

此時(shí)子元素的百分比寬度是以 父元素的 padding + content的值進(jìn)行計(jì)算的 為28px; 而且也是以padding為基礎(chǔ)進(jìn)行偏移的。

結(jié)論

absolute元素的百分比寬高 計(jì)算時(shí)按照的包含塊的 padding + content的值算的，偏移的參考也要加上padding那部分

relative元素的百分比寬高 計(jì)算時(shí)按照的包含塊的 content的值算的.

JS獲取頁(yè)面,元素,窗口和返回頁(yè)面,元素,窗口的寬高以及滾動(dòng)值

jquery獲取頁(yè)面,元素,窗口的寬高以及滾動(dòng)值 //獲取瀏覽器顯示區(qū)域(可視區(qū)域)的高度 : $(window).height(); //獲取瀏覽器顯示區(qū)域(可視區(qū)域)的寬度 : $(window) ...

關(guān)于html中的設(shè)置body寬高的理解

有時(shí)候看到別人的代碼中經(jīng)常出現(xiàn)在body中設(shè)置的寬高,不是很理解,于是自己測(cè)試了下,瞬間懂了,廢話不多說(shuō),直接上代碼: 首先創(chuàng)建好一個(gè)基本的html文件,設(shè)body的背景色為red: 相信大家都知道效 ...

input與select 設(shè)置相同寬高，在瀏覽器上卻顯示不一致，不整齊

遇到 input與select 設(shè)置相同寬高,在瀏覽器上卻顯示不一致,遂實(shí)驗(yàn)了下(IE 10.013 ,Firefox 30.0),得出以下結(jié)論 input?? width,height 值里面, 不 ...

Python設(shè)置瀏覽器寬高

# 發(fā)起請(qǐng)求,設(shè)置瀏覽器寬高 # 代碼中引入selenium版本為:3.4.3 # 通過(guò)Chrom瀏覽器訪問(wèn)發(fā)起請(qǐng)求 # Chrom版本:59 ,chromdriver:2.3 # 需要對(duì)應(yīng)版本的Ch ...

CSS Transform讓百分比寬高布局元素水平垂直居中

很早以前了解過(guò)當(dāng)元素是固定寬度和高度的時(shí)候,水平垂直高居中的方法可以設(shè)置margin的負(fù)值來(lái)使其居中,這個(gè)負(fù)值是元素的寬和高的一半,比如寬高是100px,那么就用margin-left:-50px;m ...

IE6下絕對(duì)定位元素父級(jí)寬高是奇數(shù),絕對(duì)定位元素的right和bottom值會(huì)有1個(gè)像素的偏差

...

IE下元素設(shè)置百分比的問(wèn)題

場(chǎng)景:近兩天在做一個(gè)控件,該控件是一個(gè)tab型的,并且該tab有可能是兩個(gè)tab標(biāo)簽,也有可能是多個(gè)tab標(biāo)簽,為了能夠適應(yīng)這種動(dòng)態(tài)需求, 在設(shè)置標(biāo)簽寬度的時(shí)候,直接用的最外層容器除以tab的個(gè)數(shù),然 ...

關(guān)于百分比寬高div居中并垂直居中問(wèn)題

【轉(zhuǎn)載】Spark性能優(yōu)化指南——高級(jí)篇

前言 數(shù)據(jù)傾斜調(diào)優(yōu) 調(diào)優(yōu)概述 數(shù)據(jù)傾斜發(fā)生時(shí)的現(xiàn)象 數(shù)據(jù)傾斜發(fā)生的原理 如何定位導(dǎo)致數(shù)據(jù)傾斜的代碼 查看導(dǎo)致數(shù)據(jù)傾斜的key的數(shù)據(jù)分布情況 數(shù)據(jù)傾斜的解決方案 解決方案一:使用Hive ETL預(yù)處理數(shù) ...

bootstrap-select去除藍(lán)色邊框outline

/*去除選擇框的outline*/ .bootstrap-select .dropdown-toggle:focus{outline:none !important;} /*去除選項(xiàng)的outline* ...

Angular中使用Rainbow

在使用js類(lèi)庫(kù)和框架的時(shí)候,大家都習(xí)慣于編寫(xiě)自己的使用示例,如果能將示例中的html,js和css 進(jìn)行展示, 并進(jìn)行高亮顯示,效果會(huì)很棒,例如在html高亮顯示jquery代碼 上面的示例是使用ra ...

poj2407

歐拉函數(shù)裸題. 歐拉函數(shù):在數(shù)論,對(duì)正整數(shù)n,歐拉函數(shù)是少于或等于n的數(shù)中與n互質(zhì)的數(shù)的數(shù)目. 歐拉函數(shù)的定義: E(N)= ( ?區(qū)間[1,N-1] 中與 N 互質(zhì)的整數(shù)個(gè)數(shù)). 對(duì)于 積性函數(shù) F ...

QTP自傳之web常用對(duì)象

隨著科技的進(jìn)步,“下載-安裝-運(yùn)行”這經(jīng)典的三步曲已離我們遠(yuǎn)去.web應(yīng)用的高速發(fā)展,改變了我們的思維和生活習(xí)慣,同時(shí)也使web方面的自動(dòng)化測(cè)試越來(lái)越重要.今天,介紹一下我對(duì)web對(duì)象的識(shí)別,為以后的 ...

窗體的擴(kuò)展樣式GWL_EXSTYLE用于SetWindowLong

SetWindowLong(Handle, GWL_EXSTYLE, GetWindowLong(Handle, GWL_EXSTYLE) or WS_EX_TRANSPARENT or WS_EX_ ...

mysql命令參數(shù)詳解

一,MySQL命令行參數(shù) Usage: mysql [OPTIONS]?[database]?//命令方式?-?, --help //顯示幫助信息并退出?-I, --help //顯示幫助信息并退出? ...

總結(jié)

以上是生活随笔為你收集整理的Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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