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

tech2024-01-23  71

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>
最新回复(0)