ccs元素定位

最新推荐文章于 2024-12-11 15:12:59 发布

原创最新推荐文章于 2024-12-11 15:12:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

ccs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS中的元素定位，包括静态、相对、绝对和固定定位。重点讲解了浮动(float)和inline-block属性在页面布局中的应用，以及如何通过margin、border、padding调整元素间距。同时，提到了元素对齐、溢出处理和层叠顺序的相关概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定位会改变元素位置、设计前需注意

一个块（如div）占总长度width+margin+border+padding
主要属性：width（框模大小）+margin（外边距）+border（框边线）+padding（内边距）
注意：1、两个块的margin会产生合并，设置时需要考虑。（合并后的margin等于比较大的margin）
2、对border-width：进行设置时必须先对border-style设置边框线类型

ccs定位

网页默认是文档的排序的，规则是一个接着一个
ccs的元素排版：文档流（默认）、相对定位、绝对定位

用于排版的属性position：static
ralative
absolute
fixed (浮动广告)

注意：

ralative和abslute的区别：1、"文档流"的改变不同：当设置absolute时会删除这个元素所占文档流的位置（紧贴着的下一个元素会顶上删除的位置），设置ralative不会删除文档流的位置
2、"子便签"中位置定位： absolute属性子便签在父类中定位时，父类属性也必须是absolute（若父类父类都没有设置成absolute则会定位在body）；ralative属性的子标直接是定位到上级的父类（不考虑父类的属性）
元素对齐：div是块级元素，若让他居中；只能设置它的margin：auto
overflow 设置当元素的内容溢出其区域时发生的事情。
z-index 设置元素的堆叠顺序。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。

元素定位主要用于页面布局其中float或inline-block属性非常重要

float代码一：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>text</title>
<style>
*{
margin: 0;
border: 0;
}
#main{

width: 960px;
height: 400px;
margin: auto;
}
.two{
width: 300px;
height: 400px;
margin-left: 10px; /*设置框之间间隔*/
margin-right: 10px;
float: left; //使元素悬浮向左(two类元素设置左边有吸力)

}
.three_titel{
align-content: center;
background-color: coral;
}
.three_body{
align-content: center;
background-color: #92ffc3;
}
.three_bettom{
align-content: center;
background-color: #ff313d;
}

</style>
</head>
<body>
<div id="main">
<div class="two">
<div class="three_titel"><h4 class="context1">电影名1</h4></div>
<div class="three_body"><img class="context2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487184236043&di=c2d99e1a3e6f1cb1b48ce395a6cb2a6c&imgtype=0&src=http%3A%2F%2Fi.zeze.com%2Fattachment%2Fforum%2F201605%2F06%2F214815xnd5dz5t58fndt85.jpg" alt=""/></div>
<div class="three_bettom"><p>adjasashg哥哥化工阿斯各iagiaiiain个iauigai发阿哥</p></div>
</div>
<div class="two">
<div class="three_titel"><h4 class="context1" >电影名2</h4></div>
<div class="three_body"><img class="context2" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2862132887,3792323269&fm=80&w=179&h=119&img.JPEG" alt=""/></div>
<div class="three_bettom">sadgasdgag</div>
</div>
<div class="two">
<div class="three_titel"><h4 class="context1">电影名3</h4></div>
<div class="three_body"><img class="context2" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2862132887,3792323269&fm=80&w=179&h=119&img.JPEG" alt=""/></div>
<div class="three_bettom">asasdga</div>
</div>
</div>
</body>
</html>

inline-block代码演示

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>text</title>
<style>
*{
margin: 0;
border: 0;
}
#main{
font-size: 0px; /*去除子框间隔的方法：先设置父类font-size: 0px;然后设置子类font-size: 14px;*/
width: 960px;
margin: auto;
}
.two{
font-size: 14px;
width: 300px;
display: inline-block; //线性-块：相当于将块级元素设置成行级元素排列
vertical-align: top; //垂直线上排列
}
.three_titel{
align-content: center;
background-color: coral;
}
.three_body{
align-content: center;
background-color: #92ffc3;
}
.three_bettom{
align-content: center;
background-color: #ff313d;
}

</style>
</head>
<body>
<div id="main">
<div class="two">
<div class="three_titel"><h4 class="context1">电影名1</h4></div>
<div class="three_body"><img class="context2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487184236043&di=c2d99e1a3e6f1cb1b48ce395a6cb2a6c&imgtype=0&src=http%3A%2F%2Fi.zeze.com%2Fattachment%2Fforum%2F201605%2F06%2F214815xnd5dz5t58fndt85.jpg" alt=""/></div>
<div class="three_bettom"><p>adjasashg哥哥化工阿斯各iagiaiiain个iauigai发阿哥</p></div>
</div>
<div class="two">
<div class="three_titel"><h4 class="context1" >电影名2</h4></div>
<div class="three_body"><img class="context2" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2862132887,3792323269&fm=80&w=179&h=119&img.JPEG" alt=""/></div>
<div class="three_bettom">sadgasdgag</div>
</div>
<div class="two">
<div class="three_titel"><h4 class="context1">电影名3</h4></div>
<div class="three_body"><img class="context2" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2862132887,3792323269&fm=80&w=179&h=119&img.JPEG" alt=""/></div>
<div class="three_bettom">asasdga</div>
</div>
</div>
</body>
</html>