- CSS3 用户界面
-
resize
-
示例
css<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>fjlsdkfjlsdjnflnsdlfmlsdmflnsdlfjlsdjfsdf</div> </body> <style> div{ width: 100px; height: 100px; border: 1px solid black; overflow: auto; resize: both; } </style> </html> -
补充:resize 属性,规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 <textarea></textarea> 文本域标签。可以说 <textarea> 标签自带 resize: both;所以可以通过设置 resize: none; 来禁止 <textarea> 的尺寸被拉伸。但是,值得注意的是溢出形式的设置:
当 overflow: hidden; 时,无论是否拉伸尺寸,超出尺寸的内容都会被隐藏裁剪;
2. 当 overflow: scroll; 时,无论是否拉伸尺寸,元素始终显示滚动条;- 当 overflow: auto; 时,仅尺寸小于内容显示时,才会出现滚动条,可以说,这是最美观的设置(<textarea> 也是自带此属性);
-
-
box-sizing:用来告诉浏览器该使用哪种盒模型来渲染文档。
-
content-box 是默认的盒子模型,即 W3C 标准盒子模型,现如今所有主流浏览器都支持并使用该模型渲染布局,包括 IE。但麻烦却是一堆堆的,因为,在这模型下,border与padding的设置会破坏元素的尺寸,导致最终展现出来的布局效果并不符合理想效果,而如果想要达到理想效果,又需要去计算宽高,非常麻烦(别的属性是越标准越好用,但这个属性却是反向向IE标准的)
-
而 border-box 则指 IE盒子模型,也称为"怪异盒子模型"。此模型下,边框和填充并不会影响元素的宽高,相当于是将元素的空间霸占 成自己的空间 ,元素 总体大小不变 ,内容空间变小,边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时,就非常的舒服,因为在指定元素尺寸并设置该属性值后,元素尺寸就不会因被破坏而又得重新计算了。
-
示例

-
-
outline-offset
1.outline-offset 属性用来设置 轮廓(外边框)与边框(内边框)之间的间隔 ,或 "填充",默认情况下,轮廓是紧贴着边框的,所以需要通过该属性来使它们分开。outline 不会破坏元素宽高,同样的 outline-offset 设置的间隔,也不会影响元素的宽高。
2. 示例cssdiv { border:2px solid black; outline:2px solid red; outline-offset:15px; } /*规定边框边缘之外 15 像素处的轮廓:*/注意轮廓与边框有两点不同:
-
轮廓可能是非矩形
-
轮廓不占用空间
-
-
CSS3基础2
清风霁玥缘2024-03-10 2:07
相关推荐
驭风少年君1 小时前
《搭建属于自己的网站之网页前端学习》基础入门刘一说2 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优你的人类朋友2 小时前
设计模式的原则有哪些?!执行2 小时前
Web3 前端与合约交互潘小安2 小时前
跟着 AI 学(二)- Quill 接入速通十里-3 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能shada3 小时前
从Google Chrome商店下载CRX文件左耳咚3 小时前
项目开发中从补码到精度丢失的陷阱黑云压城After3 小时前
vue2实现图片自定义裁剪功能(uniapp)芙蓉王真的好13 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法