HTML5 布局元素

最新推荐文章于 2023-12-30 18:49:56 发布

苦涩2020

最新推荐文章于 2023-12-30 18:49:56 发布

阅读量485

点赞数

分类专栏： HTML5 前端文章标签： html5

本文链接：https://blog.csdn.net/UserPython/article/details/106273205

版权

元素类型

块级元素

独占一行，不和其他元素待在一起
可以设置宽高
用来对网页进行布局，承载内容

行内元素

不会独占一行，可以和其他元素待在一行
不可以设置宽高，宽高由里面的内容决定

行内块级元素

不会独占一行，可以和其他元素待在一行
可以设置宽高

通过设置元素display属性，元素类型可以相互转换

div标签

定义文档中的区块，可以把文档分割为独立的，不同的部分
可以嵌套任何元素，包括div标签
用来承载内容，相当于一个容易。没有其他任何样式

header和footer标签

header：定义文档的页眉，通常用于设置一个页面的标题部分，通常包含标题，LOGO，导航等；
footer：定义文档的页脚，通常用于设置一个页面的底部区域，会包含友情链接，版权声明，文件建立日期，联系方式等
header和footer标签属于div标签的变种，功能和div标签一样
header和footer标签有很强的语义，使得网页结构更清晰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新的布局元素header/footer</title>
    <style type="text/css">
        body{
    height: 1000px}
        header{
    width: 100%; height:10%; background: green;}
        footer{
    width: 100%; height:10%; background: blue;}
        #div0{
    width: 100%; height:80%;}
        #div1{
    width: 20%; height: 100%; background: bisque; float: left;}
        #div2{
    width: 80%; height: 100%; background: beige; float: left;}
    </style>
</head>
<body>
    <header>我是头部</header>
    <div id = "div0">
        <div id="div1">我是侧边栏</div>
        <div id="div2"

最低0.47元/天解锁文章

苦涩2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 布局元素

元素类型块级元素独占一行，不和其他元素待在一起可以设置宽高用来对网页进行布局，承载内容行内元素不会独占一行，可以和其他元素待在一行不可以设置宽高，宽高由里面的内容决定行内块级元素不会独占一行，可以和其他元素待在一行可以设置宽高元素类型可以相互转换div标签定义文档中的区块，可以把文档分割为独立的，不同的部分可以嵌套任何元素，包括div标签用来承载内容，相当于一个容易。没有其他任何样式header和footer标签header：定义文档的.
复制链接

扫一扫