标签 css 下的文章

CSS min-height(width)属性设置对象的最大高度(宽度)

语法:


min-height : none | length
min-width : none | length

参数:

none :  无最小高度限制
length :  由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。

说明:

设置或检索对象的最小高度。
如果min-height属性的值大于max-height属性的值,将会被自动转设为max-height属性的值。
同样,如果min-width属性的值大于max-width属性的值,将会被自动转设为max-width属性的值
目前IE5.5尚不支持此属性。
对应的脚本特性为 minHeight (minWidth)。

示例:


        p { min-height: 200px; } 

        p { min-width: 200px; } 

定义和用法

min-width 属性设置元素的最小宽度,
min-height 属性设置元素的最小高度。

说明

min-width,该属性值会对元素的宽度设置一个最小限制。因此,元素可以比指定值宽,但不能比其窄。不允许指定负值。
min-height,该属性值会对元素的高度设置一个最低限制。因此,元素可以比指定值高,但不能比其矮。不允许指定负值。

可能的值

描述
length 定义元素的最小高度。默认值是 0。
% 定义基于包含它的块级对象的百分比最小高度。
inherit 规定应该从父元素继承 min-height 属性的值。

所有主流浏览器都支持 min-height 属性。

注:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

css width 和 height 属性设置对象的宽高度

语法:


height : auto | length
width : auto | length

参数:

auto :  无特殊定位,根据HTML定位规则载文档流中分配
length :  由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。不可为负数。

说明:

检索或设置对象的高度或者宽度。
对于img对象来说,仅指定此属性,其width值将根据图片源尺寸等比例缩放。
对应的脚本特性为height或者width。其值为一字符串,所以不可用于脚本(Scripts)中的计算。请使用style对象的posHeight,pixelHeight,以及对象的offsetHeight或者posWidth,pixelWidth,以及对象的offsetWidth等特性。
对应的脚本特性为 height 。

示例:




        div { width: 100px; } 
        div { position:absolute; top:-3px; width:6px; } 

        div { height: 60px; } 
        div { position:absolute; top:-3px; height:6px; }

定义和用法

height 属性设置元素的高度。
width 属性设置元素的宽度。

说明

这个属性定义元素内容区的高度,在内容区外面可以增加内边距、边框和外边距。

行内非替换元素会忽略这个属性。

默认值: auto
继承性: no
版本: CSS1

可能的值

描述
auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。

注:所有主流浏览器都支持 height 和 width 属性。

CSS margin 外边距属性

语法:



margin : auto | length

参数:
auto :  值被设置为相对边的值
length :  由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。

说明:
检索或设置对象四边的外延边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
在IE4+,margin属性不可用于td和tr对象。
外延边距始终透明。
对应的脚本特性为 margin 。

示例:



        body { margin: 36pt 24pt 36pt; } 
        body { margin: 11.5%; } 
        body { margin: 10% 10% 10% 10%; } 

定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。
例子 1



 margin:10px 5px 15px 20px;

    /*上外边距是 10px
    右外边距是 5px
    下外边距是 15px
    左外边距是 20px*/

例子 2



 margin:10px 5px 15px;

    /*上外边距是 10px
    右外边距和左外边距是 5px
    下外边距是 15px*/

例子 3



 margin:10px 5px;

    /*上外边距和下外边距是 10px
    右外边距和左外边距是 5px*/

例子 4



 margin:10px;

    /*所有 4 个外边距都是 10px*/

可能的值

描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

所有主流浏览器都支持 margin 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 "inherit" 和 "collapse" 属性值。

CSS padding 属性

语法:


padding : length

参数:
length :  由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。

说明:
检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
不允许负值。
对应的脚本特性为 padding 。
关于对象的尺寸与边框,内外补丁等样式表属性的关系,请参看图例以及height和width属性。

示例:



        body { padding: 36pt 24pt 36pt; } 
        body { padding: 11.5%; } 
        body { padding: 10% 10% 10% 10%; } 

定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

说明
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释:不允许使用负值。
例子 1



 padding:10px 5px 15px 20px;

    /*上内边距是 10px
    右内边距是 5px
    下内边距是 15px
    左内边距是 20px*/

例子 2



 padding:10px 5px 15px;

    /*上内边距是 10px
    右内边距和左内边距是 5px
    下内边距是 15px*/

例子 3



 padding:10px 5px;

    /*上内边距和下内边距是 10px
    右内边距和左内边距是 5px*/

例子 4



 padding:10px;

    /*所有 4 个内边距都是 10px*/

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,下面就是具体DIV/CSS命名规则CSS命名大全内容篇。
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。

一、命名规则说明

1)、所有的命名最好都小写

2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"

3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

4)、空元素要有结束的tag或于开始的tag后加上"/"

5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等

6)、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。

7)、给每一个表格和表单加上一个唯一的、结构标记id

8)、给图片加上alt标签

9)、尽量使用英文命名原则

10)、尽量不缩写,除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名

外套 wrap —— 用于最外层

头部 header —— 用于头部

主要内容 main —— 用于主体内容(中部)

左侧 main-left —— 左侧布局

右侧 main-right —— 右侧布局

导航条 nav —— 网页菜单导航条

内容 content —— 用于网页中部主体

底部 footer —— 用于底部

三、DIV+CSS命名参考表

以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合:

网页公共命名

| ----CSS样式命名---- | ----说明---- |
|#wrapper|页面外围控制整体布局宽度|
|#container或#content|容器,用于最外层|
|#layout|布局|
|#head,#header|页头部分|
|#foot,#footer|页脚部分|
|#nav|主导航|
|#subnav|二级导航|
|#menu|菜单|
|#submenu|子菜单|
|#sideBar|侧栏|
|#sidebar_a,#sidebar_b|左边栏或右边栏|
|#main|页面主体|
|#tag|标签|
|#msg,#message|提示信息|
|#tips|小技巧|
|#vote|投票|
|#friendlink|友情连接|
|#title|标题|
|#summary|摘要|
|#loginbar|登录条|
|#searchInput|搜索输入框|
|#hot|热门热点|
|#search|搜索|
|#search_output|搜索输出和搜索结果相似|
|#searchBar|搜索条|
|#search_results|搜索结果|
|#copyright|版权信息|
|#branding|商标|
|#logo|网站LOGO标志|
|#siteinfo|网站信息|
|#siteinfoLegal|法律声明|
|#siteinfoCredits|信誉|
|#joinus|加入我们|
|#partner|合作伙伴|
|#service|服务|
|#regsiter|注册|
|arr/arrow|箭头|
|#guild|指南|
|#sitemap|网站地图|
|#list|列表|
|#homepage|首页|
|#subpage|二级页面子页面|
|#tool,#toolbar|工具条|
|#drop|下拉|
|#dorpmenu|下拉菜单|
|#status|状态|
|#scroll|滚动|
|.tab|标签页|
|.left.right.center|居左、中、右|
|.news|新闻|
|.download|下载|
|.banner|广告条(顶部广告条)|

电子贸易相关

| ------------ | ------------ |
|.products|产品|
|.products_prices|产品价格|
|.products_description|产品描述|
|.products_review|产品评论|
|.editor_review|编辑评论|
|.news_release|最新产品|
|.publisher|生产商|
|.screenshot|缩略图|
|.faqs|常见问题|
|.keyword|关键词|
|.blog|博客|
|.forum|论坛|

CSS文件命名

| ------------ | ------------ |
|master.css,style.css|主要的|
|module.css|模块|
|base.css|基本共用|
|layout.css|布局,版面|
|themes.css|主题|
|columns.css|专栏|
|font.css|文字、字体|
|forms.css|表单|
|mend.css|补丁|
|print.css|打印|

CSS命名其它说明

无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。

建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。

四、英文命名技巧

如果遇到不常用的,可以借助翻译工具进行翻译取其英文命名。

在线翻译工具:

百度:http://fanyi.baidu.com/

有道:http://fanyi.youdao.com/

Google:http://translate.google.cn/
以上为DIV+CSS的命名规则总结,相信通过规范的CSS命名给你以后网站网页的维护带来方便。

转自:点击进入