HTML学习之四CSS盒子

CSS盒子模型

Content, padding(内补丁), border; margin（外补丁）;

计算宽度，左右内外边界，左右内外边框，内容，左右内外边距。

如果上下左右四个参数，顺序：上右下左，依次写出padding: 0,0,0,0; 两个值：上下 左右；

三个值：上 左右 下。没有值的去对面找。

Padding-left, top, right, bottom.

使用外边距时注意浏览器兼容性。

除了值为0的情况，其他所有值后面都要是像素为单位，加px。

基本上所有网站，都把padding 和margin设为0. 因为各浏览器都设置了内外边距的不同默认值。所以为了兼容性，将所有内外边距都设为0. 或都从0开始。

所以用到哪些元素，就把那些元素的默认值归零。用到哪些HTML元素，就重置他们的边距。因为他们有自己默认的边距，要控制它，就重置。

CSS模型主要通过盒子模型实现。

内容：width, height

边框：margin, padding.

继承性，有的继承，有的不能继承。

列表，符号都存在兼容性问题，所以：ul, ol {list-style:none;}都设为无。

边框border属性：border-width ； border-style ； border-color。

如果只写border，那就直接跟着三个值。

单独控制一条边：border-top。顺序一样。

margin:100px auto; 左右水平居中。

文字垂直居中：    height:50px;

line-height:50px;

CSS元素分类，块状，内联（行内）。

块状：改变：{display:block}。可以容纳内联元素和其他元素。但是排斥同一行内的其他元素。内敛元素中能容纳文本或者其他内联元素，但是宽高不起作用。

Display设置对象如何显示。

可以将某个元素从内联改为block。用display。都有默认值，有的是inline,有的是block。

背景：background:颜色 图片 平铺方式（重复） 固定方式 位置

图片默认：水平、垂直平铺。默认左上角显示。

background-color:gold;

background-image:url(../pic/bupt.jpg);

background-repeat:no-repeat; 不让它平铺。

background-position:right bottom; 设定位置。

background-position:50px 30px; 横坐标，纵坐标。

background-attachment:fixed;/scroll；背景图片是否随着背景滚动。依附方式。将图片固定在屏幕某个地方，而不是盒子某个地方。

Ie6只有HTML 和body支持这个属性。

图片的翻转效果：两张大小相同，内容不同，正常显示一张。鼠标经过显示另一张。

CSS精灵技巧，为了减少http请求。将两个颜色不同的内容一样的图片合为一张图片，调整其位置。

 

Div+css页面布局。

1.       默认。Html结构顺序。

2.       浮动属性：float:center；

3.       定位。屏幕某个位置。

#two {background:green;position:absolute；

top:50px; left: 150px;}

浮动：取消元素的霸道属性（独占一行！）后面的元素将视其不存在。只有两个：要么left要么right。

飘到父元素边界。

浮动的元素相当于消失了，原来霸占的地方就空了。后面的元素补充。存在浏览器兼容性。

浮动布局几个图片：飘起来啦！

#p1 {float:left; margin:30px;}

#p2 {float:left;margin:30px;}

#p3 {float:left;margin:30px;}

#p4 {float:left;margin:30px;}

<li><img src="../depic4.jpg" id="p1"/></li>

  <li><img src="../depic5.jpg" id="p2"/></li>

  <li><img src="../depic6.jpg" id="p3"/></li>

  <li><img src="../depic3.jpg" id="p4"/></li>

有的兼容，有的不兼容，就可能挡住了，看不到了。

清楚浮动：虽然前面的没有了，但是后面的不要占据人家的位置，仍然在自己的地方。

不允许其哪个方向有浮动。Clear：none/left/right/both

clear:both;保证不随浏览器大小改变，浮动元素相对位置改变。

常见博客，网页等布局。

#head {background:red;height:100px; }

#left {background:green;float:right;width:400px;height:300px;float:left;clear:left;}

#right {background:blue;width:200px;height:200px; clear:left;float:right;}

#foot {background:gold;height:200px; clear:left;height:50px;clear:both;}

 

#header {margin:0 auto;}默认铺满。设定宽度后，则居中。

如果让同一行的两个盒子居中，那么在外面加一个大盒子，一定要有宽度，否则默认全屏幕。

同一行的浮动同方向。

清除浮动的方法：主要对后面元素的影响。但是对父元素也会有影响。

当父元素没有指定高度是，它的子元素有浮动，其父元素的高度不会增加。

1.       额外标签法。在最底下加一个空盒子（没有内容）。<div class=""clear;> </div>强迫容器能够容纳所有浮动元素。

2.       Overflow：auto。根据子元素的需要增加宽度。Hidden:切除多余部分。Scroll显示滚动条。但是如果子元素出现定位，那就有问题了。

 

上述两种方法：等价表示：1.在大盒子最底下：<div class="clear"> </div>

2.在大盒子定义中：overflow:hidden。

效果相同。

注意：想要使用绝对定位时，要有两个条件：

1.       必须给父元素加定位属性，position:relative。

2.       给子元素加绝对定位: position：absolute。

3.       利用伪对象，after。