HTML与CSS中的定位个人分享
定位
- static - 默认值 (几乎不用,了解就可以)
absolute - 绝对定位,不为元素预留空间,脱离文档流:
- 如果当前元素的父级元素是<body>元素的话 -> 是相对于当前页面的定位
- 如果当前元素的父级不是<body>元素的话,父级元素没有开启定位 -> 则是相对于页面的定位
- 如果当前元素的父级不是<body>元素的话,父级元素开启定位 -> 则是相对于父级元素定位
<style>
body {
margin: 0;/* 去掉浏览器默认的外边距8px */
}
div {
width: 200px;
height: 200px;
background-color: cyan;
/*
开启绝对定位
1.当前元素脱离文档流
2.如果不设置位置的偏移量的话，位置不会有任何变化的
*/
position: absolute;
/*
设置定位的偏移量:
* 水平方向正值 - 向右移动
* 水平方向负值 - 向左移动
* 垂直方向正值 - 向下移动
* 垂直方向负值 - 向上移动
*/
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div></div>
</body>fixed - 固定定位,不为元素预留空间:
- 是相对于窗口来定位元素位置,脱离文档流
<style>
body {
margin: 0;
height: 1000px;
}
#d1 {
width: 200px;
height: 200px;
background-color: #83c44e;
/* 开启固定定位 - 相对于浏览器窗口的定位 */
position: fixed;
left: 100px;
top: 100px;
}
#d2 {
width: 200px;
height: 200px;
background-color: cyan;
position: absolute;
left: 500px;
top: 100px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>relative - 相对定位,不脱离文档流
- 相对定位是相对于自身元素原来的位置的定位
<style>
body{
margin: 0;
}
#d1{
width: 200px;
height: 200px;
background-color: cyan;
/* 外边距 */
margin: 100px;
}
#d2{
width: 100px;
height: 100px;
background-color: #ffac13;
/* 外边距 */
margin-left: 100px;
/* 相对定位是相对于自身元素原来的位置的定位 */
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>定位的方式解析图:
堆叠
- z-index属性值大的在上方,小的在下方,就是所z-index属性值大的覆盖小的
<style>
body{
margin: 0;
}
div{
width: 200px;
height: 200px;
}
#d1{
background-color: cyan;
/* 开启绝对定位 */
position: absolute;
/* 开启定位后设置偏移量 */
left: 150px;
top: 150px;
z-index: 2323;
}
#d2{
background-color: #ffac13;
/* 开启相对定位 */
position: relative;
/* 开启定位后设置偏移量 */
left: 50px;
top:50px;
z-index:1;
}
/*
必须是当前元素开启定位的情况下,z-index属性才会有效
当多个属性设置z-index属性时 - 值大的会覆盖值小的
*/
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>堆叠分析图:
继承于层叠
继承
- 继承就是父级元素的属性,子级元素使用可以不用设置直接使用
- 注意: CSS属性中不是所用属性都可以继承
- CSS的样式属性:
- 可继承的属性 - 指定元素的样式,同时作用其后代元素
- 不可继承的属性 - 只能作用在指定的元素
备注: 继承中有一个inherit值 - 就是是继承于祖先元素属性的意思,当子级元素的属性设置inherit值时代表继承父级元素使用的属性值.
<style>
/*
CSS的样式属性:
1. 可继承的属性 - 指定元素的样式,同时作用其后代元素
2. 不可继承的属性 - 只能作用在指定的元素
*/
body{
/*
页面中的默认的字体大小为 16px
页面中的默认的颜色为黑色
*/
font-size: 148px;
color: cyan;
}
p{
/*
inherit值 - 是继承于祖先元素属性的意思
当前样式属性的值是继承于祖先元素
*/
font-size: inherit;
}
</style>
</head>
<body>
<p>一花一世界,一叶一孤城</p>
</body>继承于层叠分析图
层叠
- 就是选择器的优先级别,当为某个选择器设置 !important 时该选择器优先级别最大
- 注意: 为某个选择器设置!important时会打乱原本选择器的优先级别的规则可能会影响整个页面布局,所以能不用就不用,知道有这个东西就行
HTML与CSS中的定位个人分享的更多相关文章
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS中的定位机制
CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...
- css中元素定位
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...
- css中的定位
上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位 position:static; ...
- HTML与CSS中的文本个人分享
文本 标题元素 注意: 在一个HTML页面中最好只使用一个<h1>标题 因为浏览器只会抓取一个多了没用 示例代码: <body> <!-- 标题元素 - <h1&g ...
随机推荐
- Openstack 实现技术分解 (4) 通用技术 — TaskFlow
目录 目录 前文列表 扩展阅读 简介 基本概念 实现样例 最后 前文列表 Openstack 实现技术分解 (1) 开发环境 - Devstack 部署案例详解 Openstack 实现技术分解 (2 ...
- 看看 Delphi XE2 为 VCL 提供的 14 种样式
看看 Delphi XE2 为 VCL 提供的 14 种样式 其实只提供了 13 个 vsf 样式文件, 还有默认的 Windows 样式, 共 14 种. 在空白窗体上添加 ListBox1 等控件 ...
- Python学习之==>模块结构调整
一.为什么要进行模块结构调整 当一个脚本中有大量的配置.方法及接口时,脚本显得十分臃肿,可读性很差.为了提高代码的易读性,可以将一个繁杂的脚本根据不同的功能放在不同的目录下分类管理,这整个过程叫做模块 ...
- 【Hibernate】---【注解】一对一
一.核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-con ...
- Scala的集合框架
1.元组 定义方式:val tp=("nana',1,1.1) 特点:集合中的数据可以是不同类型的 最多只能放22个元素 取值:通过角标取值,这里的角标是从1开始的,元组名称._角标 t ...
- HTML5 列表、表格、媒体元素
无序列表 <ul> <li>范冰冰演藏族女孩</li> <li>拍集体合影后自拍</li> <li>诗隆甜蜜出游</li& ...
- is_selected()检查是否选中该元素
is_selected()检查是否选中该元素,一般针对单选框,复选框,返回的结果是bool 值, 以百度登录页面为案例,来验证"下次自动登录"是否勾选,默认是勾选的,返回的结 果应 ...
- 【Linux开发】OpenCV在ARM-linux上的移植过程遇到的问题1---cvNamedWindow调用报错的问题
问题描述: 这个实际上是最后一部的问题,将生成的共享库文件放入到了/usr/local/opencv-arm/lib下,并且设置了LD_LIBRARY_PATH中为/usr/local/opencv- ...
- linux sed 命令 实现对文件的增删改替换查 实验
1. 统一实验文本 # 创建包含下面内容的文件,后面的操作都会使用这个文件 [root@MongoDB ~]# cat person.txt ,mike,CEO ,jack,CTO ,yy,CFO , ...
- Redis的消息订阅及发布及事务机制
Redis的消息订阅及发布及事务机制 订阅发布 SUBSCRIBE PUBLISH 订阅消息队列及发布消息. # 首先要打开redis-cli shell窗口 一个用于消息发布 一个用于消息订阅 # ...