虽然职位说是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布局的定位问题的更多相关文章

  1. CSS 布局经典问题初步整理

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...

  2. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  3. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  6. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  7. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  8. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  9. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

随机推荐

  1. jq容易混淆点

    jQuery链式编程: 原:把当前元素颜色修改为红色,其余兄弟颜色不变 $(this).css("color",'red') ; $(this).siblings().css(&q ...

  2. 5.1中容器(Container)和门面(Facade)的实现

    tp5.1中引入了容器(Container)和门面(Facade)这两个新的类 官方文档已经给出了定义: 容器(Container)实现类的统一管理,确保对象实例的唯一性. 门面(Facade)为容器 ...

  3. linux 下安装mysql5.7.17

    安装前的环境准备 linux 环境准备 内核参数建议值 1.调整最大文件数限制 直接执行 ulimit -n 65535 或写入/etc/sysctl.conf  重启后生效 2.修改IO 调度器设置 ...

  4. php漂亮的分页类

    <?php    /*    * PHP分页类    * @package Page    * @Created 2013-03-27    * @Modify  2013-03-27    * ...

  5. Batch - 忽略FORFILES “no files found” error

    ref:https://stackoverflow.com/questions/16820681/suppress-forfiles-no-files-found-error Solution: Th ...

  6. Springboot 上传文件

    @PostMapping("/upload")//springboot可以直接扫描resource下的static文件夹下的静态文件 public String upload(@R ...

  7. hive shell参数

    Hive Shell参数 1.Hive命令行 语法结构 hive [-hiveconf x=y]* [<-i filename>]* [<-f filename>|<-e ...

  8. ueditor使用心得

    UEditor使用手册 配置jdk 1.6+ Apache Tomcat6.0+ Ueditor官网下载 部署 安装好jdk和apache后,我们开始部署代码 我们在apache的安装目录下,找到we ...

  9. FZU - 2295 Human life:网络流-最大权闭合子图-二进制优化-第九届福建省大学生程序设计竞赛

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 http://acm.fzu.edu.cn/problem.php?pid=2295 htt ...

  10. error C2443: operand size conflict

    #include <stdio.h> void main() { int a=98; __asm {     mov al,a     and al,11011111B     mov a ...