CSS3基础2

CSS3 用户界面
1. resize
  1. 示例
```
<!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> 的尺寸被拉伸。但是，值得注意的是溢出形式的设置：
    1. 当 overflow: hidden; 时，无论是否拉伸尺寸，超出尺寸的内容都会被隐藏裁剪；
    2. 当 overflow: scroll; 时，无论是否拉伸尺寸，元素始终显示滚动条；
    3. 当 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. 示例
```
div
{
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
}
/*规定边框边缘之外 15 像素处的轮廓：*/
```
  3. 注意轮廓与边框有两点不同：
    1. 轮廓可能是非矩形
    2. 轮廓不占用空间

标签

CSS3基础2

如果不想35岁被淘汰这篇文章必看，web前端开发基础教程之HTML5页面结构基础，web快速开发框架

HTML5 新增元素

【前端】HTML5基础

HTML5：Canvas 标签，腾讯前端面试题社招

HTML简单学习记录，程序员深度学习

简单的学生网页作业源码基于HTML的环境网站设计 HTML CSS环保网站项目实现带设计说明psd

HTML CSS 连载 | 62 - 分页实现

依赖html破解cloudflare-turnstile

css3特性中的transform：translateZ(0)有什么作用？

TransitionGroup 使用

前端哥

如果不想35岁被淘汰这篇文章必看，web前端开发基础教程之HTML5页面结构基础，web快速开发框架

HTML制作开心网游戏静态页面

HTML5 新增元素

【前端】HTML5基础

HTML5：Canvas 标签，腾讯前端面试题社招

HTML简单学习记录，程序员深度学习

简单的学生网页作业源码基于HTML的环境网站设计 HTML CSS环保网站项目实现带设计说明psd

html/javascript-表格的创建和使用

HTML CSS 连载 | 62 - 分页实现

依赖html破解cloudflare-turnstile

1
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

2
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

3
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

4
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

5
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

6
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

7
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

8
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

9
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

10
UE4.27支持HTML5

2024-05-07 13:05:261000