python进阶之路
Day17
hello world!今日是python学习的第十七天,今天对前端进行学习,今日主要内容为:标准流布局、标准流网页布局、浮动、浮动原理、浮动的应用、清除浮动、定位等。
1 标准流布局
1.1 标准流布局
标签在没有布局相关的属性的时候,默认的布局方式。
a.块级标签:一个占一行;默认宽度是父标签的宽度,默认高度是内容的高度;设置宽高有效
h1~h6、p、div、列表相关。。。
b.行内标签:一行可以显示多个;默认大小是内容的大小;设置宽高无效
a、span、label、font。。。
c.行内块标签:一行可以显示多个;默认大小是内容的大小;设置宽高有效。
img、input
1.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>
2 浮动
##### 2.1 脱流
让标签脱离标准流,不再按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签,只要脱离了标准流,布局的方式就只有一种:一行显示多个;默认大小是内容的大小;设置宽度有效
2.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>
2.3 浮动原理
如果块标签不浮动,占水面和池底的空间,并且还带着玻璃砖。
浮动的标签,只占水面的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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>
2.4 浮动的应用
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>
2.5 清除浮动
清除浮动: 清除因为浮动而产生的高度塌陷的问题
1)高度塌陷: 父标签不浮动并且没有设置高度,子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)
2)清除浮动:
a.空盒子法:在高度会塌陷的标签的最后添加一个空的div,并且设置它的clear属性为both
<div style=“clear: both;”></div>
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>
3 定位
3.1 定位
定位的属性有四个:left、right、top、bottom
left:设置标签的左边到另外一个标签的左边距离
right:设置标签的右边到另外一个标签的右边的距离
top:设置标签顶部到另外一个标签的顶部的距离
bottom:设置标签的底部到另外一个标签底部的距离
3.2 选择定位的参考对象:position
1) static/initial(默认值,body例外):不选参考对象,不定位(设置距离直接无效)
2) absolute:绝对定位,选择第一个非static/initial的父标签作为参考对象
3) relative:相对定位,相对当前标签在标准流中的位置定位(一般用于让自己成为子标签的参考对象的时候用)
4) fixed:相对浏览器定位
5) 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>
4 盒子模型
4.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.border
1)同时设置4个方向的border:
border:边框大小 边框样式 边框颜色; (边框样式:solid-实线、dotted-点划线、dashed-虚线、double-双实线)
2)单独设置指定方向的border
border-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>