第三次作业

最新推荐文章于 2024-11-12 22:56:44 发布

m0_73967576

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量392

点赞数 10

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/m0_73967576/article/details/134719252

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1{

width: 711px;

height: 400px;

background-color: aqua;

border: 2px solid orange;

margin: auto;

}

.mask{

position: relative;

width: 711px;

height: 400px;

background-color: rgba(1, 1,1, 0.5);

opacity: 0;

}

.mask img{

position:absolute;

top:45%;

left:45%;

}

</style>

</head>

<body>

</div>

</body>

</html>

定位
<style>
.father {
position: relative;	此处父类选择器要相对定位
width: 900px;	相对于父亲做定位
height: 400px;
background-color: aqua;
}
.son1 {
position: absolute;	儿子要绝对定位
top: 200px;
right: 0px;
z-index: 1;	优先显示
background-color: blue;
}
.son2 {
position: absolute;
top: 150px;
right: 0px;
background-color:blueviolet;
}
.son {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
</div>
固定定位
div {
position: fixed;
粘性定位	（一个导航栏那样的）
.posi {	class命名
position: sticky;
轮廓线
input {	轮廓线的样式
/* outline-style: none; */	去除
/* outline-width: thick;	粗细
outline-color: rgb(72, 0, 255); */	颜色
outline: none;	去除轮廓线缩写
浮动
float: right;	文字环绕
一个元素浮动起来，会不在占有原来的位置（脱离文档流），同时发生浮动的盒子会在同一行进行排列。如果说
多个元素同时给左浮动，元素就会从左到右在一行排列。
overflow: hidden;
clear: right;	清除浮动
clear: both;	清除浮动
margin: 100px;	外边距
padding: 100px;	内边距
border+padding+content
/* margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px; */
上下左右外边距全部为20px
margin: 20px;
上下外边距为20px 左右外边距为30px
margin: 20px 30px;
上外边距10px、左右外边距30px、下外边距20px
margin: 10px 30px 20px;
margin: 10px 20px 30px 40px;
margin: 0px auto;	块元素居中auto只能用于左右浮动
	浮动的块元素不能居中
overflow: auto;	溢出文本形成滚轮
overflow: hidden;	砍掉溢出文本
/* padding-top: 20px;	内容距离盒子距离
padding-left: 20px;
padding-bottom: 20px;
padding-right: 100px; */
padding: 20px 40px;
padding: 10px 30px 40px;
box-sizing: border-box;	避免影响盒子大小
border: 1px solid black;	给父类选择器解决外边距塌陷
padding: 10px;
overflow: hidden;
* {	去除默认边距格式
padding: 0;
margin: 0;
}