CSS权威指南 - 基本视觉格式化 1
定位
定位的想法很简单元素框相对于正常位置出现在哪里。
定位:static,相对, 绝对, fixed, 继承
static就是默认的位置
相对就是相对于默认位置的偏移。原来的static定位位置依然占着。
绝对定位相对于包含块(非static的)的偏移。完全脱离文档流,原来的位置就没了。
fix相对于viewport视窗的偏移。
包含块
根元素是初始包含块,有的浏览器是html元素,有的为body。
非根元素,position为相对或者默认位置,包含块是最近祖先级的块级框、表格单元、行内块。
非根,position为绝对,包含块为最近的非static的祖先元素。
如果是块级,包含块的边界是包含块的内边界。
如果是行内,包含块是行框的边界。
如果没有祖先,包含块是初始包含块。
包含块(containing box)其实就是定位上下文。理解成给position定位的参考环境。
偏移属性
有了参考环境,在二维上,上下左右的偏移多少呢?
这个属性的值,可以为长度、百分比、auto、inherit
值可以为负数,就是反方向的偏移。
长度好理解,百分比即为包含块的值的百分比。比如top/bottom 10% 就是包含块高的百分之10,如果left/right就是宽度的。
发现了一个问题,如果一个定位为relative的元素的包含块高度未设置,应该为auto的话。top/bottom设置为百分比的值。浏览器(firefox38)会忽略掉这个百分比的值。
参考:
Last Comment Bug 260348 - Relative positioning with percentages inside auto-height containing block does not work
https://bugzilla.mozilla.org/show_bug.cgi?id=260348
CSS权威指南 - 基本视觉格式化 1的更多相关文章
- css权威指南-基本视觉格式化(水平与垂直)
1.基本概念 (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法 就是使之成为浮动或定位元素. ( ...
- CSS权威指南 - 基本视觉格式化 4
改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id=" ...
- CSS权威指南 - 基础视觉格式化 2
行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 ...
- CSS权威指南 - 基础视觉格式化 3
行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和 ...
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- CSS权威指南 - 层叠
CSS权威指南 第三章结构与层叠 - 层叠 按权重及来源排序 1. Reader important declarations 2. Author important declarations 3. ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- css权威指南读书笔记-第10章浮动和定位
这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...
- css权威指南读书笔记
今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...
随机推荐
- [Android Memory] Android Lint简介(转载)
英文原文:http://tools.android.com/tips/lint 参照文章:http://blog.csdn.net/thl789/article/details/8037473 转载 ...
- 打开genesis时一直在等待,后出现Timeout in communication read解决方法
运行输入:netsh winsock reset 然后重启电脑
- Android之多线程断点下载
本文主要包含多线程下载的一些简单demo,包括三部分 java实现 android实现 XUtils开源库实现 注意下载添加网络权限与SD卡读写权限 java实现多线程下载 public class ...
- 归并排序的分析与Java实现
归并操作(merge),也叫归并算法,指的是将两个已经排序的序列合并成一个序列的操作.归并排序算法依赖归并操作.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.归并排序 ...
- Nginx 服务器安装及配置文件详解
原文出处: Sean Chow(@SeanLoook) 欢迎分享原创到伯乐头条 Nginx 在工作中已经有好几个环境在使用了,每次都是重新去网上找博客,各种编译配置,今天自己也整理一份安装文档和 ...
- Python读写文件乱码问题
对开发者来说,最恼人的问题之一莫过于读写文件的时候,由于编码千差万别,出现乱码问题.好难快速解决啊... 最近我也遇到了这样的问题,经研究,把大致的解决思路拿出来共享. 1. python中习惯首先声 ...
- poj 3264 RMQ 水题
题意:找到一段数字里最大值和最小值的差 水题 #include<cstdio> #include<iostream> #include<algorithm> #in ...
- MATLAB学习笔记(六)——MATLAB数据分析与多项式计算
(一)数据处理统计 一.最大值和最小值 1.求向量的最大值和最小值 y=max(X); %返回向量X的最大值存入y,如果X中含有复数则按模最大的存入y [y,I]=max(X);%返回向量X的最大值存 ...
- c++ queue 顺序队列的实现
#include<iostream> #include<cstdlib> #include<cstdio> using namespace std; const i ...
- WPF/Silverlight Template使用及总结(转)
WPF/Silverlight 中的控件都有Style和Template两种属性.前者解释为样式,是用来改变控件原有属性的,比如 Button 控件的(Width,Height,Background ...