CSS3魔法堂：禁止用户改变textarea大小

一、前言

  在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小，这不仅与IE下textarea的行为特点有异，而且textarea的大小变化会撑大其父节点从而破坏整体布局。

 

二、原因  

通过调用 window.getComputedStyle(textarea元素, null).resize 返回both，我们可以知道原来是resize样式属性搞的鬼。

 

三、CSS3属性──resize

用于设置UserAgent调整元素尺寸的机制，就是说设置用户能否和如何自行改变元素尺寸。

值范围

none：不允许UserAgent调整元素尺寸;

both ：允许UserAgent调整元素水平、垂直方向的尺寸;

vertical：允许UserAgent调整元素垂直方向的尺寸;

horizontal：允许UserAgent调整元素水平方向的尺寸;

inherit ：继承父元素

 

在FF、Chrome和Safari下

对于div来说resize属性值时inherit（其实就是none），而对于textarea而言默认值为both。

 

四、解决办法

  为textarea设置 resize: none

利用JavaScript的控制图片的CSS位置实现轮播图功能 利用JavaScript的控制图片的CSS位置实现轮播图功能 上篇博客我们说到了如何给轮播图添加定时器效果，当然前面的两个轮播图功能实现都是通过改变图片的路径(图片名称取巧)实现的，有一定的局限性。今天说一说怎样通过改变位置实现轮播功能。效果如图： 在这里插入图片描述 HTML代码： div "img" alt="" src="https://cdn.nlark.com/yuque/0/2022/jpeg/26941455/1659754136322-c6b865a1-7934-411f-afde-001c6d989824.jpeg?x-oss-process=image/resize,h_118"/>
css3新增了选择器，还有人不知道吗？ CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素，你还不知道吗？ 属性选择器 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者 id 选择器。