css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影
- resize
- user-select
- 多列布局columns，column-gap，column-rule
- 怪异盒子模型box-sizing
- 倒影-webkit-box-reflect
提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
resize盒子大小的拖动
在学表单的时候，有一个表单元素textarea元素，它就是有一个特性，就是能够随意拖动然后来改变大小，这在其他元素中是不具有的，但是css3为我们提供了一个属性resize属性，这个属性是用来给我们提供这样的一个特性的
resize:both; //支持宽高拖动
resize:none; //不支持拖动
resize:horizonal; //支持水平拖动
resize:vertical; //支持垂直拖动
resize:inherit //继承父级元素
resize属性是去要结合overflow属性来进行使用的时候才有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 30px auto;box-shadow: 0 0 10px 0 deeppink}
.main > p{width: 40px;height: 40px;background: greenyellow;resize: ;overflow: auto}
</style>
</head>
<body>
<div class="main">
<p></p>
</div>
</body>
</html>
user-select属性
其是定义文本是否可以被选中以及复制操作
user-select:text; //默认的，文本可以被选中
user-select:all; //成标签域选中，也就是点击这个标签就可以选中标签内的所有的文本
user-select:none; //文本不可以被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 30px auto;box-shadow: 0 0 10px 0 deeppink}
.main p:nth-child(1){-webkit-user-select: text;}
.main p:nth-child(2){-webkit-user-select: none;}
.main p:nth-child(3){-webkit-user-select: all;}
</style>
</head>
<body>
<div class="main">
<p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
<p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
<p>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</p>
</div>
</body>
</html>注意，上述我的代码部分使用了浏览器的兼容配置，否则有些浏览器不支持
多列布局
多列布局也就是将整个布局分成很多列来进行布局设置，其中主要有以下几个属性特性
columns
columns:width count;
width：每列的最小宽度
count:列数
如：coulumns:100px 4;
column-gap
column-gap:列之间的间隔;
column-gap:30px;
column-rule:粗细 样式 颜色
column-rule:5px solid #ccc;
类似列与列之间的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 30px auto;box-shadow: 0 0 10px 0 deeppink}
.main > p{background: greenyellow;
columns:300px 3;
column-gap:100px;
-webkit-column-rule:5px solid deeppink;}
</style>
</head>
<body>
<div class="main">
<p>
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山
</p>
</div>
</body>
</html>显示效果如下所示:
怪异盒子模型box-sizing
1：默认值，content-box
盒子总宽度 = content + padding + border
内容宽度不会变
2：怪异盒模型： border-box
盒子总宽度（不会变）
内容宽度 = 最初的内容宽度 – border - padding
其实这个属性也就是为了解决我们的padding会扩大盒子所创造出来的，因为我们在有时候使用盒子的时候需要设置内边距，但是设置了内边距之后，会撑大盒子，但是我们不需要去扩大盒子的大小；
box-sizing:content-box;
box-sizing:border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 30px auto;box-shadow: 0 0 10px 0 deeppink}
.main > p{width: 100px;height: 100px;background: greenyellow;margin: 20px auto}
.mian p:nth-child(1){}
.mian p:nth-child(2){padding: 20px}
.main p:nth-child(3){padding: 20px;border: 15px solid red}
.main p:nth-child(4){padding: 20px;border: 15px solid red;box-sizing: border-box}
</style>
</head>
<body>
<div class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
</html>显示如下：
怪异盒子模型是用来解决padding撑大原来元素的问题的。但是这也会导致内容区域被压缩
-webkit-box-reflect
倒影属性的使用相对来说使用是比较容易的
-webkit-box-reflect: direction offset mask-box-image
direction(指定倒影的方向):
above 指定倒影在对象上边
below 指定倒影在对象下边
left 指定倒影在对象左边
right 指定倒影在对象右边
offset(对象与倒影的间隔)：单位px 百分比 甚至还可以将距离拉到负值
mask-box-image(遮罩)：可以为线性渐变 径向渐变 图片(必须为png)
使用如下所展示:
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,transparent,#fff);
-webkit-box-reflect: below 0 url("img/2.png");
关于倒影的使用就不在这里进行赘述了。
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
