day11 - 标准流布局和标准流网页布局

最新推荐文章于 2023-06-17 23:35:08 发布

闪 | 灵

最新推荐文章于 2023-06-17 23:35:08 发布

阅读量434

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_44616136/article/details/108388540

版权

html5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.标准流布局

标签在没有布局相关的属性的时候，默认的布局方式就是标准流布局。
a.块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。
h1~h6、p、div、列表相关…
b.行内标签：一行可以显示多个；默认大小是内容的大小；设置宽度无效。
a、span、label、font…
c.行内块标签：一行可以显示多个；默认大小是内容的大小；设置宽高有效。
img、输入框

2.display属性（css）
block：将标签修改成块级标签
inline：将标签修改成行内标签
inline-block：将标签修改成行内块
none：隐藏标签
–>

1.块级标签

我是标题1

我是标题2

我是段落1

我是段落2

我是div1

我是div2

    <h1>2.行内标签</h1>
    <a href="" style="background-color: aquamarine; width: 300px; height: 100px;">我是超链接1</a>
    <a href="" style="background-color: sandybrown;">超链接2</a>
    <label style="background-color: skyblue; height: 60px;">我是lable1</label>
    <label>我是lable1</label>
    
    <h1>3.行内块标签</h1>
    <img style="background-color: sandybrown; width: 400px;" src="img/anchor.png" >
    <img src="img/ghost.png" >
    <input type="text" name="" id="" value="" />
    <input style="height: 60px;" type="text" name="" id="" value="" />
    
    <h1>display属性</h1>
    <div style="background-color: sandybrown; width: 200px; display: inline;">
        div3
    </div>
    <div style="background-color: skyblue; height: 100px; display: inline;">
        div4
    </div>
    
    <a style="width: 100px; height: 100px; background-color: deeppink; display: inline-block;">超链接3</a>
    <a style="background-color: salmon; display: block;">超链接4</a>
    <img style="display: none;" src="img/hat.png" >

标准流网页布局

<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
    <div style="height: 120px; background-color: sandybrown;"></div>
    <div style="width: 40%; height: 600px; background-color: skyblue; display: inline-block;"></div>
    <div style="width: 59%; height: 600px; background-color: pink; display: inline-block;"></div>
</body>