Fixed vs. absolute
来源： https://stackoverflow.com/questions/24155271/fixed-vs-absolute
absolute
absolute position to whole window
来源： https://stackoverflow.com/questions/28340360/absolute-position-to-whole-window
Python : getcwd and pwd if directory is a symbolic link give different results
问题 If my working directory is a symbolic link, os.getcwd() and os.system("pwd") do not give the same result. I would like to use os.path.abspath(".") to get the full path of my working directory (or a file in it), on purpose, not to get the same result than os.path.realpath(".") . How to get, in python 2.7, something like os.path.abspath(".", followlink=False) ? Example : /tmp is a symbolic link to /private/tmp cd /tmp touch toto.txt python print os.path.abspath("toto.txt") --> "/private/tmp
Horizontal scrollbar appears with overflow content on right but not on left?
问题 I have an element with position: absolute in body with some part of it to the left from left side. #test{ position: absolute; height: 100px; width: 100px; left: -50px; background-color: lime; } I expect that horizontal scrollbar should appear allowing to scroll the document to the hidden part of the element, but it doesn't. So, I have some questions about the case: Why it happens so, why scrollbar doesn't appear (it works fine with symmetric layout on the right side)? Is it ever possible to
css 迷惑的position
迷惑的position 小加发现实际开发中position使用频率很高,但很多人却对position不是很了解,导致开发中出现各种问题,现在让我门一起来看看这个迷惑的position吧~ static 元素未定位，默认出现在普通流中，即元素从左到右，从上到下的方式布局～ HTML <div class="section"> <h3 class="section__title">Static - 普通流</h3> <div class="section__boxes row text-center"> <div class="header-box col-xs-12"> header box </div> <div class="left-box col-xs-4"> left box </div> <div class="right-box col-xs-8"> right box </div> <div class="bottom-box col-xs-12"> bottom box </div> </div> </div> CSS .section { margin-bottom: 100px; } .section__boxes { font-size: 22px; } .header-box { background-color: #0981B2; height:
Html position（static | absolute | fixed | relative）定位
语法： position : static | absolute | fixed | relative 参数： static : 无特殊定位，对象遵循HTML定位默认规则 absolute : 绝对定位。将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性进行绝对定位。而其层叠通过 z-index 属性定义。此时对象不具有 边距 ，但仍有 补白 和 边框 。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占 relative : 相对定位。对象不能想绝对定位一样层叠，但可依据 left ， right ， top ， bottom 等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。 positon 名称 (1) 是否将对象脱离文档流 (2) 偏移参照对象 偏移属性 (3) 原先位置是否会被其他元素占用 (4) 是否 能通过z-index层叠 absolute 绝对定位 是 相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移（即body左上角坐标原点） left ， right ， top ， bottom 是 是 relative
CSS 布局模型
css布局模型 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上。又不同于我们常说的 CSS 布局样式或 CSS 布局模板。假设说布局模型是本。那么 CSS 布局模板就是末了。是外在的表现形式。 CSS包括3种主要的布局模型。用英文概括为：Flow、Layer 和 Float。 在网页中。元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer） 流动模型 先来说一说 流动模型 ，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是依据流动模型来分布网页内容的。 流动布局模型具有2个比較典型的特征： 第一点。 块状元素 都会在所处的 包括元素内 自上而下按顺序垂直延伸分布，由于在默认状态下，块状元素的宽度都为 100% 。实际上。块状元素都会以行的形式占领位置。如右側代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 第二点，在流动模型下。 内联元素 都会在所处的包括元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 浮动模型 块状元素这么霸道都是独占一行，假设如今我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就能够实现这一愿望。 不论什么元素在默认情况下是不能浮动的，但能够用 CSS 定义为浮动，如
CSS布局模型
css布局模型 布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float) 3、层模型（Layer） 1.流动模型 先来说一说 流动模型 ，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： （1）块状元素 都会在所处的 包含元素内 自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为 100% 。实际上，块状元素都会以行的形式占 据位置。如下代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>流动模式下的块状元素</title> <style type=
css布局模型
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但 布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板 。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型： 1、 流动模型 （Flow） 2、 浮动模型 (Float) 3、 层模型 （Layer） 流动模型（一） 流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 例如： 运行结果为： 流动模型（二） 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。 运行结果为： 浮动模型 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？设置 元素浮动
CSS布局（二）
本节内容： position、 float、 clear、 浮动布局例子、 百分比宽度 position CSS中的position属性设置元素的位置。属性值：static、relative、fixed、absolute。 static static属性是默认值。任意的position:static；的元素不会被特殊的定位。一个static元素表示它不会定位，一个position属性被设置为其他值的元素表示它会被定位。 relative Relative表现的和static一样，除非添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom、left属性会使其偏离正常位置。 其他的元素则不会调整位置来弥补它偏移后剩下的空隙。以上两个类分别为relative1和relative2的div都设置了position:relative;属性，当relative2设置了top:-20px;时，可以看见它相对于自己原本的位置发生了改变，向上移了20个像素（因为这个值是负值，如果是正值，则向下移动20px）；后又设置了left:20px;属性（left:20px；意思是距离左边20px，而不是向左移动20px），所以该div又向右移动20px。 记住position:relative;属性如果不设置top、bottom、left