对齐

在 CSS 中,可以使用多种属性来水平对齐元素。

水平对齐

使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素。

把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素:

.center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

也可以简写为,这里把上下的外边距设定为0:

.center {
margin:0 auto;
}

左右对齐

使用绝对定位

对齐元素的方法之一是使用绝对定位:

.right {
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。

使用浮动

对齐元素的另一种方法是使用 float 属性:

.right {
float:right;
width:300px;
background-color:#b0e0e6;
}

尺寸

CSS 尺寸属性允许你控制元素的高度和宽度。

  • height:设置元素的高度。
  • line-height:设置行高。
  • max-height:设置元素的最大高度。
  • max-width:设置元素的最大宽度。
  • min-height:设置元素的最小高度。
  • min-width:设置元素的最小宽度。
  • width:设置元素的宽度。

分类

CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

  • clear:设置一个元素的侧面是否允许其他的浮动元素。
  • cursor:规定当指向某元素之上时显示的指针类型。
  • display:设置是否及如何显示元素。
  • float:定义元素在哪个方向浮动。
  • position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  • visibility:设置元素是否可见或不可见。

clear

clear 属性定义了元素的哪边上不允许出现浮动元素。

  • left:在左侧不允许浮动元素。
  • right:在右侧不允许浮动元素。
  • both:在左右两侧均不允许浮动元素。
  • none:默认值。允许浮动元素出现在两侧。
  • inherit:规定应该从父元素继承 clear 属性的值。

cursor

cursor 属性规定要显示的光标的类型(形状)。

  • url:需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
  • default:默认光标(通常是一个箭头)
  • auto:默认。浏览器设置的光标。
  • crosshair:光标呈现为十字线。
  • pointer:光标呈现为指示链接的指针(一只手)
  • move:此光标指示某对象可被移动。
  • e-resize:此光标指示矩形框的边缘可被向右(东)移动。
  • ne-resize:此光标指示矩形框的边缘可被向上及向右移动(北/东)。
  • nw-resize:此光标指示矩形框的边缘可被向上及向左移动(北/西)。
  • n-resize:此光标指示矩形框的边缘可被向上(北)移动。
  • se-resize:此光标指示矩形框的边缘可被向下及向右移动(南/东)。
  • sw-resize:此光标指示矩形框的边缘可被向下及向左移动(南/西)。
  • s-resize:此光标指示矩形框的边缘可被向下移动(南)。
  • w-resize:此光标指示矩形框的边缘可被向左移动(西)。
  • text:此光标指示文本。
  • wait:此光标指示程序正忙(通常是一只表或沙漏)。
  • help:此光标指示可用的帮助(通常是一个问号或一个气球)。

display

display 属性规定元素应该生成的框的类型。

  • none:此元素不会被显示。
  • block:此元素将显示为块级元素,此元素前后会带有换行符。
  • inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
  • inline-block:行内块元素。(CSS2.1 新增的值)
  • list-item:此元素会作为列表显示。
  • run-in:此元素会根据上下文作为块级元素或内联元素显示。
  • compact:CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
  • marker:CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
  • table:此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
  • inline-table:此元素会作为内联表格来显示(类似 <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>)
  • inherit:规定应该从父元素继承 display 属性的值。

visibility

visibility 属性规定元素是否可见。

提示:即使不可见的元素也会占据页面上的空间。请使用 "display: none" 属性来创建不占据页面空间的不可见元素。

  • visible:默认值,元素是可见的。
  • hidden:元素是不可见的。
  • collapse:当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
  • inherit:规定应该从父元素继承 visibility 属性的值。

图像透明度

定义透明效果的 CSS3 属性是 opacity。

请看下面的 CSS:

img {
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。

下面我们看一个效果,图片鼠标移入时不透明:

img {
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

HTML5学习笔记(十):CSS常用操作的更多相关文章

  1. python3.4学习笔记(十五) 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)

    python3.4学习笔记(十五) 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) python print 不换行(在后面加上,end=''),prin ...

  2. python学习笔记(十 二)、操作数据库

    每一种语言都少不了多数据库进行各种操作. python支持多种数据库.有关python支持的数据库清单,请参阅:https://wiki.python.org/moin/DatabaseInterfa ...

  3. Java基础学习笔记十四 常用API之基本类型包装类

    基本类型包装类 Java中有8种基本的数据类型,可是这些数据是基本数据,想对其进行复杂操作,变的很难.怎么办呢?在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们 ...

  4. python学习笔记(十)、文件操作

    在前面我们了解到了没得模块,其中有一个模块为fileinput,为文件操作模块,不知道小伙伴们是否还记得? 1 打开文件 要打开文件,可以使用fileinput中的fileinput.input函数进 ...

  5. python学习笔记(十)完善数据库操作

    1.cur = coon.cursor(cursor=pymysql.cursors.DictCursor)的用法 建立游标,指定cursor类型返回的是字典,如果不指定类型,返回的是元组类型数据 i ...

  6. web前端学习(三)css学习笔记部分(3)-- css常用操作

    5.  CSS常用操作 5.1  对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...

  7. python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置

    python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...

  8. python3.4学习笔记(十) 常用操作符,条件分支和循环实例

    python3.4学习笔记(十) 常用操作符,条件分支和循环实例 #Pyhon常用操作符 c = d = 10 d /= 8 #3.x真正的除法 print(d) #1.25 c //= 8 #用两个 ...

  9. 树莓派学习笔记——使用文件IO操作GPIO SysFs方式

    0 前言     本文描写叙述假设通过文件IO sysfs方式控制树莓派 GPIO端口.通过sysfs方式控制GPIO,先訪问/sys/class/gpio文件夹,向export文件写入GPIO编号, ...

  10. python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

随机推荐

  1. foxmail怎么设置个性签名

    foxmail是我们日常使用的邮件客户端之一,相信很多的朋友都在使用.那么,我们在发邮件的时候,很多朋友都会使用一个个性签名,那么对于foxmail的邮件签名怎么来设置呢?今天笔者就来给大家分享一下, ...

  2. Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境

    使用Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境(一) 2015-01-14 20:28 by 飘扬的红领巾, 4322 阅读, 5 评论, 收藏, 编辑 ...

  3. Linux下Shell元字符的释义

    Linux下shell的巧妙应用,对系统的运维很有四两拨千斤的功效! Shell元字符 注意: () 在当前shell的子shell进程运行命令 {}在当前shell进程运行命令

  4. Photoshop CS6 操作记录

    全局快捷键 橡皮 E 画笔 B 魔棒工具 W 钢笔工具 P 选区工具 M 移动画布 按住Space后鼠标拖动 放大缩小画布 Ctrl+-, Ctrl++ 调出/收回标尺 Ctrl+R 调整画笔大小 [ ...

  5. iOS 性能调优

    1.内存空间的划分: 我们知道,一个进程占用的内存空间,包含5种不同的数据区:(1)BSS段:通常是存放未初始化的全局变量:(2)数据段:通常是存放已初始化的全局变量.(3)代码段:通常是存放程序执行 ...

  6. 细说PHP中strlen和mb_strlen的区别(转)

    在PHP中,strlen与mb_strlen是求字符串长度的函数,但是对于一些初学者来说,如果不看手册,也许不太清楚其中的区别.下面通过例子,讲解这两者之间的区别. 先看例子: <?php // ...

  7. MongoDB 2.6配置副本集,支持端口号修改和用户登录认证

    mongoDB系列之(二):mongoDB 副本集 Mongodb2.6副本集验证部署和认证 副本集有以下特点: 1. 最小构成是:primary,secondary,arbiter,一般部署是:pr ...

  8. Windows10内置Linux子系统

      WSL 前言 前段时间,机子上的win10又偷偷摸摸升级到了一周年正式版,比较无奈.不过之前听闻这个版本已经支持内置的linux子系统,于是就怀着好奇心试玩了一把.虽然期间遇到了很多问题,但总体来 ...

  9. 【struts2】<s:url>标签

    <s:url>标签一般和超链接 <a>一起使用,用于带多个参数. <a href=" <s:url action=""> < ...

  10. Oracle 12C -- 手动创建CDB

    1.指定oracle_sid $ export ORACLE_SID=db12 2.指定环境变量 比如ORACLE_BASE.ORACLE_HOME.PATH(要包含$ORACLE_HOME/bin) ...