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)!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

178

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

79

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

72

2026.01.26

热门下载

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

精品课程

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

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS教程
CSS教程

共754课时 | 24.6万人学习

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

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