CSS学习笔记

三列布局(中间自适应):

HTML:

<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的,你可以领会要点,举一反三。</div>
<div class="right">right</div>

CSS:

.left{ width:200px; height:600px; background:#ccc; position: absolute; left:0; top:0}
.main{ height:600px; margin: 0 300px 0 200px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}



水平居中:

.center{margin: 0 auto;}

盒子模型:

CSS学习笔记_第1张图片

清除浮动的常用方法:

  1. clear 属性 ---- 常用clear:both;

    clear:left; 或者 clear: right;

  2. 同时设置width:100%;(或固定宽度) + overflow:hidden;


position:

相对定位()relative:

  1. 相对于自身原有位置进行偏移

  2. 仍处于标准文档流中

  3. 随即拥有偏移属性和z-index属性


绝对定位(absolute):

  1. 建立了以包含块为基准的定位

  2. 完全脱离了标准文档流

  3. 随即拥有偏移属性和z-index属性

当 未设置偏移量 :

  1. 无论是否存在已定位祖先元素,都保持在元素初始位置

  2. 脱离了标准文档流

当 设置偏移量 :

  1. 无已定位祖先元素,以<html>为偏移参照基准

  2. 有 已定位祖先元素,以距离其最近的已定位祖先元素为偏移参照基准


如果 父级 元素为静态定位,则设置为绝对定位的子元素以根元素为基准进行偏移,也就是 html 元素



text-indent: 200px;  //文本缩进



垂直居中:

line-height 设置跟 height 同样的值。


absolute与fixed相同点

第一:完全脱离标准文档流

第二,未设置偏移量时,都定位在父元素左上角

        偏移量:元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)


absolute与fixed不相同点

absolute:

    1. 无已定位祖先元素,以<html>为基准偏移

    2. 已有定位祖先元素,以距离最近的、已定位的祖先元素为基准偏移

fixed:(位置固定不变,兄弟元素可从下面穿过)

    1. 未设置偏移量:

        1.1 有已定位祖先元素:以祖先元素为基准定位

        1.2 无已定位祖先元素:以浏览器窗口为基准定位

    2. 设置了偏移量,有无已定位祖先元素:都以浏览器可视窗口为基准进行偏移



表现形式(产生滚动条时)

absolute:

    1. 位置会随滚动条变化

fixed:

    1. 位置固定,不会随滚动条变化   

    2. 被他遮盖的元素,可以从其下穿过


在对元素设置固定定位时,如果希望本元素包含其父包含块中,不需要对其设置偏移量。

你可能感兴趣的:(CSS学习笔记)