0

0

CSS常用属性总结三

黄舟

黄舟

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

|

1432人浏览过

|

来源于php中文网

原创

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

 

灵机语音
灵机语音

灵机语音

下载

【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

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

89

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

276

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

59

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

99

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

105

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

230

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

619

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

173

2026.03.04

热门下载

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

精品课程

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

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 43.5万人学习

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

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