css基础--2

CSS框模型(Box Model)

box.png

内边距

padding.png

边框

border.png

外边距

margin.png

外边距合并

{AZ2_TE(WQ{A0R58U)LR(6M.png

行级元素和块级元素

• 行级元素

  strong span em img a input form

• 块级元素

  div p h1~h6 表格 列表

• display

  inline block none;

宽、高、背景色

width : 200px
height : 200px
background-color : #ff7400;

溢出

overflow

visible 默认属性
scroll 滚动条
auto 自动
hidden 隐藏

overflow.png

背景图片

背景图片

background-image: url(imf/bg.gif);

背景重复

background-repeat: 
repeat -x；
repeat -y;
no-repeat;

背景定位

background-position:50px 100px;
background-position:top;
background-position:50% 50%

背景固定

background-attachment:fixed；

超链接

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

表格

内容水平对齐

text -align: left;

内容垂直对齐

vertical-align : middle;

消除表格双边框

table { border -collapse : collapse}

css布局--定位

• 相对定位

  不脱离文档流

  position: relative;

• 绝对定位

  脱离文档流 ，方向默认针对body，除非父容器也是定位

  position: absolute;

css布局--浮动

语法

 .divbox {
        background-color: #2e5eb6;
        height: 230px;
        float: left;
    }

浮动会脱离文档流，用overflow可以解决

 .container {
            overflow: auto;
        }
    无论container块中元素怎么浮动，别的元素始终进入不了container中。

布局学习网站

http://www.learnlayout.com/