（讲解4）盒子模型

最新推荐文章于 2023-01-26 15:32:25 发布

我还能再写两行

最新推荐文章于 2023-01-26 15:32:25 发布

阅读量128

点赞数

分类专栏： 1+x

本文链接：https://blog.csdn.net/weixin_45929422/article/details/103300548

版权

1+x 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>盒模型</title>
	<meta charset="utf-8">
	<style>
		/*样式初始化*/
		body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
			margin:0;
			padding:0;
		}
		ul,ol{
			list-style: none;
		}
		
	</style>
</head>
<body>

<div>你好</div>
<span>我在你后面</span>
<!-- 
	盒子模型是教学重点：可以出现在任何题型中，通常在面试中也会有关于box盒模型的问题。
	建议教师在教授盒模型时候，给元素添加padding前后截图在ps中真正量一下尺寸的变化，是不是更有说服力。
	截图要注意：在网页显示比例100%的情况下截图
 -->

盒模型：
	组成部件：外边距+边框+内边距+内容

IE盒模型和标准盒模型切换
	box-sizing:border-box/content-box;

元素分类 
	块级元素 
		1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。<br/>
		2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/>
		3、元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽度一致），除非设定一个宽度。
		<div> <p> <h1>~<h6>
		<ol> <ul> <dl> <li>
		<address> <blockquote>
		<form>
	行内元素 
		1、和其他元素都在一行上；<br/>
		2、元素的高度、宽度、行高及顶部和底部边距不可设置；<br/>
		3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
		<a> <span> <br/> <i>
		<em> <strong> <label>
	行内块状元素 
		1、和其他元素都在一行上；<br/>
		2、元素的高度、宽度、行高以及顶和底边距都可设置。
			<img> <input> <select></select>
			<textarea></textarea> <button></textarea> <iframe></textarea>


元素分类转换 
display
	block：将元素转换为块级元素
	inline：将元素装换为行级元素
	inline-block：将元素转换为内联块元素
	none: 将元素隐藏


样式初始化的原因：由于浏览器内核的不同，对标签默认样式的解析不同，导致页面呈现的样式不同。
样式初始化
h1,h2,h3,h5{
	margin:0;
	
	list-style:none;
}


</body>
</html>

我还能再写两行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（讲解4）盒子模型

<!DOCTYPE html><html><head> <title>盒模型</title> <meta charset="utf-8"> <style> /*样式初始化*/ body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ margin:0; padding...
复制链接

扫一扫