CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

简介: CSS样式更改——裁剪、Z-Index、清除、改变元素的特性

前言


上篇文章主要介绍了CSS样式更改篇中的框模型、定位、浮动、溢出基础知识,这篇文章主要分享CSS样式更改中的裁剪、Z-Index、清除、改变元素的特性基础知识,一起来看看吧。


1.裁剪Clip

对元素某块区域就行剪切

img{   clip:rect(23px,14px,45px,54px)}rect (top, right, bottom, left)  设置元素的形状auto 不应用任何剪裁


2.Z-Index

设置元素的堆叠顺序

div{z-index:1}p{z-index:10}a{z-index:-1}z-index 值越大,所在的元素越靠前显示


3.清除Clear

专门用来清除浮动

div{  clear:both}left   清除左侧浮动right  清除右侧浮动both   清除左右两侧浮动none   允许浮动


4.改变元素的特性Display

互相调换元素之间的特性

div{    display:inline}none                元素不会被显示。block                元素将显示为块级元素,此元素前后会带有换行符。inline               元素将被显示为内联元素,元素前后没有换行符。inline-block         行内块元素list-item            元素会作为列表显示。run-in               元素会根据上下文作为块级元素或内联元素显示。table                元素会作为块级表格来显示,表格前后带有换行符。inline-table         元素会作为内联表格来显示,表格前后没有换行符。table-row-group       元素会作为一个或多个行的分组来显示(类似 <tbody>)。table-header-group    元素会作为一个或多个行的分组来显示(类似 <thead>)。table-footer-group    元素会作为一个或多个行的分组来显示(类似 <tfoot>)。table-row             元素会作为一个表格行显示(类似 <tr>)。table-column-group    元素会作为一个或多个列的分组来显示(类似 <colgroup>)。table-column          元素会作为一个单元格列显示(类似 <col>)table-cell            元素会作为一个表格单元格显示(类似 <td> 和 <th>)table-caption         元素会作为一个表格标题显示(类似 <caption>)
此时的块级元素div就有了内联元素的特性了

参考文档:W3C官方文档(CSS篇)


总结


这篇文章主要介绍了CSS样式更改篇中的裁剪、Z-Index、清除、改变元素的特性,希望让大家对CSS样式有个简单的认识和了解。

相关文章
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
525 2
|
5月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
183 1
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
399 1
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
600 1
|
5月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
186 1
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
564 79
|
11月前
|
前端开发
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效