首页专题 html页面宽高

html页面宽高

很多同学在进行编程学习时缺乏系统学习的资料。本页面基于html页面宽高内容，从基础理论到综合实战，通过实用的知识类文章，标准的编程教程，丰富的视频课程，为您在html页面宽高相关知识领域提供全面立体的资料补充。同时还包含 h6、hack、hadoop 的知识内容，欢迎查阅！

html页面宽高相关知识

CSS宽高等比布局
宽度是高度的两倍(等比缩放)实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度);为什么不直接`width: 50%; height: 50%;?那样高度就成了父级高度的50% (不合题意,除非父级宽高相等);原题目:红色块级元素垂直居中于屏幕中央；红色块级元素距离屏幕左右边距各20px;红色块级元素里面的内容水平垂直居中；红色块级元素的高度始终是红色块级元素宽度的50%。红色部分宽高之比2:1源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>宽高比例固定</title> <style> .father{
HTML-页面布局
一、盒子模型：整体的宽=margin-left（right）+padding-left（right）+border+content整体的高=margin-top（bottom）+padding-top（bottom）+border+content二、页面布局：（1）标准流：按照原先格式排版块儿元素等一些格式，所有块儿都是按照竖排排列，自占一排。（2）浮动流：给div标签加上float属性，是指按照属性来排列。若想让所给的块儿元素按照横行排列，需要给每个div元素均添加float：left（right）属性。（3）每个对象都可以调用多种样式，样式之间用空格键来进行分开即可。（4）要是块级元素居中，使用margin：0 auto；       要是行内元素居中，给父元素使用text-align：center；（5）建立页面前可以建立一个通用页面，清除margin，padding等值。其中list-style：none；属性可以使列表中的圆圈，
js获取浏览器宽高
（注：获取自适应div等标签的宽高时，可以用 document.getElementId("#id").offsetWidth/offsetHeight;） document.body.clientWidth --> BODY对象宽度（不包括:margin,border） document.body.clientHeight --> BODY对象高度（不包括:margin,border） document.documentElement.clientWidth --> 可见区域宽度（全包括:margin,padding,border） document.documentElement.clientHeight --> 可见区域高度（全包括:margin,padding,border）网页可见区域宽： document.body.clientWidth 
DOM元素Window关于宽高、screen、scroll相关属性
一、前言了解或者熟悉 window 对象的关于宽高、screen、scroll相关属性，我们在进行自定义控件或者进行绘制的实现时候，是比较重要的参考参数。有些参数名字相近或者相似，比较难区分。因此，非常有必要来梳理一下。二、DOM 之 Window 宽高，scroll，screen 相关的属性如下。 2.1 宽高宽高的属性 innerWidth、innerHeight: 窗口的宽高，可以理解为实际的画布宽高，包括可滚动的宽高以及滚动条所占的宽高。 outerWidth、outerHeight: 通常指页面所在浏览器的宽高。下图说明了