目录
4. 定位(position)【relative，absolute，fixed】
1. 盒子模型(margin，padding)
1.盒子模型（margin，padding）
(1)概念
margin： 外边距，标签与标签之间的距离 或 标签与浏览器边缘距离
border： 标签的边框
padding： 内边距，内容到边框的距离
content： 内容大小
注意：浏览器会自带8px的margin,即body标签到浏览器边缘为8px
写页面时应先把body的margin去除：body{margin:o;}
(2)margin：外边距
a.margin有上(top)下(bottom)左(left)右(right),可以简写
margin: 0; 上下左右全是0
margin: 10px 20px; 第一个上下 第二个左右
margin: 10px 20px 30px; 第一个上 第二个左右 第三个下
margin: 10px 20px 30px 40px;上 右 下 左
b.两个标签之间同时用margin时，两个标签之间距离不叠加，取最大值作为两者距离
c.margin: 0 auto; 只能做到标签的水平居中,无法垂直居中
d.两个标签之间嵌套时，也可以使用
(3)padding：内边距
a.padding也有上(top)下(bottom)左(left)右(right),可以简写
padding: 0; 上下左右全是0
padding: 10px 20px; 第一个上下 第二个左右
padding: 10px 20px 30px; 第一个上 第二个左右 第三个下
padding: 10px 20px 30px 40px; 上 右 下 左2.浮动(float)
2.float浮动：
float: left;左浮动
float: right;右浮动
(1)浮动让标签脱离了文档流，也不是块儿标签，本身多大浮起来之后就只能占多大(标签之间margin:0)
例子：行内块儿标签之间原本有间隙，浮动后之间没有间隙
(2)浮动多用在页面布局，一般都是用浮动来提前规划好
(3)在使用浮动过程中，当标签嵌套，内标签用浮动时，内标签浮起，脱离文档流，造成父标签塌陷的问题
例子代码：
<div style="height:300px">
<span style="float:left;height:300px;weight:300px">qwe</span>
<span style="float:left;height:300px;weight:300px">qwe</span>
</div>
解决办法：clear
a.给外标签设置更高的高度（傻瓜式做法）
b.增加一个块儿标签放在浮动后，并指定样式：clear: left;
clear: left;：该标签的左边(地面和空中)不能有浮动的元素
（即以左边为准，左边有地面标签或浮动标签，默认继续向下移动扩张外标签）
c.通用的解决浮动方法：伪元素选择器
在布局就会用到浮动，先写好处理浮动css代码
.clearfix:after {
content: ''; 内容为空
display: block; 显示块儿标签特性(独占一行)
clear:both; 左右两侧都不能有浮动
}
遇到标签出现了塌陷，就给该塌陷的标签加一个cass:clearfix属性3.溢出属性(overflow)
1.溢出属性：
在设置好高宽的块儿标签时，填入文本或图片过大，默认溢出
2.解决溢出：
overflow: visible; 默认溢出可见，即溢出还是展示
overflow: hidden; 溢出部分直接隐藏（常用）
overflow: scroll; 无论溢不溢出，都显示成上下滚动条的形式
overflow: auto; 溢出时才显示成上下滚动条的形式（常用）
3.应用：(1)文档内容溢出，使用滚动条
(2)头像制作：溢出隐藏，图片调整width: 100%;让图片拉满
文档溢出与头像制作例子：
<html>
<head>
<style>
body{
margin: 0;
}
p{
height: 300px;
width: 200px;
border: blue solid 3px;
overflow: auto; /* overflow: scroll; */
}
div{
height: 300px;
width: 300px;
border: red solid 4px;
border-radius: 50%;
overflow: hidden; /*做头像一般与width: 100%;一起用*/
}
div>img{
max-width: 100%;
/* width: 100%; */ /* 占标签100%比例 */
}
</style>
</head>
<body>
<p>运算符也叫操作符, 通果, 比如：typeof就是运算符，过运算符可以对一个或多个值
进行运算,并获取运算结果, 比如：typeof就是运算符，可以来获得一个值的类型,
它会将该值的类型以字符串的形式返回:运算符也叫操作符, 通过运算符可以对一个或多个
值进行运算,并获取运算结可以来获得一个值的类型,
它会将该值的类型以字符串的形式返回: number string boolean undefined object
</p>
<div>
<img src="1.jpeg" alt="">
</div>
</body>
</html>4. 定位(position)【relative，absolute，fixed】
1.定位(position)
(1)静态static：
所有的标签默认都是静态的static，无法改变位置（即使加top/right/bottom/left等参数也不会影响）
所有标签默认position: static;
(2)相对定位relative(了解)：
用处:在相对于标签原来的位置做移动relative,设置此属性之后仍然处在文档流中，不影响其他元素的布局
用法:把默认静态定位改为相对定位position: relative;
然后相对原来位置调整位置top/right/bottom/left
(3)绝对定位absolute(常用)
a.概念:相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照),本质脱离文档流
b.用处:当不知道页面其他标签的位置和参数，只知道一个父标签的参数，基于该标签进行位置调整
c.用法：1)首先在使用绝对定位时，该标签的父标签不可以是静态标签，
父标签要设置position: relative;或position: absolute;
否则标签会以body为位置参照
2)然后把该标签的默认静态定位改为绝对定位position: absolute;
3)最后以父标签位置做参照调整位置top/right/bottom/left
(4)固定定位fixed(常用)
a.概念：相对于浏览器窗口固定在某个位置,本质脱离文档流
b.用处：如右下侧回到顶部
c.用法：position: fixed; 写了fixed之后 定位就是依据浏览器窗口，上下滑动位置不变
然后以浏览器为参照调整位置top/right/bottom/left
2.补充：
标签由static变为relative或absolute，它的性质就从原来没有定位的标签变成了已经定位过的标签
浏览器是优先展示文本内容的
3.改变位置标签与文档流
(1)不脱离文档流
1.相对定位
(2)脱离文档流
1.浮动
2.绝对定位
3.固定定位
4.相对定位relative例子代码
<html>
<head>
<style>
body{
margin: 0;
}
#d1{
height: 500px;
width: 500px;
background-color: burlywood;
}
#d2{
background-color: aquamarine;
height: 300px;
width: 300px;
position: relative;
top: 50px;
right: 30px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
df
</div>
</div>
</body>
</html>
5.绝对定位absolute例子代码：
<html>
<head>
<style>
body{
margin: 0;
}
#d1{
height: 500px;
width: 500px;
background-color: burlywood;
position: relative; /*f父标签不可以是静态标签，要改relative或absolute*/
}
#d2{
background-color: aquamarine;
height: 300px;
width: 300px;
position: absolute;
top: 50px;
right: 30px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
一起学python
</div>
</div>
</body>
</html>5.z-index模态框
1.概念：浏览器显示页面其实有层次分布，即页面布局除了xy轴还有z轴：z-index,最上层称之为模态框
2.用法：z-index:数字
数字越大，层次越高，离用户越近（普通写的页面层默认是0）
在做三层时，中间层往往为透明层
例如登录页面：
3.登录页面例子代码
<html>
<head>
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(31, 14, 14, 0.6);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px; /*调整位置居中*/
margin-top: -100px;
}
h1,p{
text-align: center
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1 >登陆页面</h1>
<p >username:<input type="text"></p>
<p >password:<input type="text"></p>
<p ><button>登录</button></p>
</div>
</body>
</html>6.opacity透明度
1.透明度有两个参数
rgba：只能影响颜色
opacity:不仅可以修改颜色的透明度，还同时修改字体的透明度
2.例子代码：
<html>
<head>
<style>
#p1{
background-color:rgba(153, 130, 130, 0.5);
}
#p2{
opacity: 0.5;
background-color: rgb(153, 130, 130);
}
</style>
</head>
<body>
<p id="p1">这是rgba</p>
<p id="p2">这是opacity</p>
</body>
</html>
扫一扫
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
