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. 错误号码2003 Can&#39;t connect to MySQL server &#39;localhost&#39; (0)

    错误描写叙述 错误原因 近期,我一直都能够用SQLyog连接本地数据库,可是近几天却无法连接:而且一直都报上述错误,我查阅了非常多资料,发现有非常多中说法 总结一下 第一,MySQL中的my.ini出 ...

  2. xxx-servlet.xml vs applicationContext.xml

    Spring lets you define multiple contexts in a parent-child hierarchy. The applicationContext.xml def ...

  3. 【WinForm】使用NSIS发布程序

    简介 NSIS(Nullsoft Scriptable Install System)是一个开源的 Windows 系统下安装程序制作程序.它提供了安装.卸载.系统设置.文件解压缩等功能 使用 以下是 ...

  4. 【Android 应用开发】Android 开发环境下载地址 -- 百度网盘 adt-bundle android-studio sdk adt 下载

    19af543b068bdb7f27787c2bc69aba7f Additional Download (32-, 64-bit) Package r10 STL debug info androi ...

  5. C++ AfxBeginThread

    计算从1+2+3...+100000=? 关键点 CWinThread* AfxBeginThread( AFX_THREADPROC pfnThreadProc, LPVOID pParam, in ...

  6. 一个Windows Service项目的完整开发过程

    (一)建立项目文件 先建立一个解决方案文件,然后添加三个项目. 分别是: (1)Windows服务项目  -----ActiveMQSenderService项目,服务主要是定时轮询某表,将更新发送到 ...

  7. 几种流行Webservice框架性能对照

     转自[http://blog.csdn.net/thunder4393/article/details/5787121],写的非常好,以收藏. 1      摘要 开发webservice应用程序中 ...

  8. 用PC浏览器模拟手机浏览器（一）：无扩展版

    想浏览手机版,打开对应网址却跳转到PC版?怎么办? 下面咱们来说下在只是安装了浏览器,无需其他安装操作的情况下来怎么用PC浏览器模拟手机浏览器,然后访问手机站点. 浏览器众多,IE系列的咱就不考虑了, ...

  9. Codec工具类

    import java.math.BigInteger; import org.apache.commons.codec.DecoderException; import org.apache.com ...

  10. C - Minimum Inversion Number

    Description The inversion number of a given number sequence a1, a2, ..., an is the number of pairs ( ...