关于css布局的定位问题
虽然职位说是PHP程序,但实际上什么都要做些,排版当然也免不了了,以前自己做网站时就能排出网页了,但是很多东西不系统,有点走马观花,例如关于这个css布局定位的问题就是,今天特意总结了一下,
知识这东西,只有记住了,才是自己的,不能老是再这么查手册,必须记住,而不是理解了就算了。
第一关于标准文档流
1.默认不用定位的话,所有元素都是在同一个平面,既然在同一个平面就要有互相挤的概念。
2.inline-block元素和block元素是有区别的,例如span,a等就是inline-block内联元素,默认不会换行,设置宽高也没用(以前用span排版就觉得奇怪,原来是这样),而div,p,ul等元素是block块元素,默认会换行,宽度不指定会填满到父元素边界。
3.float元素是针对block块元素而言的,float后,块元素会脱离标准流,紧挨着最近的包裹元素或浮动元素边界。
absolute和relative定位的规律:
relative相对定位的规律
1.使用相对定位的块,会相对于它原本的位置,通过偏移,到达新的位置,所以如果指定了relative但是没有指定偏移,看不出有什么变化。
2.使用相对定位的块仍在标准流中(会占据原来的位置),它对父亲和兄弟盒子都没有任何影响。
absolute绝对定位的规律
1.使用绝对定位的块以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位
注意:这里如果指定了一个块属性为absolute,没指定top数值,并且父元素就是浏览器窗口,浏览器给了算出了一个默认top值,只是这个值没显示出来。
2.绝对定位的框从标准流中脱离,这意味着他们对其后的兄弟盒子的定位没有影响,其他的盒子好像就好像这个盒子不存在一样。
关于css布局的定位问题的更多相关文章
- CSS 布局经典问题初步整理
CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
随机推荐
- 影响RAKsmart服务器稳定性的相关因素
RAKsmart美国服务器近年来凭借着成熟的技术和性价比吸引着广大站长,那RAKsmart服务器稳定性怎么样呢?有什么影响因素呢?下面来了解一下吧. 因素一:服务器配置 服务器能正常运营是建立在服务器 ...
- DOM——创建元素的三种方式
document.write() document.write('新设置的内容<p>标签也可以生成</p>'); innerHTML var box = document. ...
- Ruby 命令行选项
Ruby 命令行选项 Ruby 一般是从命令行运行,方式如下: $ ruby [ options ] [.] [ programfile ] [ arguments ... ] 解释器可以通过下列选项 ...
- Android中的广播Broadcast详解
今天来看一下Android中的广播机制,我们知道广播Broadcast是Android中的四大组件之一,可见他的重要性了,当然它的用途也很大的,比如一些系统的广播:电量低.开机.锁屏等一些操作都会发送 ...
- c++ 实现元组 重载cout os 输出
#include <iostream> #include <string> using namespace std; class CAnyType //: public COb ...
- PyTorch常用函数总结
将一个tensor分到多个GPU上:torch.cuda.comm.scatter
- Spring随笔-bean装配-自动装配
Spring提供了三种装配方式 1.XML文件进行显式装配 2.java中进行显示装配 3.自动化装配 1.自动化装配的两种实现方式 1.组件扫描:Spring会自动发现应用上下文中创建的bean 2 ...
- CocoaPods管理iOS项目 2018年11月06日
一.创建Test工程项目 二.打开终端 当前pod版本(1.6.0.beta.2最新版本2018年11月06日)和gem源路径(https://gems.ruby-china.com): 1.cd+当 ...
- Apache Solr 远程命令+XXE执行漏洞(CVE-2017-12629)
Apache Solr 最近有出了个漏洞预警,先复习一下之前的漏洞 命令执行 先创建一个listener,其中设置exe的值为我们想执行的命令,args的值是命令参数 POST /solr/demo/ ...
- 8分钟带你深入浅出搞懂Nginx
Nginx是一款轻量级的Web服务器.反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用. 图基本上说明了当下流行的技术架构,其中Nginx有点入口网关的味道. 反向代 ...