虽然职位说是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. 关于springmvc与ajax的交互-开发记录

    每次都栽在这个地方,好衰! 在jsp页面的<form>标签设置了action="请求url" ,button那里用js进行监听,点击触发ajax方法,将前台数据传到后台 ...

  2. Ansible介绍

    第一章 ansible服务介绍 1.1 ansible批量管理服务概述 是基于python语言开发的自动化软件工具 是基于SSH远程管理服务实现远程主机批量管理 1.2 ansible批量管理服务意义 ...

  3. scala自定义隐式转换

    Scala自定义隐式转换 一.编写隐式转换类 /** * Author Mr. Guo * Create 2019/4/20 - 17:40 */ object StringImprovments { ...

  4. HttpUrlConnection类基本使用

    这个类用来模拟浏览器向服务器发送请求和接收响应 注意: HttpUrlConnection对象简称huc对象 1)获取huc对象向url构造中传递url字符串,并调用openconnection方法即 ...

  5. Jmeter-【JSON Extractor】-响应结果中二级key取值

    一.请求返回样式 二.取chapter的值 三.查看结果

  6. 【转载】WebRTC基于GCC的拥塞控制(上) - 算法分析

    实时流媒体应用的最大特点是实时性,而延迟是实时性的最大敌人.从媒体收发端来讲,媒体数据的处理速度是造成延迟的重要原因:而从传输角度来讲,网络拥塞则是造成延迟的最主要原因.网络拥塞可能造成数据包丢失,也 ...

  7. flume的安装和使用

    1.下载 [linyouyi@hadoop01 software]$ wget https://mirrors.aliyun.com/apache/flume/1.9.0/apache-flume-1 ...

  8. 禁用NX软件启动欢迎界面[转载]

    环境变量UGII_BACKGROUND_URL  NONE 转载自https://www.ugnx.net/wt/414

  9. 从[id setValue: forKey:]了解KVC

    <Objective-C基础教程> P224页有详细介绍 下边是apple官网的简单介绍 和一个应用的例子. KVC就是Key-value coding,大意是允许通过一个Key来读写一个 ...

  10. (转)AttributeError: module 'tkinter' has no attribute 'messagebox'

    AttributeError: module 'tkinter' has no attribute 'messagebox' improt tkinter from tkinter import * ...