CSS3 调整尺寸(Resizing)

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
 
<b>调整前</b> 
<div>The resize property specifies whether or not an element is resizable by the user.</div>
<b>调整后</b> 
<div>The resize property specifies whether or not an element is resizable by the user.</div>
</body>
</html>

CSS3 方框大小调整(Box Sizing)

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:80%;
border:1em solid;
}
div.box
{
box-sizing:border-box;
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
 
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>
 
</body>
</html>

CSS3 外形修饰（outline-offset ）

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

  • 轮廓不占用空间
  • 轮廓可能是非矩形
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
} 
</style>
</head>
<body>
 
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
 
<div>This div has an outline border 15px outside the border edge.</div>
 
</body>
</html>

新的用户界面特性

属性 说明 CSS
appearance 允许您使一个元素的外观像一个标准的用户界面元素 3
box-sizing 允许你以适应区域而用某种方式定义某些元素 3
icon Provides the author the ability to style an element with an iconic equivalent 3
nav-down 指定在何处使用箭头向下导航键时进行导航 3
nav-index 指定一个元素的Tab的顺序 3
nav-left 指定在何处使用左侧的箭头导航键进行导航 3
nav-right 指定在何处使用右侧的箭头导航键进行导航 3
nav-up 指定在何处使用箭头向上导航键时进行导航 3
outline-offset 外轮廓修饰并绘制超出边框的边缘 3
resize 指定一个元素是否是由用户调整大小 3

css3学习笔记之用户界面的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. Java学习笔记--Swing用户界面组件

    很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...

  3. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  4. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  5. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  6. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  7. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  8. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  9. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

随机推荐

  1. 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

    使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...

  2. phonegap platform add ios 出错的问题

    在Mac上新安装的Phonegap,版本3.3-0.18.0. 本来创建项目后按教程: http://docs.phonegap.com/en/edge/guide_platforms_ios_ind ...

  3. Java多线程中start()和run()的区别

    Java的线程是通过java.lang.Thread类来实现的.VM启动时会有一个由主方法所定义的线程.可以通过创建Thread的实例来创建新的线程.每个线程都是通过某个特定Thread对象所对应的方 ...

  4. Python学习 之 匿名函数

    1.匿名函数(lambda函数):lambda函数是一种快速定义单行的最小函数,是从Lisp借用来的,可以用在任何需要函数的地方. 普通函数定义如下: def f(x,y): return x*yf( ...

  5. Maven 修改本地存储库位置--转

    step1:默认会放在~/.m2/repository目录下 (“~”代表用户的目录,比如windows下一般都是C:\Documents and Settings\[你的用户名]\), step2: ...

  6. Linux下*.tar.bz2等文件如何解压--转

    如果tar不支持j这个参数就先用 bzip2 -d xxx.tar.bz2 把它解压成.tar文件,然后再用 tar xvf xxx.tar 拆包.压缩解压 linux下怎么解后缀名是gzip的文件? ...

  7. vim替换命令

    转载:http://blog.csdn.net/glorin/article/details/6317098 替換(substitute) :[range]s/pattern/string/[c,e, ...

  8. 解析mysql索引

    在mysql中,索引是存储引擎用于快速查找到目标记录的一种数据结构.常见的索引类型包含B树索引.哈希索引.空间索引(R-Tree).全文索引等. 索引是在存储引擎层实现的,不同的存储引擎对索引的工作方 ...

  9. 小白日记25：kali渗透测试之提权（五）--利用配置不当提权

    利用配置不当提权 与漏洞提权相比,更常见的方法.在大部分企业环境下,会有相应的补丁更新策略,因此难以通过相应漏洞进行入侵.当入侵一台服务器后,无法照当相应的补丁进行提权,可通过寻找是否存在配置不当进行 ...

  10. 使用在storyBoard之外的xib创建对象

    1.在storyBoard之外的xib 要注意的是:TableView的代理一定要设置为FilesOwner 使用: 方式一: 直接创建对象如下,(如果要使用xib里的控件,那么就要将xib里的控件作 ...