欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5知识点总结(四)

程序员文章站 2022-06-18 19:16:57
盒子模型、页面布局与规划盒子模型原理标准文档流盒子浮动盒子塌陷盒子定位盒子模型原理 盒子模型概述每个盒子都包含:边界(margin),边框...

盒子模型、页面布局与规划

     盒子模型原理
     标准文档流
     盒子浮动
     盒子塌陷
     盒子定位



盒子模型原理

    盒子模型概述

每个盒子都包含:边界(margin),边框(border),填充(padding)和内容(content)

边界:元素边框之外所占据的尺寸
边框:border
填充:内容与边距的距离
内容:标签中的文本或嵌入标签,用width,height设置尺寸


    盒子的大小

盒子的大小=内容+填充+边框
盒子的占据空间=内容+填充+边框+边距



标准文档流

    概述

    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、块状元素:
	<img />
	<span></span>
	<br />
	<a></a>
	...

区别:
排列方式不同:行内元素从左到右依次排列,块状元素从上到下 >
内嵌元素不同:块状元素可包含行内元素,行内元素只能包含文本或其他行内元素 >
属性设置不同:行内元素设置height和width无效,但可设置line—height,magin和padding设置上下方向无效

    display属性:页面元素隐藏方式,隐藏以后浏览器消除元素,不占屏幕空间

    1、隐藏HTML元素
<style type="text/css">
	便签名|类名{
		display: none; 隐藏
		display:block; 块状显示
		display:inline;  行状显示
	}
</style>

    2、隐藏div
<div  style="display: none;"></div>
<div  style="display: display:block ;"></div>
<div  style="display: inline;"></div>

    visibility属性:页面元素隐藏显示方式,虽然被隐藏,但是元素还占有那块空间

    1、显示HTML元素
<style type="text/css">
	便签名|类名{
		visibility: hidden;  隐藏
		visibility: visible; 显示
	}
</style>


    2、显示div
<div  style="visibility: hidden; "></div>
<div  style="visibility: visible;"></div>



盒子浮动

    float:浮动定位方向
<style type="text/css">
	#id{
			float: none;默认
			float: left;左浮动
			float: right;右浮动
	}
</style>

浮动元素的特征:

  1. 脱离标准文档流,不占据页面空间
  2. 浮动元素显示在父元素的左侧或右侧
  3. 若存在浮动元素,则显示在浮动元素之后
  4. 浮动元素大小默认由内容决定,但可用width,height设置


    盒子塌陷

1、塌陷原因:
  1. 一个盒子使用了float属性,导致父容器被撑开
  2. 若一个元素的高度为自适应且该元素中的所有子元素均为浮动元素,此时该元素的高度为0,产生塌陷

2、塌陷影响:
  1. 背景不能显示
  2. 边框不能撑开
  3. margin,padding设置的值不能正确显示

3、解决方法
  1. 对父元素设置合适的高度
  2. clear:both;清楚浮动塌陷
  3. 父级div定义 overflow: hidden;



盒子定位

    1. 静态定位
position:static
    2.相对定位
position: relative;				
    3.固定定位
position: fixed;
    4.绝对定位
position: absolute;

本文地址:https://blog.csdn.net/weixin_46085790/article/details/112469839