前端大本营

HTML5,CSS3,Responsive,资料站

resize 说明

resize 属性, 指定用户是否可以变更要素尺寸 。<规定可以由用户调整 div 元素的大小。>

属性值

none 不提供用户对要素变更尺寸的功能(默认值)<用户无法调整元素的尺寸。> both 提供用户对要素宽高尺寸的调整功能 <用户可调整元素的高度和宽度。> horizontal 提供用户对要素宽的尺寸调整 <用户可调整元素的宽度。> vertical 提供用户对要素高的尺寸调整 <用户可调整元素的高度。> inherit 继承父要素的属性值
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> outline-offset </title>
<style>
div.sample1 {
width:200px; height:50px;
border:1px solid; background-color:yellow; 
overflow:auto;
resize:both;
}	
</style>

</head>

<body>
<div class="sample1">resize:both; </div>	
</body>
</html>
实例图
resize:both;
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 用户接口 | resize 指定用户是否可以变更要素尺寸 —— CSS3 参考 UI接口已关闭评论

outline-offset 说明

box-sizing 属性, 指定边框外轮廓的值 。<对轮廓进行偏移,并在边框边缘进行绘制。>

属性值

length 边框距边框外轮廓的距离(默认值为0)<轮廓与边框边缘的距离。> inherit 继承父元素的属性值 <规定应从父元素继承 outline-offset 属性的值。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> outline-offset </title>
<style>
.sample {outline:dotted 2px red;}
.sample:focus {outline-offset:5px;}
</style>

</head>

<body>
<form action="xxx" method="post">
<p>
姓名<br>
<input name="namae" type="text" class="sample">
</p>
<p>
内容<br>
<textarea name="goiken" cols="40" rows="4" class="sample"></textarea>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
实例图 outline-offset
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 用户接口 | outline-offset 指定边框外轮廓的值 —— CSS3 参考 UI接口已关闭评论

box-sizing 说明

box-sizing 属性, 指定元素尺寸的计算方法。<允许您以特定的方式定义匹配某个区域的特定元素。> 属性值为content-box时, width和height指定的元素,padding和border的宽度都不包含在内。 属性值为border-box时,widht和height指定的元素,padding和border的宽度都包含在内容领域(元素领域)。

属性值

content-box 不包含padding和border的宽度高度(默认值) <这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。> border-box 包含padding和border的宽度高度 <为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。> inherit 继承父元素的属性值 <规定应从父元素继承 box-sizing 属性的值。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-sizing </title>
<style>
p.sample1 {
width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange; 
box-sizing: content-box;
}
p.sample2 {
width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange; 
box-sizing: border-box;
}
</style>

</head>

<body>
<p class="sample1">box-sizing: content-box; 指定</p>
<p class="sample2">box-sizing: border-box; 指定</p>	
</body>
</html>
实例图 box-sizing
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 用户接口 | box-sizing 指定元素尺寸的计算方法 —— CSS3 参考 UI接口已关闭评论

appearance 说明

appearance 属性, 指为用户在不同的平台上,给用户提供元素在该环境中的用户标准界面。<允许您使元素看上去像标准的用户界面元素。> *现在所有主流浏览器都不支持appearance属性 Firefox 支持替代的 -moz-appearance 属性。 Safari 和 Chrome 支持替代的 -webkit-appearance 属性。

属性值

normal 标准外观(默认值)<将元素呈现为常规元素。> icon 图标<将元素呈现为图标(小图片)。> window 窗口<将元素呈现为视口。> 作为特殊的窗口可以指定以下属性值 desktop 系统全体表示为窗口 workspace 包含其他窗口,窗口中可以显示应用程序或项目 document 显示用户文档 tooltip 显示临时帮助或信息 dialog 通知窗口 button 按钮<将元素呈现为按钮。> 作为特殊的按钮可以指定以下属性值 push-button 立体按钮 hyperlink 链接 radio-button 圆形边框按钮 checkbox 复选框 menu-item 菜单 tab 选项卡按钮 menu 菜单<将元素呈现为一套供用户选择的选项。> 作为特殊的菜单可以指定以下属性值 menubar 水平排列的菜单 pull-down-menu 选择性菜单 pop-up-menu popup菜单 list-menu 列表菜单 radio-group 单选按钮组 checkbox-group 复选框按钮组 outline-tree 目录树 range 范围调节按钮 field 将元素呈现为输入字段。 combo-box 组合框 signature 签名字段 password 密码字段 inherit 上层属性继承
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> appearance </title>
<style>
div.prefix_appearance_normal {
-moz-appearance:normal;
-webkit-appearance:normal;
-o-appearance:normal;
-ms-appearance:normal;
}
div.prefix_appearance_icon {
-moz-appearance:icon;
-webkit-appearance:icon;
-o-appearance:icon;
-ms-appearance:icon;
}
div.prefix_appearance_window {
-moz-appearance:window;
-webkit-appearance:window;
-o-appearance:window;
-ms-appearance:window;
}
div.prefix_appearance_button {
-moz-appearance:button;
-webkit-appearance:button;
-o-appearance:button;
-ms-appearance:button;
}
div.prefix_appearance_menu {
-moz-appearance:menu;
-webkit-appearance:menu;
-o-appearance:menu;
-ms-appearance:menu;
}
div.prefix_appearance_field {
-moz-appearance:field;
-webkit-appearance:field;
-o-appearance:field;
-ms-appearance:field;
}


div.prefix_appearance_desktop {
-moz-appearance:desktop;
-webkit-appearance:desktop;
-o-appearance:desktop;
-ms-appearance:desktop;
}
div.prefix_appearance_workspace {
-moz-appearance:workspace;
-webkit-appearance:workspace;
-o-appearance:workspace;
-ms-appearance:workspace;
}
div.prefix_appearance_document {
-moz-appearance:document;
-webkit-appearance:document;
-o-appearance:document;
-ms-appearance:document;
}
div.prefix_appearance_tooltip {
-moz-appearance:tooltip;
-webkit-appearance:tooltip;
-o-appearance:tooltip;
-ms-appearance:tooltip;
}
div.prefix_appearance_dialog {
-moz-appearance:dialog;
-webkit-appearance:dialog;
-o-appearance:dialog;
-ms-appearance:dialog;
}


div.prefix_appearance_push-button {
-moz-appearance:push-button;
-webkit-appearance:push-button;
-o-appearance:push-button;
-ms-appearance:push-button;
}
div.prefix_appearance_hyperlink {
-moz-appearance:hyperlink;
-webkit-appearance:hyperlink;
-o-appearance:hyperlink;
-ms-appearance:hyperlink;
}
div.prefix_appearance_radio-button {
-moz-appearance:radio-button;
-webkit-appearance:radio-button;
-o-appearance:radio-button;
-ms-appearance:radio-button;
}
div.prefix_appearance_checkbox {
-moz-appearance:checkbox;
-webkit-appearance:checkbox;
-o-appearance:checkbox;
-ms-appearance:checkbox;
}
div.prefix_appearance_menu-item {
-moz-appearance:menu-item;
-webkit-appearance:menu-item;
-o-appearance:menu-item;
-ms-appearance:menu-item;
}
div.prefix_appearance_tab {
-moz-appearance:tab;
-webkit-appearance:tab;
-o-appearance:tab;
-ms-appearance:tab;
}


div.prefix_appearance_menubar {
-moz-appearance:menubar;
-webkit-appearance:menubar;
-o-appearance:menubar;
-ms-appearance:menubar;
}
div.prefix_appearance_pull-down-menu {
-moz-appearance:pull-down-menu;
-webkit-appearance:pull-down-menu;
-o-appearance:pull-down-menu;
-ms-appearance:pull-down-menu;
}
div.prefix_appearance_pop-up-menu {
-moz-appearance:pop-up-menu;
-webkit-appearance:pop-up-menu;
-o-appearance:pop-up-menu;
-ms-appearance:pop-up-menu;
}
div.prefix_appearance_list-menu {
-moz-appearance:list-menu;
-webkit-appearance:list-menu;
-o-appearance:list-menu;
-ms-appearance:list-menu;
}
div.prefix_appearance_radio-group {
-moz-appearance:radio-group;
-webkit-appearance:radio-group;
-o-appearance:radio-group;
-ms-appearance:radio-group;
}
div.prefix_appearance_checkbox-group {
-moz-appearance:checkbox-group;
-webkit-appearance:checkbox-group;
-o-appearance:checkbox-group;
-ms-appearance:checkbox-group;
}
div.prefix_appearance_outline-tree {
-moz-appearance:outline-tree;
-webkit-appearance:outline-tree;
-o-appearance:outline-tree;
-ms-appearance:outline-tree;
}
div.prefix_appearance_range {
-moz-appearance:range;
-webkit-appearance:range;
-o-appearance:range;
-ms-appearance:range;
}


div.prefix_appearance_combo-box {
-moz-appearance:combo-box;
-webkit-appearance:combo-box;
-o-appearance:combo-box;
-ms-appearance:combo-box;
}
div.prefix_appearance_signature {
-moz-appearance:signature;
-webkit-appearance:signature;
-o-appearance:signature;
-ms-appearance:signature;
}
div.prefix_appearance_password {
-moz-appearance:password;
-webkit-appearance:password;
-o-appearance:password;
-ms-appearance:password;
}
</style>

</head>

<body>
<h4>主要属性</h4>
<div class="prefix_appearance_normal">normal</div>
<div class="prefix_appearance_icon">icon</div>
<div class="prefix_appearance_window">window</div>
<div class="prefix_appearance_button">button</div>
<div class="prefix_appearance_menu">menu</div>
<div class="prefix_appearance_field">field</div>

<h4>window 组</h4>
<div class="prefix_appearance_desktop">desktop</div>
<div class="prefix_appearance_workspace">workspace</div>
<div class="prefix_appearance_document">document</div>
<div class="prefix_appearance_tooltip">tooltip</div>
<div class="prefix_appearance_dialog">dialog</div>

<h4>button 组</h4>
<div class="prefix_appearance_push-button">push-button</div>
<div class="prefix_appearance_hyperlink">hyperlink</div>
<div class="prefix_appearance_radio-button">radio-button</div>
<div class="prefix_appearance_checkbox">checkbox</div>
<div class="prefix_appearance_menu-item">menu-item</div>
<div class="prefix_appearance_tab">tab</div>

<h4>menu 组</h4>
<div class="prefix_appearance_menubar">menubar</div>
<div class="prefix_appearance_pull-down-menu">pull-down-menu</div>
<div class="prefix_appearance_pop-up-menu">pop-up-menu</div>
<div class="prefix_appearance_list-menu">list-menu</div>
<div class="prefix_appearance_radio-group">radio-group</div>
<div class="prefix_appearance_checkbox-group">checkbox-group</div>
<div class="prefix_appearance_outline-tree">outline-tree</div>
<div class="prefix_appearance_range">range</div>

<h4>field 组</h4>
<div class="prefix_appearance_combo-box">combo-box</div>
<div class="prefix_appearance_signature">signature</div>
<div class="prefix_appearance_password">password</div>
</body>
</html>
实例图 appearance
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags:
Posted in 用户接口 | appearance 用户平台标准界面UI —— CSS3 参考 UI接口已关闭评论