python进阶day17

发布时间：2024-12-09 16:42

学习Python基础语法：https://www.runoob.com/python/python-tutorial.html #生活技巧# #工作学习技巧# #编程学习资源#

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>

123456789101112131415161718192021222324252627282930313233343536373839404142 2 浮动

##### 2.1 脱流 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>

12345678910111213141516171819202122232425 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> 12345678910111213 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>

1234567891011121314151617181920212223242526272829303132 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>   </div> <div style="height: 80px; background-color: seagreen;"></div>  <style type="text/css"> .subside{ overflow: hidden; } </style></body> </html>

1234567891011121314151617181920212223242526272829 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>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>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 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>

123456789101112131415161718192021222324252627282930313233343536373839

网址：python进阶day17 https://www.yuejiaxmz.com/news/view/425812

上一篇：汽车日常维修小技巧有哪些

下一篇：数字万用表的设备修理方法及修理技

python进阶day17

Day17

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享