CSS3基础2

news2025/6/9 12:06:32
  1. 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. 轮廓不占用空间

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1504368.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Spring Boot+Vue的论坛网站

基于Spring Boot+Vue的论坛网站

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…
阅读更多...
回溯算法09-子集II(Java/子集问题的去重方法)

回溯算法09-子集II(Java/子集问题的去重方法)

9.子集II 题目描述 给你一个整数数组 nums &#xff0c;其中可能包含重复元素&#xff0c;请你返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。返回的解集中&#xff0c;子集可以按 任意顺序 排列。 示例 1&#xff1a; 输入&#xf…
阅读更多...
PyQt5实现远程更新exe可执行文件

PyQt5实现远程更新exe可执行文件

PyQt5实现远程下载更新exe可执行文件 1、实现流程 1、获取远程http地址 2、获取需要更新的exe文件 3、点击更新 4、把exe强关闭 5、下载文件 6、更新2、效果图 3、示例代码 conf.ini配置文件&#xff1a; {"http_address_edit_value": "http://xxx.com/xxx/…
阅读更多...
【敬伟ps教程】文字处理工具

【敬伟ps教程】文字处理工具

文章目录 文字工具使用方式文字图层文字工具选项字符面板段落面板文字工具使用方式 文字工具（快捷键T），包含横排和直排两种类型 创建文本两种类型：点式文本、段落文本 创建文字方式 1、在画面上单击，出现文字光标，可输入文字，然后需要在工具栏中点击“√”或者 Ctrl+…
阅读更多...
【二十九】springboot高并发示例

【二十九】springboot高并发示例

本章演示在springboot项目中的高并发demo&#xff0c;演示导致的问题&#xff0c;以及单机部署下的解决方案和集群部署下的解决方式以及分布式下的解决方案。 目录 一、单机模式下高并发问题 二、集群模式下高并发问题 一、单机模式下高并发问题 前提&#xff1a;先写一个减扣…
阅读更多...
枚举赋值及强制转换问题

枚举赋值及强制转换问题

对枚举进行字符赋值&#xff0c;需要进行强制类型转换之后&#xff0c;才能得到想要的值&#xff0c;如下 typedef enum data {DIRECTION_X X,DIRECTION_Y Y,DIRECTION_Z Z,DIRECTION_T T }NumData;int main() {NumData numdata DIRECTION_Y;count <<"num is&…
阅读更多...
Qt开发QHostInfo主机地址查询组件

Qt开发QHostInfo主机地址查询组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QHostInfo组件实现对主机地址查询功能…
阅读更多...
数据库-第十一章 并发控制【期末复习|考研复习】

数据库-第十一章 并发控制【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下数据库系统概论中的重点概念&#xff0c;以供大家期末复习和考研复习的时候使用。 参考资料是王珊老师和萨师煊老师的数据库系统概论(第五版)。 数据库系统概论系列文章传送门&#xff1a; 第一章 绪论 第二/…
阅读更多...
机器学习第29周周报 Beyond Dropout

机器学习第29周周报 Beyond Dropout

文章目录 week29 Beyond Dropout摘要Abstract一、泛化理论二、文献阅读1. 题目2. abstract3. 网络架构3.1 特征图失真3.2 失真优化 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 全连接层实验4.3.2 卷积网络上的实验 4.4 结论 小结参考文献 week29 Beyond Dropout …
阅读更多...
visualization_msgs::Marker 的pose设置，map坐标系的3d box显示问题

visualization_msgs::Marker 的pose设置，map坐标系的3d box显示问题

3D框显示 3D框显示可以使用visualization_msgs::Marker::LINE_LIST或者LINE_STRIP&#xff0c;前者使用方法需要指明线的两个端点&#xff0c;后者自动连接相邻两个点。 姿态问题 网上看了一些&#xff0c;没有涉及到朝向设置&#xff0c;Pose.orientation默认构造为4个0 至…
阅读更多...
Spring官网中查看MongoDB的API文档的详细步骤

Spring官网中查看MongoDB的API文档的详细步骤

目录 Spring官网中查看MongoDB的API文档的详细步骤1、进入 Spring 官网2、选择 Mongodb的文档介绍3、点击API文档4、进入文档查询页面 Spring官网中查看MongoDB的API文档的详细步骤 1、进入 Spring 官网 首先进入Spring的官网&#xff0c;然后点击【Spring Data】 2、选择 Mon…
阅读更多...
JAVA实战开源项目：大学兼职教师管理系统(Vue+SpringBoot)

JAVA实战开源项目：大学兼职教师管理系统(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 学生教师管理3.3 课程管理模块3.4 授课管理模块3.5 课程考勤模块3.6 课程评价模块3.7 课程成绩模块3.8 可视化图表 四、免责说明 一、摘要 1.1 项目介绍 大学兼职教师管理系统&#xff0c;旨…
阅读更多...
王阳明：在心里中一个春天！吃好喝好不等于吃饱喝足，出租屋的第二个周末——早读（逆天打工人爬取热门微信文章解读）

王阳明：在心里中一个春天！吃好喝好不等于吃饱喝足，出租屋的第二个周末——早读（逆天打工人爬取热门微信文章解读）

种一个春天&#xff0c;等下一个天亮 引言Python 代码第一篇 霸王别坤第二篇 &#xff08;跳&#xff09;洞见 王阳明&#xff1a;人生若是太苦寒&#xff0c;在心里种一个春天第三篇 人民日报 来了&#xff01;新闻早班车要闻社会政策 结尾 屋宽不如心宽&#xff0c;物整亦是心…
阅读更多...
模拟框图的表示

模拟框图的表示

微分方程的建立 目的&#xff1a;为建立LTI系统的数学模型&#xff0c;需要列写微分方程式。 以RLC电路为例&#xff1a; 以Us为输入&#xff0c;Uc为输入&#xff0c;则可以得出以下微分方程式&#xff1a; 抽去物理意义后&#xff0c;得到一般的常微分线性方程&#xff1a;…
阅读更多...
YOLOv5-Openvino-ByteTrack【CPU】

YOLOv5-Openvino-ByteTrack【CPU】

纯检测如下&#xff1a; YOLOv5-Openvino和ONNXRuntime推理【CPU】 YOLOv6-Openvino和ONNXRuntime推理【CPU】 YOLOv8-Openvino和ONNXRuntime推理【CPU】 YOLOv9-Openvino和ONNXRuntime推理【CPU】 注&#xff1a;YOLOv5和YOLOv6代码内容基本一致&#xff01; 全部代码Github&…
阅读更多...
思维调试：为什么FormatMessage提示找不到资源?

思维调试：为什么FormatMessage提示找不到资源?

在不调试的情况下解决下面的问题&#xff0c;说明你的思维调试能力又进阶了。 问题 我在调用 FormatMessage 函数加载一个插入的资源字符串&#xff0c;由于某种未知的原因&#xff0c;它没能按预期那样工作。 我要加载的字符串类似于这样的 “Blah blah blah %1. Blah blah …
阅读更多...
VIM编译器的安装

VIM编译器的安装

文章目录 前言一、VIM软件安装二、遇到问题三、VIM使用1.文档创建命令touch2.VIM编译器输入模式3.VIM编译器指令模式3.VIM编译器底行模式4.VIM编译器使用小技巧 前言 &#x1f4a6; 我们如果要在终端模式下进行文本编辑或者修改文件就可以使用 VIM 编辑器&#xff0c;VIM 编辑…
阅读更多...
腾讯云轻量应用服务器流量用完了怎么办？

腾讯云轻量应用服务器流量用完了怎么办？

腾讯云轻量服务器流量用完了怎么办&#xff1f;超额流量另外支付流量费&#xff0c;流量价格为0.8元/GB&#xff0c;会自动扣你的腾讯云余额&#xff0c;如果你的腾讯云账号余额不足&#xff0c;那么你的轻量应用服务器会面临停机&#xff0c;停机后外网无法访问&#xff0c;继…
阅读更多...
如何修复advapi32.dll丢失无法启动程序的问题

如何修复advapi32.dll丢失无法启动程序的问题

如果你在运行Windows程序时遇到了“advapi32.dll丢失无法启动程序”的错误消息&#xff0c;那么这意味着你的计算机缺少这个DLL文件。在本文中&#xff0c;我们将提供一些解决方案&#xff0c;帮助你解决这个问题并恢复计算机的正常运行。 一.advapi32.dll丢失电脑的提示 关于…
阅读更多...
BUUCTF----[极客大挑战 2019]HardSQL

BUUCTF----[极客大挑战 2019]HardSQL

输入1’ 单引号闭合 进行永真式判断 竟然说我是臭弟弟----八嘎&#xff08;肯定是进行了过滤&#xff09; 经过手法判断&#xff0c;过滤了&#xff0c;空格&#xff0c;and等报错注入updatexml() 报错注入顾名思义就是&#xff0c;通过特殊函数错误使用并使其输出错误结果来获…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023