CSS架构
其他元素；
- 块级元素与内联元素；该元素独占一行只以垂直方向排列
- 内联元素；该元素不会独占一行，只以水平方向排列(不能设置宽高)
- 行内块级元素；该元素不会不会独占一行，还是水平方向排列，(可设置宽高)
<style>
h1{
width: 200px;
height: 200px;
}
/*块级元素；元素独占一行，以垂直方向排列*/
a{
width: 200px;
height: 200px;
}
/*内联元素；元素不会独占一行，以水平方向排列
不能设置高度和宽度是由内容如文本，图片和其他元素撑起
*/
img{
width: 200px;
}
/*行内块级元素；该元素不会不会独占一行，还是水平方向排列，(可设置宽高)
*/
</style>
</head>
<body>
<h1>爱新觉罗</h1>
<a href="#">这是链接</a>
<img src="/imgs/b.jpg">
</body>1.display属性；
block；表示用于设置块鸡元素
inline；表示用于设置内联元素
inline-block；表示用于设置行内块级元素
<style>
div {
display: 设置 inline;
<!--表示内联元素-->
}
span{
display:block;
<!--表示设置块级元素-->
}
</style>
</head>
<!--页面元素显示类型(display)决定浏览器的默认样式-->
<body>
<div>呼延觉罗</div>
<div>爱新觉罗</div>
</body>2.结构元素；
header元素；是用来设置具有引导和导航的结构
main元素；是用来设置页面的主要内容
footer元素；是用来设置根元素的页脚
<style>
header{
height: 100px;
background-color: yellow;
}
main {
height: 800px;
background-color: blue;
/*背景颜色*/
}
footer{
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<header>
<!--nav元素表示导航（导航栏的容器）-->
<nav></nav>
</header>
<!--页面顶部-->
<main>
<article>
<!--article元素，表示文章，独立结构-->
<section></section>
</article>
<aside></aside>
<!--aside元素作为侧边栏-->
</main>
<footer></footer>
<!--页面的底部-->
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。