zoukankan      html  css  js  c++  java
  • CSS--posiion学习日记

    网页的样式一般是通过css(层叠样式表)来调整,通过对css的编写,可以让网页看起来更好看。那么,要想让网页的布局看起来更好看,需要怎么来编写你的网页样式呢?

    首先,引入一个概念:普通文档流和bfc块级格式化上下文。普通文档流,通俗一点说,就是让html中的元素至上而下按顺序排列,而块级格式化上下文就是让html元素脱离普通文档流,把他们放入各自的容器当中,在布局上互不干预。

    现在在网上能够看到的网页当中,没有哪个页面不是通过BFC来制作的。

    那么,回归主题,一群元素在自己独立的空间里,是如何来布局的?

    那么,position就横空出世了,虽然float也能对元素进行布局,但绝对没有position那么自有,灵活。

    css中position属性规定了几种元素的定位方式,它的默认值为static,也就是存在于普通文档流中。

    关于position的定位机制我们来举个例子:比如,在body中有一个div元素,div中有一个p元素,那么,如果我们给div设置position的话,它就相对于document的坐上顶点来定位的,为什么呢?因为absolute的定位机制是相对于拥有positionn属性的父级元素(static除外)来定位的,如果父级没有就往更上一层寻找,直到最高层。那么div的父级就是body了,而body也是html元素,既然它没有position属性,那么div就要向更高一层的父级元素寻找,body的更高一层就是html元素了,也就是元素的最高一层,所以,position只有整个document来定位了,也就是网页页面的左顶点位置。

    那么,如果我们现在要给p元素定位,它往上一层就是div元素,而我们已经诶div元素设置了定位,所以p元素就相对于div元素的左定点来定位的。

    position三个常用值,最常出现的便是absolue(绝对定位),fixed也是绝对定位,但它是直接相对于document左顶点来固定定位的,还有相对定位relative。

    absolue:相对于父级的左顶点设置left值和top值来定位。

    relative:相对于自己的原文档流中的位置来设置left值和top值来定位。

  • 相关阅读:
    Exchange 2013与 Office Web Apps 整合
    SharePoint2013 以其他用户登录和修改AD域用户密码 功能
    sharepoint 2010 自定义页面布局
    sharepoint 2010 记录管理 对象模型
    SharePoint2010 对象模型 关联列表
    在SharePoint Server 2010中更改“我的网站”
    xenapp 6.5 客户端插件第一次安装总是跳到官网
    如何解决在Windows Server 2008 R2 上安装证书服务重启后出现 CertificationAuthority 91错误事件
    在Win7 Hyper-v虚拟机中挂接真实机的声卡
    win8 中如何删除 共享文件夹 用户名和密码
  • 原文地址:https://www.cnblogs.com/fallenangeltcc/p/4079832.html
Copyright © 2011-2022 走看看