CSS3基础2

  1. CSS3 用户界面
    1. resize

      1. 示例

        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>
      2. 补充:resize 属性,规定用户可以通过拉伸元素尺寸来显示溢出隐藏的内容。效果类似 <textarea></textarea> 文本域标签。可以说 <textarea> 标签自带 resize: both;所以可以通过设置 resize: none; 来禁止 <textarea> 的尺寸被拉伸。但是,值得注意的是溢出形式的设置:

        当 overflow: hidden; 时,无论是否拉伸尺寸,超出尺寸的内容都会被隐藏裁剪;
        2. 当 overflow: scroll; 时,无论是否拉伸尺寸,元素始终显示滚动条;

        1. 当 overflow: auto; 时,仅尺寸小于内容显示时,才会出现滚动条,可以说,这是最美观的设置(<textarea> 也是自带此属性);
    2. box-sizing:用来告诉浏览器该使用哪种盒模型来渲染文档。

      1. content-box 是默认的盒子模型,即 W3C 标准盒子模型,现如今所有主流浏览器都支持并使用该模型渲染布局,包括 IE。但麻烦却是一堆堆的,因为,在这模型下,border与padding的设置会破坏元素的尺寸,导致最终展现出来的布局效果并不符合理想效果,而如果想要达到理想效果,又需要去计算宽高,非常麻烦(别的属性是越标准越好用,但这个属性却是反向向IE标准的)

      2. 而 border-box 则指 IE盒子模型,也称为"怪异盒子模型"。此模型下,边框和填充并不会影响元素的宽高,相当于是将元素的空间霸占自己的空间元素 总体大小不变内容空间变小,边框、填充则霸占着原本属于内容空间的地方。这在平时设计布局时,就非常的舒服,因为在指定元素尺寸并设置该属性值后,元素尺寸就不会因被破坏而又得重新计算了。

      3. 示例

    3. outline-offset
      1.

      outline-offset 属性用来设置 轮廓(外边框)与边框(内边框)之间的间隔 ,或 "填充",默认情况下,轮廓是紧贴着边框的,所以需要通过该属性来使它们分开。outline 不会破坏元素宽高,同样的 outline-offset 设置的间隔,也不会影响元素的宽高。
      2. 示例

      css 复制代码
      div
      {
          border:2px solid black;
          outline:2px solid red;
          outline-offset:15px;
      }
      /*规定边框边缘之外 15 像素处的轮廓:*/

      注意轮廓与边框有两点不同:

      1. 轮廓可能是非矩形

      2. 轮廓不占用空间

相关推荐
2501_915909061 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist2 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang3 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_3 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含3 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端3 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友3 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue