css布局——HTML

一、标准流布局

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

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

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><h1>1.块级标签</h1><h1 style=\"background-color: hotpink; width: 200px;\">我是标题1</h1><h2 style=\"background-color: salmon; width: 120px;\">我是标题2</h2><p style=\"background-color: skyblue;\">我是段落1</p><p>我是段落2</p><div style=\"background-color: yellowgreen; height: 60px;\">我是div1</div><div id=\"\">我是div2</div><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\" ></body></html>

二、标准流网页布局

<!DOCTYPE html><html><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></html>

三、浮动

1.脱流
让标签脱离标准流，不再按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签，只要脱离了标准流，布局的方式就只有一种：一行显示多个；默认大小是内容的大小；设置宽度有效

2.浮动 – float
left – 左浮动
right – 右浮动

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><h1>浮动可以脱流</h1><div style=\"background-color: salmon; height: 100px; float: left;\">div1</div><div style=\"float: left; background-color: aquamarine;\">div2</div><a href=\"\" style=\"background-color: pink; width: 100px; height: 100px; float: left;\">我是超链接1</a><a href=\"\" style=\"background-color: azure;\">我是超链接2</a><h1>页面整体布局</h1><div style=\"background-color: sandybrown; height: 120px; width: 100%; float: right;\"></div><div style=\"background-color: chartreuse; width: 40%; height: 600px; float: right;\"></div><div style=\"background-color: blueviolet; width: 60%; height: 600px; float: right;\"></div></body></html>

四、浮动原理

如果块标签不浮动，占水面和池底的空间，并且还带着玻璃砖。
浮动的标签，只占水面的空间

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><!-- <h1>浮动原理：4中不同的浮动方案效果不一样</h1><div style=\"background-color: hotpink; height: 200px; width: 500px; float: left;\"></div><div style=\"background-color: khaki; height: 250px; width: 600px; float: left;\">div2</div> --><!-- 练习 --><div style=\"width: 50%; height: 200px; background-color: red; float: right;\"></div><div style=\"width: 60%; height: 300px; background-color: green;\"></div><div style=\"width: 30%; height: 100px; float: right; background-color: blue;\"></div></body></html>

五、浮动的应用

浮动的应用：
1.竖着显示的横着来（页面布局）
2.文字环绕: 被环绕的块浮动，文字块不浮动

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><div style=\"float: left;\"><img src=\"img/bucket.png\" ></div><div style=\"width: 220px;\">asdhfkajshdfk 阿斯蒂芬卡萨丁加法和阿斯顿发数据库东方航空阿萨德发客户萨科技发的熬枯受淡房间卡是<a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a><a href=\"\">超链接1</a></div></body></html>

六、清除浮动

清除浮动：清除因为浮动而产生的高度塌陷的问题

1)高度塌陷: 父标签不浮动并且没有设置高度，子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)
2)清除浮动：
a.空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置它的clear属性为both

b.设置overflow: 设置高度会塌陷的标签的overflow属性为hidden

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><div style=\"height: 120px; background-color: pink;\"></div><div class=\"subside\" style=\"background-color: greenyellow;\"><div style=\"background-color: red; height: 100px; width: 100px;\"></div><div style=\"background-color: saddlebrown; height: 400px; width: 35%; float: left;\"></div><div style=\"background-color: skyblue; height: 1300px; width: 40%; float: right;\"></div><!-- 1.空盒子法 --><!-- <div style=\"clear: both;\"></div> --></div><div style=\"height: 80px; background-color: seagreen;\"></div><!-- 2.设置overflow --><style type=\"text/css\">.subside{overflow: hidden;}</style></body></html>

七、定位

1.定位
定位的属性有四个：left、right、top、bottom
left：设置标签的左边到另外一个标签的左边距离
right：设置标签的右边到另外一个标签的右边的距离
top：设置标签顶部到另外一个标签的顶部的距离
bottom：设置标签的底部到另外一个标签底部的距离

2.选择定位的参考对象：position

static/initial(默认值，body例外)：不选参考对象，不定位（设置距离直接无效）
absolute：绝对定位，选择第一个非static/initial的父标签作为参考对象
relative：相对定位，相对当前标签在标准流中的位置定位（一般用于让自己成为子标签的参考对象的时候用）
fixed：相对浏览器定位
sticky：

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body><!-- <h1>1.直接设置定位的距离无效</h1><style type=\"text/css\">#div1{left: 300px;position: static;}</style><div id=\"div1\" style=\"background-color: red; width: 100px; height: 100px;\"></div><h1>2.绝对定位</h1><div id=\"div2\" style=\"background-color: green; width: 300px; height: 300px;\"><div id=\"div3\" style=\"background-color: yellow; width: 200px; height: 200px;\"><div id=\"div4\" style=\"background-color: blue; width: 100px; height: 100px;\"></div></div></div><style type=\"text/css\">#div2{/* 设置position是为了成为参考对象 */position: relative;}#div4{top: 10px;right: 50px;/* 设置position是为了能够让自己相对别人去定位（选定位的参考对象） */position: absolute;}</style> --><!-- <h1>3.相对定位</h1><div id=\"div5\" style=\"background-color: red; width: 200px; height: 200px;\"></div><style type=\"text/css\">#div5{bottom: 50px;/* 如果设置position为relative是把自己原来的位置作为参考对象，很少使用；一般设置positio为relative是为了让自己成为别人的参考对象*/position: relative;}</style> --><!-- <h1 id=\"top\">相对浏览器定位</h1><div style=\"height: 10000px;\"><div id=\"div6\" style=\"background-color: red; width: 100px; height: 50px;\"><a href=\"#top\">回到顶部</a></div></div><p>我是底部</p><style type=\"text/css\">#div6{right: 40px;bottom: 30px;position: fixed;}</style> --><h1>sticky</h1><div id=\"\" style=\"background-color: red; height: 2000px;\"></div><div id=\"div7\" style=\"background-color: green; height: 100px;\"></div><style type=\"text/css\">#div7{bottom: 0px;position: sticky;}</style></body></html>

八、盒子模型

1.盒子模型
html中每一个可见的标签不管在任何情况下都是由4个部分组成：content、padding、border和margin
1）content：可见的；设置背景会作用于content；设置标签的宽度和高度其实就是在设置conten的宽度和高度；
标签内容和子标签都是添加到content上的
2）padding：可见的；设置背景会作用于padding；padding有四个方向，每个方向可以单独控制
3）border：可见的；border有四个方向，每个方向也可以单独控制
4）margin：不可见但是占位置；有四个方向，每个方向也可以单独控制

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title></head><body ><div id=\"div1\" style=\" background-color: greenyellow;\"><img src=\"img/aaa.ico\" >div1</div><input type=\"text\" style=\"padding-left: 10px;\"/><style type=\"text/css\">#div1{/* 1.content */width: 100px;height: 100px;/* 2.padding (可以让标签内容和标签的边框在某个方向上保持一个的距离)1)同时设置4个方向的padding：paddidng:大小;2）单独设置指定方向的padding: padding-left、padding-right、padding-top、padding-bottom*/padding: 20px;/* 3.border1)同时设置4个方向的border：border:边框大小 边框样式 边框颜色;  (边框样式:solid-实线、dotted-点划线、dashed-虚线、double-双实线)2)单独设置指定方向的borderborder-left、border-right、border-top、border-bottom*//* border: 5px solid red; */border-left: 3px solid red;border-top: 5px dotted purple;border-bottom: 4px dashed seagreen;border-right: 3px double blue;/* 4.margin *//* margin: 100px; */margin-left: 50px;}</style></div></body></html>