我们使用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>