1、

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

2、

CSS position 属性

通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

3、自己总结
  1. 绝对定位的元素可以任意移动,但是得有一个参考对象就是相对定位元素,如果将一个元素设置为绝对定位元素,如果它没有对应的相对定位元素的定位,他会将浏览器的窗口作为一个参考对象
  2. 元素类型:行间元素(font它本身没有高度和宽度的,依赖于里面内容的宽高,可以将行间元素变化为块级元素,display:block)、块级元素、行间块级元素
  3. 水平方向居中:text-align:center ;  垂直方向居中加行高 line-height:30px;

<1> 孩子为相对定位,不论父亲为什么定位都是相对于父亲

<2> 父亲除了静态定位,只要有定位,孩子都是相对于父亲

静态定位不能用Top、left等的属性

php工作笔记5-css定位的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  3. CSS自学笔记(7):CSS定位

    很多时候,我们需要对一些元素进行自定义排序.布局等,这是就需要用到CSS的定位属性了,用这些属性对一些元素进行自定义排序.布局等操作,可以改变浏览器默认的死板的排序. CSS定位的功能很容易理解,它允 ...

  4. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  5. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  6. HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5学习笔记(八):CSS定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位. 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠.定位的基本思想很简单 ...

  8. web前端学习(三)css学习笔记部分(2)-- css定位+盒子操作

    3.CSS定位 3.1定位 1.CSS定位: 改变元素在页面上的位置 2.CSS定位机制 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局 属性 描述 position 把元素放 ...

  9. 2016年第2周读书笔记与工作笔记 scrollIntoView()与datalist元素

    这一周主要是看了html5网页开发实例与javascript 高级程序设计,供以后翻阅查找.  html5网页开发实例第1章与第二章的2.1部分: 第1章内容: html5在w3c的发展史. 浏览器的 ...

随机推荐

  1. 在Linux操作系统下备份恢复技术的应用 转自https://yq.aliyun.com/articles/50205?spm=5176.100239.blogcont24250.9.CfBYE9

    摘要: 安全防护:在Linux操作系统下备份恢复技术的应用  原文参见:http://linux.chinaunix.net/techdoc/system/2005/12/19/925898.shtm ...

  2. coffeeScript中类的继承[学习篇]

    只是在看深入浅出coffeescript中感觉真的很好,不光是coffe写法简单,生成的js也值得学习,废话不多说了,直接抄个书上的例子 class Pet constructor: -> @i ...

  3. 浅入浅出“服务器推送”之一:Comet简介

    最近有个项目,其中有项需求要从服务器端主动向客户端推送数据,本以为很简单,但在实际做的过程中发现很棘手,并没有想象中的简单.从网上搜索学习,发现主流讲的还是Ajax的长轮询技术或者流技术,websoc ...

  4. Rails 4.0 移除了 XML 参数解析器。若要使用请加入 actionpack-xml_parser

    拜读了用 Rails 搭建微信公众平台 API之后发现, params[:xml]这个办法在Rails 4里面已经被办掉了,于是就看了一下Rails 4的新特性发现XML Parameter pars ...

  5. [经验交流] docker in docker 的变通实现方法

    最近在做CI持续集成环境的容器化,其中一个工作是:在容器中构建容器镜像. 对于这个需求,网上有一些 Docker in Docker 的方法,具体需要修改宿主机的配置.这种方式在单机环境下.对安全要求 ...

  6. maven 项目无法发布,无法编译的解决办法

    1 Web Deployment Assembly信息都合理2 重新clear项目,让JAVA代码重新生成.class文件在target目录中

  7. Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化

    Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomc ...

  8. linux下网站搭建

    我们知道windows网站搭建一般是:IIS+Asp+Sqlserver,而 linux网站搭建是:Apache+php+Mysql.两者之间个有千秋,但是为什么我们许多的门户网站搭建都选择linux ...

  9. C#接口显示实现在实际开发中的作用

    摘要 任何一个C#入门的程序员都知道——当一个类型在实现接口的时候,有两种方法实现:显式实现.隐式实现.而且大家也都知道,当一个类型实现的两个接口存在相同成员定义时,显示实现可以解决这种情况. 但是, ...

  10. ssh 服务器之间公钥认证方式的配置

    前言 项目中需要编写脚本在服务器之间上传或者下载文件,但没有相关服务器来测试脚本,于是就着手安装两台server,然后用ssh的相关命令去配置server之间公钥认证登录. 步骤 1. 在VM Box ...