当前位置: 首页> 文章列表> html5盒子模型标准文档流知识点介绍

html5盒子模型标准文档流知识点介绍

最新
2021-01-13 22:37:53 120
K
擅长邻域:

技术小结:

今天给大家介绍下html5盒子模型标准文档流等知识点
给个目录:盒子模型、页面布局与规划
一、盒子模型原理
二、标准文档流
三、盒子浮动
四、盒子塌陷
五、盒子定位
1.盒子模型原理
盒子模型概述
每个盒子都包含:边界(margin),边框(border),填充(padding)和内容(content)
边界:元素边框之外所占据得尺寸
边框:border
填充:内容与边距得距离
内容:标签中得文本或嵌入标签,用width,height设置尺寸
盒子得大小
盒子得大小=内容+填充+边框
盒子得占据空间=内容+填充+边框+边距
2.标准文档流
概述
2.1、行内元素:
<h1></h1>~<h6></h6>
<p></p>
<hr />
<ul></ul>
<ol></ol>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
<table></table>
<div></div>
<form></form>
...
2.2、块状元素:
<img />
<span></span>
<br />
<a></a>
...
区别:
排列方式不同:行内元素从左到右依次排列,块状元素从上到下 >
内嵌元素不同:块状元素可包含行内元素,行内元素只能包含文本或其他行内元素 >
属性设置不同:行内元素设置height和width无效,但可设置line—height,magin和padding设置上下方向无效
2.3、display属性:页面元素隐藏方式,隐藏以后浏览器消除元素,不占屏幕空间
2.3.1、隐藏HTML元素
<style type="text/css">
便签名|类名{
display: none; 隐藏
display:block; 块状显示
display:inline; 行状显示
}
</style>
2.3.2、隐藏div
<div  style="display: none;"></div>
<div style="display: display:block ;"></div>
<div style="display: inline;"></div>
2.4、visibility属性:页面元素隐藏显示方式,虽然被隐藏,但是元素还占有那块空间
2.4.1、显示HTML元素
<style type="text/css">
便签名|类名{
visibility: hidden; 隐藏
visibility: visible; 显示
}
</style>
2.4.2、显示div
<div  style="visibility: hidden; "></div>
<div style="visibility: visible;"></div>
3.盒子浮动
3.1 float:浮动定位方向
<style type="text/css">
#id{
float: none;默认
float: left;左浮动
float: right;右浮动
}
</style>
浮动元素得特征:
脱离标准文档流,不占据页面空间
浮动元素显示在父元素得左侧或右侧
若存在浮动元素,则显示在浮动元素之后
浮动元素大小默认由内容决定,但可用width,height设置
4.盒子塌陷
4.1、塌陷原因:
一个盒子使用了float属性,导致父容器被撑开
若一个元素得高度为自适应且该元素中得所有子元素均为浮动元素,此时该元素得高度为0,产生塌陷
4.2、塌陷影响:
背景不能显示
边框不能撑开
margin,padding设置得值不能正确显示
4.3、解决方法
对父元素设置合适得高度
clear:both;清楚浮动塌陷
父级div定义 overflow: hidden;

5.盒子定位
5.1. 静态定位
position:static
5. 2.相对定位
position: relative;
5.3.固定定位
position: fixed;
5.4.绝对定位
position: absolute;
行,今天就给大家分享到这里吧,您的一份支持就是我最大的动力,最后打个小广告,我们程序员在学习和工作中或多或少会遇到一些比较棘手的问题,也就所谓的一时半会解决不了的bug,可以来杰凡IT问答平台上提问,平台上大佬很多可以快速给你一对一解决问题,有需要的朋友可以去关注下,平台网址: https://www.jf3q.com

写的很好呢,我要分享哦!

此处可发布评论

    暂无评论
    联系大神 有偿问答

    榜上有名--赚钱榜

    第一时间了解动态

    关注我们