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");
关于倒影的使用就不在这里进行赘述了。