css3学习之用户界面

最新推荐文章于 2024-08-25 01:17:37 发布

zzzkk2009

最新推荐文章于 2024-08-25 01:17:37 发布

阅读量418

点赞数

分类专栏： html5&css3学习文章标签： css3

本文链接：https://blog.csdn.net/zzzkk2009/article/details/48979005

版权

html5&css3学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们使用css3的新属性，可以自由的控制页面当中某个元素的大小，可以设置外边框以突出重点，可以轻松的实现报纸版面的排列效果(多列)，可以重定义盒子模型的呈现形式。

1、css3多列

通过 CSS3，能够创建多个列来对文本进行布局 - 就像报纸那样。

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

<!DOCTYPE html>
<html>
	<head>
		<title>noTitle</title>
		<meta charset="">
		<link rel="stylesheet" href="">
		<script>
		</script>
		<style>
		div{
		 width:500px;height:auto;margin:0 auto;
		 color:#111;font-size:14px;border:1px solid red;
		  -moz-column-gap:10px;
		  -webkit-column-gap:10px;
		  -moz-column-rule:1px solid red;
		  -webkit-column-rule:1px solid red;
		  -moz-column-width:100px;
		  -webkit-column-width:180px;
		 -moz-column-count:3; 
		 -webkit-column-count:3;

		 }
		</style>
	</head>
	<body>
	<div>
	   Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列Css3三列
	</div>
	</body>
</html>

2、resize

resize 属性规定是否可由用户调整元素的尺寸。
语法
resize: none|both|horizontal|vertical;
Firefox 4+、Chrome 以及 Safari 不支持 resize。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
  div{
  width:200px;height:200px;border:1px solid red;
  resize:both;
  }
  textarea{
   resize:horizontal ;
  }
</style>
</head>

<body>
<div>
</div>
<textarea>
  
</textarea>
</body>
</html>

3、box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

浏览器支持

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

Safari 支持替代的 -webkit-box-sizing 属性

语法:

box-sizing: content-box|border-box|inherit;

<!DOCTYPE html>
<html>
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
div{
width:200px;height:200px;
border:1px solid red;
padding:20px;
-moz-box-sizing:content-box;
}
</style>
<script>
window.οnlοad=function  () {
  var div=document.getElementsByTagName("div")[0];
  alert(div.offsetWidth);
}
</script>
</head>

<body>
<div>
fadfdbbd
</div>
</body>
</html>

4、outline

outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框

边缘的外围偏移，可起到突出元素的作用

浏览器支持

所有主流浏览器都支持 outline 属性，除了 Internet Explorer。

语法：outline：[outline-color] || [outline-style] || [outline-width] ||

[outline-offset] | inherit

<outline-color>：指定轮廓边框颜色。

<outline-style>：指定轮廓边框轮廓。

<outline-width>：指定轮廓边框宽度。

<outline-offset>：指定轮廓边框偏移位置的数值。参见outline-offset

5、outline-offset

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

轮廓不占用空间

浏览器支持

所有主流浏览器都支持 outline-offset 属性，除了 Internet Explorer。

语法

outline-offset: length|inherit;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content－Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style>
.one{
width:100px;height:100px;border:1px solid red;
/*
position:absolute;left:200px;top:100px;
*/
outline:2px solid green;
outline-offset:4px;

}
.two{
 width:200px;height:200px;background:#000;
}
</style>
</head>

<body>
   <div class="one">
   </div>
   <div class="two">
   </div>
</body>
</html>

zzzkk2009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3学习之用户界面

我们使用css3的新属性，可以自由的控制页面当中某个元素的大小，可以设置外边框以突出重点，可以轻松的实现报纸版面的排列效果(多列)，可以重定义盒子模型的呈现形式。 1、css3多列通过 CSS3，能够创建多个列来对文本进行布局 - 就像报纸那样。Internet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrom
复制链接

扫一扫

专栏目录