• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS常用样式简单的总结包括定位、显示等属性

CSS常用样式简单的总结包括定位、显示等属性

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS样式,定位,显示等相关知识,佚名 希望在学习及工作中可以帮助到您
鼠标属性:

通过cursor属性来实现

Style=”cursor :hand”

定位和显示

1.定位属性

CSS定位属性包括position、top、bottom、left、right和z-index

Position属性指定元素如何在页面上定位,取值为:static ,relative或absolute.

Static表示正常定位,relative是指定位在相对于页面上前一个元素的尾端位置,absolute是用绝对位置指定元素在页面中的位置。

Top和left属性指定某元素与其父元素或其他元素之间的距离

Z-index属性控制元素的重叠,值较高的元素将覆盖值较低的元素,如果使用时是-1,则表示元素将至于页面默认文本的后边

2.宽高和剪裁属性

可以用width和height控制元素的宽度和高度,用clip和overflow属性控制元素的制裁。当使用这些属性时,position属性必须指定为absolute。

Clip属性确定对象的剪裁区域,取值为rect(top right bottom left )或auto

如果任意一边使用auto,则相当于该边没有进行剪裁

Overflow属性用于设置当前元素的内容超出它的高度和宽度限制时,浏览器如何处理

取值可以是visible、hidden、scroll、auto,其中visible是默认值,表示不剪裁内容,也不添加滚动条;hidden表示剪裁内容,不显示超出部分的内容;scroll表示剪裁内容,同时提供滚动条;auto表示只有在必要时才剪裁内容并添加滚动条。

3.显示属性

Display属性和visibility属性可以控制元素的显示和掩藏

Display属性控制元素的显示方式,取值为none,inline或block。

None使元素不显示,而且元素也将退出当前的页面布局层,不占用任何显示空间;

block使元素以块方式(<p>)显示 ;

Inline使元素以内嵌方式显示。

对于块元素,默认值是block

对于内嵌元素,默认值是inline

Visibility属性控制元素的显示,取值为visible、hidden和inherit

默认值为inherit

与display属性不同之处在于:当掩藏元素时,仍然为元素保留原有的显示空间

CSS滤镜

滤镜(filter)效果通过filter样式表属性定义,格式如下

Filter : 滤镜名称(参数)

如

Img{filter: alpha(Opacity= 80)}

Opacity 用于控制透明度

滤镜名称:alpha chroma flipH flipV gray invert

滤镜属性只能应用于HTML控件元素。所谓HTML控件元素是指它们在网页上定义了一个矩形空间,浏览器窗口可以显示这些控件。常见的HTML控件元素包括:body、button、Div、img、input marquee span table td textarea th

您可能想查找下面的文章:

  • CSS样式继承和层叠
  • css文件中的样式类被覆盖,js文件中的变量未定义问题
  • 浏览器扩展程序来添加CSS样式实现百度贴吧清爽界面
  • Css样式兼容IE6,IE7,FIREFOX的浏览器的写法示例介绍
  • IE浏览器单独写CSS样式的几种方法
  • 写CSS样式做浏览器兼容时区别ie8和ie9的方法
  • CSS中filter滤镜的学习笔记(静态滤镜及动态滤镜)
  • 加了important标记css样式的jQuery写法
  • a标签的css样式四个状态LVHA的设计
  • 在jsp修改CSS样式后没反应无效果的解决方法

相关文章

  • 2017-08-06让IE可以变相支持CSS3选择器
  • 2017-08-06CSS Grid布局教程之网格单元格布局
  • 2017-08-06ie6 position:fixed解决方案
  • 2017-08-06css截取字符串简单实例
  • 2017-08-06CSS Sprites简介以及优缺点
  • 2017-08-06纯CSS3代码实现文字描边
  • 2017-08-06水平居中块级元素较好的实现
  • 2017-08-06css3中检验表单的required,focus,valid和invalid样式
  • 2017-08-06CSS3实现10种Loading效果
  • 2017-08-06CSS中背景的Linear Gradients(线性渐变)应用

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详细了解CSS中的class与id区别及用法
    • CSS Prism 查看和编辑CSS中用到的颜色
    • 如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
    • CSS expression在Chrome的问题
    • 为网页内容添加结构和语义的hAtom微格式
    • 50个强大璀璨的CSS3/JS技术运用实例
    • Firefox专属hack的写法介绍
    • css中margin:0 auto居中问题深入探讨
    • CSS3 Columns分列式布局方法简介
    • IE7下生成高质量CSS缩略图

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有