web前端(12)—— 页面布局2

本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了

 

定位,position属性

定位有三种:

  • 相对定位
  • 绝对定位
  • 固定定位

 

相对定位,position:relative

相对定位的意思就是相对于自身元素原来的位置定位

设置相对定位之后,才可以使用四个方向的属性: top、bottom、left、right

相对定位的特性:

不脱标

形影分离

依旧占原来的位

 

作用:

微调元素位置

做绝对定位的参考(父相子绝)绝对定位会说到此内容。

 

参考点:

自己原来的位置做参考点

 

绝对定位,position:abslute

 绝对定位的意思就是以某讴歌参考点(往往是父级元素)作为定位基点进行设置

 

特性:

  • 脱标
  • 做遮盖效果,提成了层级。
  • 设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高
  • 当设置top属性时:绝对定位参考点是以页面左上角(跟浏览器左上角区分)作参考进行调整
  • 当设置bottom属性时:绝对定位参考点是以首屏左下角作参考进行调整

 

参考点:

1.单独一个绝对定位的盒子

  • 当使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
  • 当使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

2.以父辈盒子作为参考点

  • 父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
  • 如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
  • 不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

 

注意:

  • 父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
  • 绝对定位的盒子无视父辈的padding

绝对定位的盒子居中:

设置绝对定位之后,margin:0 auto不起任何作用,如果想让绝对定位的盒子居中:

 

设置子元素绝对定位,然后left:50%; margin-left:元素宽度的一半,实现绝对定位盒子居中(可以当做公式记下来)

 

*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
position: relative;
left: 50%;
margin-left: -480px;   
}

 

插一句,对文字内容的居中,例:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width:400px;
height:400px;
/*background-color:rgba(120, 217, 239, 0.64);*/
background: rgb(120, 217, 239);
opacity: 0.64;
}
p{
height: 20px;
background: red;
padding: 5px 0px;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<p>test</p>
</div>
</body>
</html>

 

  

效果:

 

对文字居中的公式:

p{
height: 20px;
background: red;
padding: 5px 0px;
line-height: 20px; /*垂直方向上的上下居中,其值和高度的值相同即可*/
text-align: center;/*水平方向的左右居中*/
}

 

固定定位,position:fixed

 固定当前的元素不会随着页面滚动而滚动

特性:

  • 脱标
  • 遮盖,提升层级
  • 固定不变

参考点:

设置固定定位,用top描述。那么是以浏览器的左上角为参考点,如果用bottom描述,那么是以浏览器的左下角为参考点

作用: 

  • 返回顶部栏
  • 固定导航栏
  • 小广告

例:

下面这是淘宝页面右边的:其实就用了固定定位

 

父相子绝

指父元素设置相对定位,子元素设置绝对定位,这种是最长用的搭配。这个父元素不一定就是直系父元素,也可以是祖宗元素

 

父绝子绝

指父元素和子元素都设置绝对定位,此搭配没有实际意义,说白了这个父元素没有起什么作用,还不如就直接一个元素设置绝对定位,开发中也基本不会这么用

 

父固子绝

 

指父元素设置固定定位(设置固定定位的元素尽量是选择父元素,防止因为元素有属性margin和padding造成冲突),子元素设置绝对定位

 

以上三种搭配,都是以父元素作为参考点进行布局

 

z-index

用来设置定位的层级优先级,值为大于1的数字,值越大,优先级越高

  • z-index 值表示谁压着谁,数值大的压盖住数值小的
  • 只有设置定位的元素,设置z-index才有效果
  • 浮动元素不能使用z-index
  • z-index值没有单位,就是一个正整数,默认的z-index值为0。
  • 如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人。
  • 定位了元素,永远压住没有定位的元素。
  • 从父现象:在两对父元素与子元素中,如果是其两个子元素相比,如果父元素的z-index会覆盖子元素的z-index值

 

好的,css样式介绍完了,剩下的就是各位朋友自己下去练手了,怎么练手呢,网上找一个网站,自己动手做一个一模一样的出来,然后你基本掌握css了

 

后面就进入javascript了,朋友们,我们的路还很长,我更新web前端方面的知识是为了给Python高级课程的web框架做准备的,当然也是从零基础开始介绍的web,如果朋友您只是想学web开发,一样适用的

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

51Nod.1766.树上最远点对(树的直径 RMQ 线段树/ST表)

题目链接 \(Description\) 给定一棵树。每次询问给定\(a\sim b,c\sim d\)两个下标区间&#xff0c;从这两个区间中各取一个点&#xff0c;使得这两个点距离最远。输出最远距离。\(n,q\leq10^5\)。 \(Solution\) 一个集合直径的两端点&#xff0c;在被划分为两个集合后一定是两个…

Web应用程序中的Spring JDBC入门

在上一篇文章中&#xff0c;我已经向您展示了如何设置基本的Spring 3 MVC Web应用程序 。 重复使用该项目设置作为模板&#xff0c;我将向您展示如何增强它以与JDBC一起使用。 有了它&#xff0c;您可以存储和检索数据库中的数据。 我们将通过Spring添加一个新的控制器和一个数…

python pyplot中axis_Python Pyplot xaxis未显示在图形上

pyplot未在图形上显示x轴&#xff1a;import pandas as pdimport matplotlib.pyplot as pltdf pd.read_csv(sitka_weather_2014.csv)df[AKST] pd.to_datetime(df.AKST)df[Dates] df[AKST].dt.strftime(%b %d, %Y)df.set_index("Dates", inplace True)# Plot Dataf…

为什么dubbo的调用重试不建议设置成超过1

前面提到过&#xff0c;重试是靠ClusterInvoker来保证的&#xff0c;不同的Cluster在调用失败的时候 做不同处理 比如默认的FailoverClusterInvoke的doInvoke方法里面&#xff1a;int len getUrl().getMethodParameter(invocation.getMethodName(), Constants.RETRIES_KEY, Co…

web前端入门学习(纯干货)

web前端怎么样才能入门&#xff0c;首先我们要从什么是初级web前端工程师说起&#xff1a; 按照我的想法&#xff0c;我把前端工程师分为了入门、初级、中级、高级这四个级别&#xff0c; 入门级别指的是了解什么是前端&#xff08;前端到底是什么其实很多人还是不清楚的&…

用BlockingExecutor限制任务提交

JDK的java.util.concurrent.ThreadPoolExecutor允许您将任务提交到线程池&#xff0c;并使用BlockingQueue来保存提交的任务。 如果您要提交数千个任务&#xff0c;请指定一个“绑定”队列&#xff08;即最大容量的队列&#xff09;&#xff0c;否则JVM可能会耗尽内存。 您可以…

[校内模拟题2]

水题 但是原地螺旋炸裂 都不好意思贴代码了QWQ enc 【问题背景】 zhx 和他的妹子聊天。 【问题描述】 考虑一种简单的加密算法。假定所有句子都由小写英文字母构成&#xff0c; 对于每一个字母&#xff0c; 我们将它唯一地映射到另一个字母。 例如考虑映射规则&#xff1a;a-&g…

AJAX初识(原生JS版AJAX和Jquery版AJAX)

一、什么是JSON 1.介绍JSON独立于语言&#xff0c;是一种与语言无关的数据格式。JSON指的是JavaScript对象表示法&#xff08;JavaScript Object Notation&#xff09;JSON是轻量级的文本数据交换格式JSON具有自我描述性&#xff0c;更易理解JSON使用JavaScript语法来描述数据对…

python保存为xlsb_Read XLSB File in Pandas Python

问题There are many questions on this, but there has been no simple answer on how to read an xlsb file into pandas. Is there an easy way to do this?回答1:Hi actually there is a way. Just use pyxlsb library.import pandas as pdfrom pyxlsb import open_workboo…

内存不足而没有OutOfMemoryError

这实际上是最初发布于2010年的帖子的转世。 昨天&#xff0c;当听到我们的工程师咒骂一个特别令人讨厌的错误时&#xff0c;闪回发生了。 当诅咒停止时&#xff0c;我走过去核实我的怀疑。 瞧&#xff0c;我是正确的–情绪波动是由应用程序用尽了堆空间导致的&#xff0c;但死于…

人工智能第二星期总结-------纵里寻它千百度

2018-07-28 第二周&#xff1a; 此时此刻我怀着无比沉重的心情在这里做一周的学习检讨工作 这星期依此就开始讲到了函数&#xff0c;话说函数可是python里面的钟头戏&#xff0c;不仅可以节约代码&#xff0c;还可以把代码重复使用&#xff0c;只要后面轻轻松松就可以搞定啦&am…

个人作业——软件产品案例分析

个人作业——软件产品案例分析 第一部分 调研&#xff0c;评测 评测&#xff1a; 第一次上手体验 第一眼看上去功能很全面&#xff0c;但是到点开来发现功能大部分没有实现&#xff0c;体验不太好。 缺陷Bug情况 课表查询 bug描述&#xff1a;课表查询没有课表结果,点进去当前周…

java hashtable put_Java Hashtable put()方法与示例

哈希表类put()方法put()方法在java.util包中可用。put()方法用于将给定的键元素(key_ele)放入给定的值元素(val_ele)。put()方法是一个非静态方法&#xff0c;只能通过类对象访问&#xff0c;如果尝试使用类名访问该方法&#xff0c;则会收到错误消息。put()方法在放置键/值对时…

HTML之表单

表单&#xff1a; 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如&#xff1a;文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> . input 元素 . </form>…

将AspectJ与NetBeans平台开发集成

您是否正在使用NetBeans平台开发项目&#xff1f; 您愿意使用AspectJ来使用AOP吗&#xff1f; 您不知道如何将AspectJ编译器集成到NetBeans的内部版本中&#xff1f; 如果您的回答是“是”&#xff0c;则此帖子适合您。 我决定写这篇技术文章&#xff0c;是因为我在寻找该解决…

Linux CentOS 6.5 使用自带jdk修改环境变量

来源:https://www.cnblogs.com/zhenxiqia/p/9049290.html Linux CentOS 6.5 使用自带jdk修改环境变量 首先声明&#xff0c;默认jdk指我们安装完CentOS后系统自带jdk&#xff0c;自己下载安装的jdk只需要下载&#xff0c;解压即可&#xff0c;之后步骤与此文一致 1.查看我们默认…

第二阶段冲刺10

基本的代码已经编写完成&#xff0c;游戏的功能已经完善&#xff0c;基本上已经是一个合格的软件了&#xff0c;这次为期10天的冲刺很充实&#xff0c;我们切实的完善了软件&#xff0c;学会了很多&#xff0c;也可以更好的融入团队中了。团结就是力量&#xff0c;十天前我们还…

java如何找重复数字_Java如何找出数组中重复的数字

题目描述&#xff1a;找出数组中重复的数字&#xff0c;具体内容如下在一个长度为n的数组里的所有数字都在 0~n-1的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。例如&…

页面中添加锚点的几种方式

本文档创建时间:2018-11-7 15:52:28 方法一,使用a标签添加 通过设置a标签的href属性,跳转到页面中指定id标签的位置a标签的href属性值前要增加#来作为标识,表示是在当前页面的内部跳转 简单的案例: 1 <html>2 <head></head>3 <body>4 <!--设置锚点…

休眠事实:有利于双向集vs列表

Hibernate是一个很棒的ORM工具&#xff0c;它极大地简化了开发&#xff0c;但是如果您想正确地使用它&#xff0c;则有很多陷阱。 在大中型项目中&#xff0c;具有双向父子关联非常常见&#xff0c;这使我们能够浏览给定关系的两端。 在控制关联的持久/合并部分时&#xff0c…