收藏
批改状态：合格
老师批语：正是因为padding有这些问题, 所以更多时候, 用box-sizing
1、iframe内联标签的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>经销商管理系统</title> </head> <body> <h2>经销商管理系统</h2> <ul style="float:left"> <li><a href="jxsgl.html" target="main">经销商管理</a></li> <li><a href="cpgl.html" target="main">产品管理</a></li> <li><a href="ddgl.html" target="main">订单管理</a></li> </ul> <iframe src="main.html" frameborder="1" width="400" height="300" name="main" style="float:left"></iframe> </body> </html>
在后台管理系统中就会用到iframe标签，头部和左侧导航栏包括底部都是不变的，点击左侧导航栏的链接的时候在右侧框中就会显示相应的页面。
2、HTML5中的语义化标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>语义化标签的页面结构</title> </head> <body> <header>头部</header> <nav>导航</nav> <main>主体 <article>文章 <section>内容</section> </article> <aside>边栏</aside> </main> <footer>底部</footer> </body> </html>
语义化的标签对搜索引擎很友好。
3、CSS样式的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS优先级</title>
<!--外部样式-->
<link rel="stylesheet" href="static/css/css1.css"/>
<!--内部样式-->
<style>
P{color: blue;}
</style>
</head>
<body>
<!--内联样式-->
<p style="color:red;">内联样式优先级最高</p>
<p>内部样式优先级低于内联样式</p>
<p>外部样式优先级最低</p>
</body>
</html>外部样式用link标签引入，例如<link rel="stylesheet" href="static/css/css1.css"/>；
内部样式用<style>标签写在html文档的头部，作用于当前文档。
内联样式用style=“”写在其他标签里面。
CSS优先级是内联样式>内部样式>外部样式。
4、CSS的选择器使用规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style>
/*ID选择器*/
#andy{
color: red;
}
/*Class选择器*/
.betty {
color: green;
}
/*标签选择器*/
p{
color:blue;
}
</style>
</head>
<body>
<p id="andy">id选择器级别最高</p>
<p class="betty">类选择器级别次之</p>
<p> 标签选择器级别最低</p>
</body>
</html>CSS中id选择器以#开头，可以选择一个元素；类选择器以.开头，可以选择一批元素；标签选择器则对所有该标签的元素都起作用。其优先级为id选择器最高，类选择器次之，标签选择器最低。
5、盒模型5大元素
一切皆是盒子。所有的元素都可以看作是盒子，除了类似br、hr这样的标签之外，能放内容的标签都可以看作盒子。
以下是一个抽象的盒子模型
一个盒子从内到外依次是content（内容），padding（内边距），border（边框），margin（外边距）。可以把盒子理解为一个包装盒，最里面的是物品（content），物品外面加了层泡沫保护（padding），然后放到了包装盒里（border），盒子之间的间隙就是margin。
盒子是块级元素，独占一行，支持宽度设置。
盒子可以设置6个属性：
(1) width: 宽度(水平方向)
(2) height: 高度(垂直方向)
(3)background-color: 背景 (默认透明)
(4)padding: 内边距, 内容与边框之间的填充区域
(5)border: 边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色
(6)margin: 外边距,决定当前盒子与其它盒子之间的位置与关系
根据属性的可见性可以分为二类:
(1) 可见的: width, height, border，其中border可以设置粗细，线型和颜色。
(2) 透明的: background, padding, margin，其中padding和margin只能设置宽度，不能设置高度和颜色。
在写属性值的时候，是按上右左下的顺序来排列的，也就是顺时针顺序，例如：
border-width：10px 20px 30px 40px；
表示上边框是10px，右边框是20px，下边框是30px，左边框是40px。
也可以进行简写，例如：
padding：10px 20px 30px；
表示上内边距是10px，左右内边距都是20px，下内边距是30px；
或者：
margin：10px 20px；
表示上下外边距是10px，左右外边距是20px。
总之第二个数字必定包含了右侧的属性值。
一个简单的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style2.css">
<title>盒模型</title>
<style>
.box1{
width:400px;
height:300px;
border:2px solid black;
background-color: aquamarine;
padding: 20px 10px;
}
.box2{
width:inherit;
height:inherit;
background-color: brown;
border-top:5px dashed red;
border-right:10px dotted green;
border-bottom: 5px double blue;
padding:10px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>运行出来的效果是这样的
box1的样子
box2的宽度和高度都继承了box1，所以分别是400和300
页面效果是这样的。
总结：
虽然这5个属性很简单，但是写起来很容易出错，特别是盒子套盒子。设置了padding之后，好像上和左是优先执行的，所以就会出现如上图的情况，因为box2继承了box1的宽和高，所以被box1的padding设置给向下向右挤了。还得多练习，多调试才行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
