从零开始前端学习[40]:css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影

来源：互联网发布：mac ai抠图教程视频编辑：程序博客网时间：2024/05/23 07:23

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-imagedirection(指定倒影的方向):     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");

关于倒影的使用就不在这里进行赘述了。

阅读全文

1 1