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. C++ 中复杂的声明

    1.方法也是有类型的,方法的类型由返回类型和形参表决定.比如int F (int)的类型就是去掉方法名,int (int). 2.对于方法类型,在返回类型和形参表之间,加上一个名称F,就表示一个特定的 ...

  2. cocos2d-x 3.0环境搭建

    原文来自于:http://blog.csdn.net/linzhengqun/article/details/21663341 安装工具 1. 配置JDK JDK下载地址:http://www.ora ...

  3. android 动态改变屏幕方向

    LANDSCAPE与PORTRAIT 范例说明 要如何通过程序控制Activity的显示方向?在Android中,若要通过程序改变屏幕显示的方向,必须要覆盖 setRequestedOrientati ...

  4. 支持向量机（SVM）非线性数据切割

    支持向量机(SVM)非线性数据切割 1.目标 本指导中你将学到: l  当不可能线性切割训练数据时,如何定义SVM最优化问题. l  在这样的问题上.如何配置CvSVMParams中的參数满足你的SV ...

  5. null和空 not null

    所谓的NULL就是什么都没有,连\0都没有,\0在字符串中是结束符,但是在物理内存是占空间的,等于一个字节,而NULL就是连这一个字节都没有.在 数据库里是严格区分的,任何数跟NULL进行运算都是NU ...

  6. 如何本地化 Windows Phone 应用标题

    如何本地化 Windows Phone 应用标题 http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff967550(v=vs. ...

  7. 第2章 数字之魅——寻找最大的K个数

    寻找最大的K个数 问题描述 在面试中,有下面的问答: 问:有很多个无序的数,我们姑且假定它们各不相等,怎么选出其中最大的若干个数呢? 答:可以这样写:int array[100] …… 问:好,如果有 ...

  8. C. Fox And Names

    C. Fox And Names time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  9. swift基本数据类型的使用

    // // ViewController.swift // 基本数据类型 // // Created by 叶炯 on 16/9/8. // Copyright © 2016年 叶炯. All rig ...

  10. SRM 584 第一次玩TopCoder。。。只水题一道。。。

    第一次topcoder,以前老感觉没有资格去做tc,cf什么的,现在已经慢慢接触了. 感觉还可以,还是有让我们这些蒻菜安慰的水题. tc的确很好玩,用客户端比赛,还有各种规则,而且还是只编写一个类提交 ...