css progress04&css progress05 - 草稿

  css progress04

border 边框

margin 外边距

padding 内边距

element  元素

和写一些border边框

border-top  宽度 样式  颜色/10px solid red

去掉图片边框的写法  border：0 none;

和写pandding 上右下左

内边距享有背景色

margin  有top,bottom,right,left 这几个属性性 也可以使用margin代替所有的

margin

盒子的设置宽和高都是内容的宽和高

第一种外边距合并

当两个div的外边距不一样时，取决于大的哪一个

如：margin：20px;    margin:30px;   则外边距合并为30 px;

第二种外边距合并

标准流：水平 从左到右    垂直  上到下

float   浮动的div不占用标准文档流，且下一个div显示内容不受影响，影响排版

浮动特性

overflow： 当盒子内的元素超出自身的大小时，内容就会自动溢出（除i6浏览器外）

css progress05

.header+.main+.asider+.footer  按tab键可完成

隔墙法，清楚footer的左右浮动

清楚浮动：隔墙法        在footer之前加一个空表div标签，div清楚两边的浮动，则footer就正常显示

相对定位（relative）:是指相对于自身原始的位置向左或向右移多少个像素

绝对定位（absolute）:如果div的父类定位是position：static那么就接着往上一层找，一直找到非static父类哪里（俗称：子绝父加/*加relative*/）

 

float:right也可以达到效果，但是会影响文字排版

绝对居中显示案列           margin：0 auto；

Z-index层叠属性

z-index   越大越往前，会遮挡住比它小的数值，且数值没有单位

固定定位：fixed

background-image:url(image/a.png)   background-repeat:no-repeat//图片不重复显示

背景图片优先级高于背景颜色

bacground-posittion 

EX29不支持ie6浏览器，对代码进行更改后

css规避脱标 

（不使用浮动元素就可以实现居中，右上角，左上角）

优先2选择标准流，其次使用float，最后选择定位

margin-left；   左侧外边距自动

display 与  vertical-align需配合使用，控制图片的上下位置 如图

CSS元素可见性

CSS标签包含

1、内联元素不能包含块元素，它只能包含其他的内联元素，比如说：span>div   is wrong

div>div>ul>li>div  is true

2、有些块元素没能放其他块级元素

标题标记的

,

,

,

,

标签不能嵌套div标签

3、a标签不能嵌套a和input标签，能嵌套的标签像等等

CSS挤走盒子的方法

使用padding  or  margin 的方法将自己的child变换成自己想要的样子

CSS精灵技术

css精灵技术其实是将网页中的一些背景图像整合到一张大图中

inline-block消除间隙的方法

第一种方法就是font-size：0但会使所有的文字消失，回头设子孩子的font-size:14px;则文字正常使用

第二种方法：第二种方法：第二种方法：使用HTML注释消除空格法，或者将所有的span元素放在一行显示

第三种使用float方法

第四种放大：用letter-space或者是word-sapce调整

第五种：margin负值法

css圆角

height:100px; width:100px; border-radius:50px;  圆角半径如果是正矩形边的一半，则显示的是圆形

css边框的样式设置

加了border-collapse:collapse;之后，显示表格内的元素