0

0

CSS常用属性总结三

黄舟

黄舟

发布时间:2017-01-19 14:31:06

|

1432人浏览过

|

来源于php中文网

原创

    ******* css 常用属性  *********

 

magento(麦进斗)
magento(麦进斗)

Magento是一套专业开源的PHP电子商务系统。Magento设计得非常灵活,具有模块化架构体系和丰富的功能。易于与第三方应用系统无缝集成。Magento开源网店系统的特点主要分以下几大类,网站管理促销和工具国际化支持SEO搜索引擎优化结账方式运输快递支付方式客户服务用户帐户目录管理目录浏览产品展示分析和报表Magento 1.6 主要包含以下新特性:•持久性购物 - 为不同的

下载

【margin】

 

margin            检索或设置对象四边的外延边距 

立即学习前端免费学习笔记(深入)”;

margin-top        检索或设置对象顶边的外延边距 

margin-right      检索或设置对象右边的外延边距 

margin-bottom     检索或设置对象底边的外延边距 

margin-left       检索或设置对象左边的外延边距 

 

argin:检索或设置对象四边的外延边距。 

 

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。 

如果只提供一个,将用于全部的四边。 

如果提供两个,第一个用于上、下,第二个用于左、右。 

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。 

内联对象可以使用该属性设置左、右两边的外补丁;若要设置上、下两边的外补丁,必须先使该对象表现为块级或内联块级。 

外延边距始终透明。 

某些相邻的margin会发生合并,我们称之为margin折叠: 

 

margin折叠常规认知: 

margin折叠只发生在块级元素上; 

浮动元素的margin不与任何margin发生折叠; 

设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠; 

绝对定位元素的margin不与任何margin发生折叠; 

根元素的margin不与其它任何margin发生折叠; 

 

auto: 值被设置为相对边的值 

: 用长度值来定义外补白。可以为负值 

: 用百分比来定义外补白。可以为负值 

 

------------------------------------------------------------------------------------

 

*************************************************************************************************************

 

【padding】

 

padding            检索或设置对象四边的内部边距 

padding-top        检索或设置对象顶边的内部边距 

padding-right      检索或设置对象右边的内部边距 

padding-bottom     检索或设置对象底边的内部边距 

padding-left       检索或设置对象左边的内部边距 

 

padding:检索或设置对象四边的内部边距。 

 

如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。 

如果只提供一个,将用于全部的四边。 

如果提供两个,第一个用于上、下,第二个用于左、右。 

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。 

内联对象可以使用该属性设置左、右两边的内补丁;若要设置上、下两边的内补丁,必须先使该对象表现为块级或内联块级。

 

: 用长度值来定义内补白。不允许负值 

: 用百分比来定义内补白。不允许负值 

 

------------------------------------------------------------

 

*********************************************************************************************************

 

【text】

 

text-transform          检索或设置对象中的文本的大小写 

white-space             设置或检索对象内空格的处理方式 

tab-size                检索或设置对象中的制表符的长度 

word-wrap               设置或检索当内容超过指定容器的边界时是否断行 

word-break              设置或检索对象内文本的字内换行行为 

text-align              设置或检索对象中内容的水平对齐方式 

text-align-last         设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)

                               或者被强制打断的行的对齐方式 

text-justify            设置或检索对象内调整文本使用的对齐方式 

word-spacing            检索或设置对象中的单词之间的最小,最大和最佳间隙 

letter-spacing          检索或设置对象中的字符之间的最小,最大和最佳间隙 

text-indent             检索或设置对象中的文本的缩进 

vertical-align          设置或检索对象内容的垂直对其方式 

line-height             检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离 

 

-------------------------------------------------

 

letter-spacing:检索或设置对象中的字符之间的最小,最大和最佳间隙。 

 

该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后; 

letter-spacing不能被应用于一行的开始和结束; 

 

normal: 默认间隔 

: 用长度值指定间隔。可以为负值。 

: 用百分比指定间隔。可以为负值。

 

-----------------------------------------------------------------

 

line-height:检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 

 

默认值:normal

 

normal: 允许内容顶开或溢出指定的容器边界。 

: 用长度值指定行高。可以为负值。 

: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。可以为负值。 

: 用乘积因子指定行高。可以为负值。 

 

------------------------------------------------------------

 

text-align :设置或检索对象中内容的水平对齐方式。 

 

块级元素的文本是一些堆叠的线框 

要使得 text-align 的 justify 两端对齐生效,需要在汉字间插入有空白,如空格; 

块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行,其两端对齐需使用 text-align-last; 

IE浏览器下,如果 text-align-last 要生效,必须先定义 text-align 为justify; 

单行两端对齐效果变得比较简单: 

 

li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}

li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

 

left: 内容左对齐。 

center: 内容居中对齐。 

right: 内容右对齐。 

justify: 内容两端对齐。 

start: 内容对齐开始边界。(CSS3) 

end: 内容对齐结束边界。(CSS3) 

: 字符串必须是单一字符,否则申明将无效。(CSS3) 

match-parent: 这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的,计算值可以是 left 和 right 。(CSS3) 

start end: 指定 start 对齐第一行和任何强制打断的行;end 对齐所有剩余的行不受 text-align-last 影响。

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

需注意几点: 

 

所有主流浏览器都支持 text-align 的 justify 属性值; 

 

text-align不处理强制打断的行,也不处理块内的最后一行,换句话说,如果块内仅有一行文本(该行既是第一行也是最后一行),这时仅设置text-align:justify无法让该行两端对齐;

 

text-align-last 是用来处理块内的最后一行和强制打断的行的,所以当要设置单行文本两端对齐时,需使用 text-align-last; 

 

非Firefox浏览器要使得两端对齐生效,需在文本间插入空白,如空格(如果一行仅有2个汉字,Firefox也需在之间插入空白); 

 

Chrome23, Safari5.1.7, Opera12.5 尚不支持 text-align-last; 

依据上述的点,要实现单行两端对齐,可以走2个方向: 

 

由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐 

 

支持 text-align-last 的浏览器,如IE, Firefox使用 text-align-last 处理,不支持的浏览器使用如上述方法处理; 

所以就目前情况来看,使用第一种方案是比较简约的,可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

 

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

text-align-last:设置或检索一个块内的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)

                        或者被强制打断的行的对齐方式 

 

如果某一行同时也是块内的第一行或者第一行但后面紧跟着强制换行,除非显示的指定 text-align 第一行对齐方式(值 'start end'),否则 text-align-last 将会覆盖 text-align; 

如果 auto 值被指定,内容的对齐方式将依据 text-align 的设定,除非 text-align 设置为justify; 

作为IE的私有属性之一,IE5.5率先实现了 text-align-last ,后期被w3c采纳成标准属性; 

IE7及以下浏览器只实现了块内最后一行的对齐方式,没有处理被强制打断的行的对齐方式,从IE8开始,这两种形式的行对齐都被支持; 

IE浏览器下,如果 text-align-last 要生效,必须先定义 text-align 为justify; 

 

auto: 无特殊对齐方式。 

left: 内容左对齐。 

center: 内容居中对齐。 

right: 内容右对齐。 

justify: 内容两端对齐。 

start: 内容对齐开始边界。 

end: 内容对齐结束边界。 

 

-----------------------------------------------

 

text-indent: 检索或设置对象中的文本的缩进。 

 

内联对象要使用该属性必须先使该对象表现为块级或内联块级。 

hanging和each-line关键字紧随在缩进数值之后 

 

div{text-indent:2em each-line;}

 

 

: 用长度值指定文本的缩进。可以为负值。 

: 用百分比指定文本的缩进。可以为负值。 

each-line: 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行,软换行不受影响。(CSS3) 

hanging: 反向所有被缩进作用的行。

 

---------------------------------------------------------------------------------------------------

 

text-transform :检索或设置对象中的文本的大小写。 

 

none: 无转换 

capitalize:   将每个单词的第一个字母转换成大写 

uppercase:    将每个单词转换成大写 

lowercase:    将每个单词转换成小写 

full-width:   将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意                    符号。

 

---------------------------------------------------------------------------------------------------------

 

vertical-align:设置或检索内联元素在行框内的垂直对其方式。 

 

baseline: 将支持valign特性的对象的内容与基线对齐 

sub: 垂直对齐文本的下标 

super: 垂直对齐文本的上标 

top: 将支持valign特性的对象的内容与对象顶端对齐 

text-top: 将支持valign特性的对象的文本与对象顶端对齐 

middle: 将支持valign特性的对象的内容与对象中部对齐 

bottom: 将支持valign特性的对象的文本与对象底端对齐 

text-bottom: 将支持valign特性的对象的文本与对象顶端对齐 

: 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 

: 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。

 

----------------------------------------------------------------------------------------------------

 

word-break:设置或检索对象内文本的字内换行行为。 

 

对于解决防止页面中出现连续无意义的长字符打破布局,应该使用break-all; 

作为IE的私有属性之一,IE5.5率先实现了 word-break ,后期被w3c采纳成标准属性; 

 

normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。 

keep-all: 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。 

break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的              英文字母间断行。 

-----------------------------------------------------------

 

word-wrap: 设置或检索当内容超过指定容器的边界时是否断行。 

 

normal: 允许内容顶开或溢出指定的容器边界。 

break-word: 内容将在边界内换行。如果需要,单词内部允许断行。 

 

------------------------------------------------------------------

以上就是CSS常用属性总结三的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

CSS教程
CSS教程

共754课时 | 17.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号