关于网页设计的css+html相对定位和决定定位的理解
css中有很多定位,其中最重要的是相对定位和绝对定位;
定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握;
首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近的一个相对定位的元素,进行相对定位,所以一个元素准备使用绝对定位,首先第一步就必须检查
他最近的父级元素是否是相对定位,如果没有设置需要设置,不然这个绝对定位元素会去找自己元素的上上级元素(相对定位的元素),来进行定位。
所有这里给出几个结论:
相对定位和绝对定位都是相对元素(自己或者别的)元素进行定位,其中相对定位就是普通文档流,然后设置top,等等就是相对自己本来的位置进行调整位置
绝对定位就是相对于父级元素进行定位,好像更含有相对位置的意思,却叫绝对定位这个名字
其实这个也不难理解:
相对于别人的位置就是绝对的位置,相对于自己的永远是相对的,
就像物理中位置,相对别的位置(0坐标)就是绝对位置,相对自己的位置就是相对位置,
自我永远是相对的,相对别人是绝对的,物理中的距离是相对的!
关于网页设计的css+html相对定位和决定定位的理解的更多相关文章
- 网页设计(CSS&JS)
实验一 简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...
- HTML学习笔记——标准网页设计+使用CSS、Javascript
一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离. 内容 + 表现 = 页面 --- 即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...
- 网页设计——7.css的入门
css的介绍 div+css的设计: 什么是div? 理解示意图: 实例操作: 这里就要用到div+css的布局操作 先写一个html文件,见下图: <html><head>& ...
- 网页设计简史看设计&代码“隔膜”
本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- 手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- 【转】手机web——自适应网页设计(html/css控制)
手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
随机推荐
- 查询Date时时间查询不出来
今天项目开发时,遇到了一个小问题,就是使用Hibernate用sql查询时,查询不出来时间部分, 网上没有找到答案,最终使用:to_char(sx.createtime,'yyyy-MM-dd hh2 ...
- 谷歌chrome 插件(扩展)开发——谈谈安装
chrome extension 安装的方式简单,打包方式也是非常简单的. 官方给出了三种安装方式: Chrome Web Store:把你的扩展程序上传到Chrome Web Store, &q ...
- Java并发编程实战(chapter_1)(原子性、可见性)
混混噩噩看了很多多线程的书籍,一直认为自己还不够资格去阅读这本书.有种要高登大堂的感觉,被各种网络上.朋友.同事一顿外加一顿的宣传与传颂,多多少少再自我内心中产生了一种敬畏感.2月28好开始看了之后, ...
- js备战春招の四の正则表达式详解
正则表达式语法规则:/正则表达式主体/修饰符(可选)什么是正则表达式:正则表达式是用于匹配字符串中字符组合的模式.在 JavaScript中,正则表达式也是对象.这些模式被用于 RegExp 的 ex ...
- SDN 网络系统之 Mininet 与 API 详解
SDN 网络系统之 Mininet 与 API 详解 Mininet 是轻量级的软件定义网络系统平台,同时提供了对 OpenFlow 协议的支持.本文主要介绍了 Mininet 的相关概念与特性,并列 ...
- CentOS 7主机名的弯弯绕绕
在CentOS 6中,修改主机名方式很简单,临时修改主机名使用hostname命令,永久修改主机名直接写进文件/etc/sysconfig/network中即可. 但在CentOS 7中,主机名就没那 ...
- mysql备份并转移数据
一.使用mysqldump进行备份 直接输入命令mysqldump会发现提示命令不存在,是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这个目录下, 自然会找不到命令,并报错.知道了问题 ...
- Online Judge(OJ)搭建——1、项目介绍
项目名 Piers 在线评测 项目需求 用户: 获取题库.题目的相关信息. 在线对代码进行编译.执行.保存.返回运行(编译)结果. 总体题目评测成绩查询. 用户信息服务,包括注册.登录.忘记密码.邮箱 ...
- 2017/11/25 2D变换
2D变换 一.盒模型解析模式 1.box-sizing:盒模型解析模式 1)content-box:标准盒模型(和css2一样的计算) 宽度和高度之外绘制元素的内边距和边框 width,height外 ...
- Java设计模式-合成模式
合成模式有时也叫组合模式,对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性.掌握组合模式的重点是要理解清楚 "部分/ ...