标签在没有添加布局相关属性的时候,默认的布局方式就是标准流布局。
① 块级标签:一个占一行;默认宽度是父标签的宽度,默认高度是内容的内容的高度;设置宽高有效
h1~h6,p,div
<h1 style="background-color: black;color: red;">我是标题一h1>
<h2>我是标题二h2>
<p style="background-color: aqua;">段落一p>
<p>段落二p>
<div style="background-color: burlywood;">
div1
div>
② 行内标签:一行可以显示多个;默认大小是内容的大小;设置宽高无效。
a、span、label、font…
<h1>2.行内标签h1>
<div id="" style="height: 200px;background-color: aqua;font-size: 20px;">
<a href="" style="background-color: beige;height: 100px;">超链接1a>
div>
<a href="" style="background-color: beige;height: 100px;">超链接1a>
<a href="" style="background-color: brown;">超链接2a>
③ 行内块标签:一行可以显示多个;默认大小是内容的大小;设置宽高有效。
image、输入框
block - 将标签修改成块级标签
inline - 将标签修改成行内标签
inline-block - 将标签修改成行内块
none - 影藏标签
<div id="" style="display: block;background-color: red;width: 6.25rem;height: 200px;">
div1
div>
让标签脱离标准流,不按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签,只要脱离了标准流布局的方式就只有一种:一行显示多个;默认大小是内容大小;设置宽高有效。
left - 左浮动(先看上面的空白地方放得下该标签与否)
right - 右浮动
<div style="background-color: violet;height: 120px;width: 100%;float: left;">div>
<div style="background-color: gold;width: 40%;height: 500px;float: left;">div>
<div style="background-color: lightcoral;width: 60%;height: 500px;float: left;">div>
清除浮动:清除因为浮动产生的高度塌陷问题
① 空盒子法:在高度会塌陷的标签的最后添加一个空的div,并且设置它的属性clear为both
<div id="" style="clear: both;">
div>
② 设置overflow:设置高度会塌陷的标签的overflow属性为hidden。
<style type="text/css">
.suside{
overflow: hidden;
}
style>
定位的属性有四个:left、right、top、bottom
left:设置标签的左边到另外一个标签的左边的距离
right:设置标签的右边到另外一个标签的右边的距离
top:设置标签的顶部到另外一个标签的顶部的距离
bottom:设置标签的底部到另外一个标签的底部的距离
①static/initial(默认值,body例外):不选参考对象,不定位(设置距离无效)
<style type="text/css">
#div1{
left: 18.75rem;
position: initial;
}
style>
<div id="div1" style="background-color: red;height: 100px;">
div>
②absolute(绝对定位):选择第一个非static/initial的父标签作为参考对象
<style type="text/css">
#div4{
/* 设置position是为了让自己能够相对于别人去定位(选定位的参考对象 */
position: absolute;
left: 300px;
}
style>
<div id="div2" style="background-color: darkcyan;height: 500px;width: 500px;">
<div id="div3" style="background-color: aqua;height: 400px;width: 400px;">
<div id="div4" style="background-color: blueviolet;height: 300px;width: 300px;">
div>
div>
div>
③relative(相对定位):相对当前标签在标准流中的位置定位(一般用于让自己成为子标签的参考对象时使用)
<style type="text/css">
#div5{
bottom: 50px;
/* 如果设置position设置为relative是把自己原来的位置作为参考对象,很少用;
一般设置positi为relative是为了让自己成为别人的参考对象*/
position: relative;
}
style>
<div id="div5" style="background-color: red;height: 300px;width: 300px;">
div>
④fixed(相对浏览器定位)
<style type="text/css">
#div6{
bottom: 30px;
position: fixed;
}
style>
<div id="" style="background-color: goldenrod;height: 1000px;">
<div id="div6" style="background-color: aqua;height: 300px;width: 300px;">
div>
div>
<p>我是底部p>
⑤sticky
<style type="text/css">
.div7{
position: sticky;
bottom: 30px;
}
style>
<div style="height: 2000px; background-color: blue;">div>
<div class="div7" style="height: 100px;background-color: blueviolet;">div>
html中每一个可见的标签不管在任何情况下都由4个部分组成:content、padding、border和margin
① content:可见的;设置背景会作用于content设置标签的宽度和高度其实就是在设置content的宽度和高度,标签内容和子标签都是添加到content上的。
② padding:可见的;设置背景会作用于padding和content;padding有4个方向,每个方向可以单独控制
③ border:可见的;设置背景会作用于padding和content;border有四个方向,每个方向也可以单独控制。
④ margin:不可见;有四个方向,每个方向都可以单独控制。