ccs元素定位
来源:互联网 发布:读取股票数据 编辑:程序博客网 时间:2024/04/30 01:55
定位会改变元素位置、设计前需注意
- 一个块(如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>
- ccs元素定位
- 元素定位
- 元素定位
- 元素定位
- 元素定位
- 定位元素
- 定位元素
- 元素定位
- 元素定位
- ccs
- 元素定位之相对定位
- 元素定位---使用 CSS 选择器定位元素
- 元素绝对定位 V2
- 元素的定位
- CSS-- 元素的定位
- 得到元素定位点
- 定位页面元素
- WebDriver--定位UI元素
- i春秋
- kvm vm运行
- 我的CSDN的第一天
- Jquery选择器-基本选择器
- spark.eventLog.dir和spark.history.fs.logDirectory的区别
- ccs元素定位
- python解决乱码问题-文件
- 如何判断一段程序是由C 编译程序还是由C++编译程序编译的?
- 到底什么是闭包
- PHP学习笔记【四】之《数据库抽象层PDO---PDO事务处理》
- Linux目录标准FHS介绍
- vue2.0 自定义指令
- 心情不好
- 看代码, 学TF(一): 先动手写第一段代码