CSS学习笔记:排版布局属性

来源:互联网 发布:nginx 图片服务器架构 编辑:程序博客网 时间:2024/03/29 14:33

1、定位属性

属性名称        属性值列表                               描述position:    static | relative | absolute | fixed    默认|相对与自身|相对于祖先|相对于窗口z-index:     internal                                在文档中的层叠索引,越大就越前top:        internal                                相对于参照物距离顶部的偏移距离right:      internal                                相对于参照物距离右边的偏移距离bottom:     internal                                相对于参照物距离底部的偏移距离left:       internal                                相对于参照物距离左边的偏移距离

2、布局属性

属性名称        属性值列表                           描述dispaly:    none | block | inline               标签显示开关,不显示不占用物理空间float:      none | left | right                 块标签浮动属性clear:      none | left | right | both          清楚块标签浮动属性visibility: visible | hidden                    标签显示开关,隐藏后依然占用物理空间overflow:   visible | hidden | scroll | auto    内容溢出容器大小时处理方式overflow-x: visible | hidden | scroll | auto    内容横向溢出容器大小时处理方式overflow-y: visible | hidden | scroll | auto    内容纵向溢出容器大小时处理方式

3、大小属性

属性名称     属性值列表  描述width:      internal    容器宽度大小,单位可以为px或百分比min-width:  internal    容器最小宽度大小,单位可以为px或百分比max-width:  internal    容器最大宽度大小,单位可以为px或百分比height:     internal    容器高度大小,单位可以为px或百分比min-height: internal    容器最小高度大小,单位可以为px或百分比max-height: internal    容器最大高度大小,单位可以为px或百分比

4、边距属性

属性名称            属性值列表               描述margin:         auto | internal         外边距距离,top right bottom leftmargin-top:     auto | internal         外边距顶部距离margin-right:   auto | internal         外边距右边距离margin-bottom:  auto | internal         外边距底部距离margin-left:    auto | internal         外边距左边距离padding:        auto | internal         内边距距离,top right bottom leftpadding-top:    auto | internal         内边距顶部距离padding-right:  auto | internal         内边距右边距离padding-bottom: auto | internal         内边距底部距离padding-left:   auto | internal         内边距左边距离

5、边框属性

属性名称            属性值列表border-width:     internalborder-style:     none(无边框) | hidden(隐藏) | dotted(点) | dashed(虚线) | solid(实线) | double(双线) | groove(3D凹槽) | ridge(3D凸槽) | inset(3D凹线) | outset(3D凸线)border-color:     #FF00FFborder: width  style  color

Sample code:

<!DOCTYPE html><html><head>    <title>使用div+css排版布局</title>    <style type="text/css">        body {            margin:0px;            padding:0px;        }        .head {            height:80px;            width:100%;            background-color:#FF1200;        }        .logo {            float:left;            margin-left:20px;            margin-top:10px;            height:60px;            width:150px;            background-color:#823;        }        .list {            float:right;            margin-top:45px;            margin-right:10px;            width:250px;            height:35px;            background-color:#888;        }        .content {            clear:both;            width:100%;        }        .left {            float:left;            width:150px;            height:600px;            background-color:blue;        }        .right {            float:left;            width:800px;            height:600px;            background-color:#673200;        }    </style></head><body>    <div class="head">        <div class="logo">我是logo</div>        <div class="list">我是list</div>    </div>    <div class="content">        <div class="left">我是左边</div>        <div class="right">我是右边</div>    </div></body></html>

这里写图片描述

0 0
原创粉丝点击