* 文本垂直居中
通过CSS文本的行高line-height属性控制,这也是CSS中解决一行文本居中的最常用办法
* 将a显示成块,块元素的宽度未指定时就等于其父对象的宽度,而a同时也受父级对象的line-height影响,与父级相同
* 清除浮动
一般,我们会单独定义一个负责清除浮动的类,如下:
.cls{clear:both; display:block; height:0px; line-height:0px; overflow:hidden;}
之后在html中添加一个元素,专门负责清除浮动,如下:
<br class="cls" />
这样只需要移动这个<br />在html代码中的位置就可以达到清除它之前的任何浮动影响
* 设置全局属性
一般用
body,ul,li{padding:0px;margin:0px;list-style:none;font-size:12px;font-family:arial,宋体;}
* relative 与 absolute 的区别
绝对定位
将一个定位方式为absolute的元素放置在它的父级元素内,需要满足两个条件:
1.为其本身指定lrtb,
2.父级元素需要指定定位方式,如absolute或relative,当然常用的还是为父级元素指定relative定位。
相对定位
我们似乎觉得定位方式为relative的元素和默认的static元素相比并没有太大的区别,而且relative定位方式还可以通过lrtb来决定元素的位置,确实是这样的,不过很多时候我们不需要通过lrtb来确定元素的位置,而采用padding和margin来解决
如果父级元素指定padding属性,那么相对于父级元素实际内容区域的左上角进行定位,即relative会受到父级元素的padding属性影响
分享到:
相关推荐
以下是一些CSS技巧: 1. **选择器优先级**:理解ID选择器、类选择器、元素选择器的权重,以及如何使用!important来强制应用样式。 2. **CSS预处理器**:如Sass、Less等,它们引入变量、嵌套规则、混合等功能,使...
在深入探讨这25个高级CSS技巧之前,我们先来理解一下CSS本身及其在现代网页设计中的重要性。CSS,即层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档如何呈现的样式语言。随着互联网的发展,CSS...
本压缩包包含了关于CSS的丰富学习资源,包括“CSS2中文手册”、“CSS 速成手册”、“css技巧”和“css课件”。 首先,我们来看“CSS2中文手册”。这是一份详细阐述CSS2规范的文档,CSS2是CSS的第二个主要版本,发布...
本压缩包“css技巧.rar”包含了关于CSS的技巧和资源,旨在帮助网页设计师和开发者提升他们的技能水平。 《css技巧.doc》可能是详细介绍了各种CSS技巧的文档,它可能涵盖了以下内容: 1. **选择器的高效利用**:...
CSS技巧涵盖了多种情况,如图像处理、布局调整、边框设计等。以下是详细的知识点: 1. 照片黑白化技巧:通过CSS的filter属性应用grayscale(100%),可以将彩色照片转换为黑白照片,适用于一些特定的网页设计风格。 ...
在CSS(层叠样式表)的设计和开发过程中,掌握一些常见的...了解并熟练运用这些CSS技巧和问题解决策略,可以提升前端开发的效率,创建出更加美观、响应迅速的网页。不断学习和实践,是成为一名优秀前端开发者的关键。
标题中的“20个初学者实用的CSS技巧”是指针对CSS初学者的一系列技术要点,旨在帮助他们快速掌握CSS的基本应用。这些技巧涵盖了从解决浏览器兼容性问题到优化代码效率,以及实现各种视觉效果的各个方面。 描述中...
标题中的“CSS技巧与工具(EditPlus语法文件下载)”暗示了我们即将探讨的是关于CSS(Cascading Style Sheets)的一些高级技巧以及EditPlus编辑器中相关的语法文件。EditPlus是一款功能强大的文本编辑器,尤其适用于...
以下是一些常见的面试题以及一些实用的CSS技巧。 一、CSS基础面试题 1. CSS盒模型:解释盒模型的概念,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。同时,讨论标准盒模型和IE盒模型的区别...
虽然具体的博文内容无法直接提供,但我们可以基于常见的CSS技巧进行详细阐述。 1. **选择器的高效利用**:理解并熟练使用各种选择器如ID选择器 (#id),类选择器 (.class),元素选择器 (element),以及伪类和伪元素 ...
【CSS技巧详解】 1. **CSS字体属性简写规则**:CSS允许你将多个字体相关的属性合并为一行,如`font: bold italic small-caps 1em/1.5em verdana,sans-serif;`。这包括`font-weight`、`font-style`、`font-variant`...
【CSS技巧整理】 在网页设计和开发中,CSS(Cascading Style Sheets)扮演着至关重要的角色,它负责页面的布局和样式呈现。本篇资料主要涵盖了五个优化CSS编码实践的技巧,旨在帮助你写出更高效、易维护的CSS代码。...
CSS技巧专栏每日一例:10-纯CSS实现伸缩按钮特效 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。 资源特点:代码短小、代码容易阅读、重点注释、方便扩展、...
CSS技巧专栏每日一例:11-纯CSS实现多彩渐变按钮特效 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。 资源特点:代码短小、代码容易阅读、重点注释、方便扩展...
css-protips, 帮助你掌握CSS技巧的技巧集合 CSS Protips 帮助你掌握CSS技巧的技巧集合。对于其他优秀列表,请查看 @sindresorhus curated curated列表awesome列表。 table-内容Protips支持插件翻译工具
CSS技巧专栏每日一例:3 纯CSS实现炫酷多彩按钮的特效 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。 资源特点:代码短小、代码容易阅读、重点注释、方便扩展...
文件名就是文章名:CSS技巧专栏每日一例:1-CSS实现会讨好的热情按钮.zip 资源特点:代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群:前端从业职,新手小白,有网站开发能力对美工...
CSS技巧专栏每日一例:2-纯CSS实现多彩边框按钮的特效 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。 资源特点:代码短小、代码容易阅读、重点注释、方便扩展...
CSS技巧专栏每日一例:8-纯CSS实现按钮边框对称包围特效 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。 资源特点:代码短小、代码容易阅读、重点注释、方便...