css3中 resize 、outline-offset、outline align-items属性 inherit和auto的区别

最新推荐文章于 2025-06-06 10:16:06 发布
最新推荐文章于 2025-06-06 10:16:06 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS HTML css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Seety_ST/article/details/50556731
本文详细介绍了 CSS 中 resize、outline、align-items、inherit 和 auto 等属性的作用及使用方法，帮助读者更好地掌握这些属性，提高网页布局的灵活性和美观度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

①resize属性一些理解

这里写图片描述
（提示拖动这个可以来改变）
语法：resize：none | both | horizontal | vertical
none:不可以用户鼠标拖动元素来改变元素的尺寸
both：可以拖动来改变元素的宽高
horizontal:允许拖动改变宽度
vertical：允许拖动改变高度

②outline 和outline-offset

这里写图片描述
outline设置的是外边框
outline-offset设置的是外边框与容器边缘的距离

③align-items属性规定灵活容器内的各项的默认值的对齐方式

语法：align-items：stretch**（默认值）** | center | flex-start | flex-end | baseline | initial | inherit
这里写图片描述

④ inherit和auto

inherit：继承父类的属性
auto：是按照情况自适应

reset.css重置样式--小技巧
JackieDYH的博客
02-13 483
@charset "utf-8"; body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select { margin: 0; padding: 0; } body { font-family: "微软雅黑", "宋体", Arial, Helvetica, sans-serif;...
CSS3---移动端苹果安卓适配
weixin_45343884的博客
09-20 1869
常见苹果适配问题： 【问题1】：iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面 ♥♥♥方案：<meta name="format-detection" content="telephone=no" /> 【问题2】微信浏览器自动调整页面字体大小 ♥♥♥方案：禁止微信浏览器调整页面字体大小: body{ -webkit-text-size-adjust...
css中align-items属性
weixin_38098192的博客
07-02 3891
align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 值： 1.stretch：默认值。元素被拉伸以适应容器。 2.center:素位于容器的中心。 3.flex-start:元素位于容器的开头. 4.flex-end:元素位于容器的结尾。 5.baseline:元素位于容器的基线上。 6.initial:设置该属性为它的默认值. 7.inh...
php中align标签属性值,align-items
weixin_35897479的博客
03-22 1268
align-items属性含义：align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。浏览器支持：表格中的数字表示支持该属性的第一个浏览器的版本号紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本属性浏览器IEChrome...
轮廓偏移（outline-offset）的深度解析
最新发布
waterlin2011的博客
06-06 446
属性用于在元素的轮廓（outline）与边框（border）之间创建额外的间距。这个间距是透明的，意味着它不会被任何背景色填充，而是显示父元素或页面的背景。css/* 数值单位，如px、em、rem等 *//* 百分比值，相对于元素宽度 *//* 继承父元素的值 */支持负值：使轮廓向内偏移到元素内部透明性：偏移区域始终透明，不接受背景填充对所有轮廓有效：无论轮廓是通过 outline 属性设置，还是通过:focus 等伪类触发。
outline resize
包磊磊的博客
08-26 392
outline 外轮廓效果跟border成效的效果极其相似，但不占网页布局空间。 通常它在元素取得焦点或者被激活时呈现.. hover,active div:active{outline: 20px solid red;} outline: 10px solid #ccc; outline-color outline-style outline-width
利用outline和outline-offset属性画“+”号
ass_ace
08-11 593
outline：可以给一些标签加轮廓； outline-offset：是对轮廓的偏移位置进行设置； 当把outline-offset设置为负值，并不断减小的时候发现，能画出一个加号； <div class="demo"></div> CSS样式设置如下： .demo{ width: 200px; he...
outline-offset属性的使用
gx01013的博客
07-14 533
outline-offset属性在元素的轮廓与边框之间添加空间。
CSS-滑块
Jackie_Mina
02-07 664
CSS 滑块
CSS3选择器、边框、背景、按钮
weixin_61650602的博客
11-21 366
1.CSS3概述 (1)、CSS3简介 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强 或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和 便捷动画圆角阴影边框图片… (2)、CSS3现状 1、浏览器支持程度差，需要添加私有前缀 -webkit-谷歌safari -moz-火狐 -ms-IE 2、移动端支持优于PC端 3、不断改进中 4、应用相对广泛 2.CSS3选择器 CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准 度。CS
CSS与CSS3美化页面
AllenCode7的博客
12-27 1490
目录一、CSS简介1.1 什么是CSS?1.2 样式层叠次序二、CSS基础语法三、CSS使用方式四、CSS常用选择器五、CSS关系和属性选择器六、CSS伪类选择器七、CSS的尺寸和单位八、CSS字体与文本属性九、CSS背景属性十、CSS边框属性十一、CSS内外补白属性十二、CSS盒子模型实例十三、CSS定位属性十四、CSS布局属性十五、CSS实现导航十六、CSSflex弹性盒子介绍十七、CSS用户界面和多栏属性介绍十八、CSS表格和过度属性介绍十九、CSS旋转动画和媒体查询属性介绍二十、CSS字体图标的使用
HTML CSS 盒模型 DOM元素布局 调试神器 padding border margin outline
wuyujin1997的博客
01-01 455
开发环境中，在页面中引入以下一句CSS。 <style> * { outline: auto; } </style> 如果是单个HTML测试，在body>head>style中写属性即可 如果是React项目(或其他)，可以在入口jsx中引入这个样式规则。 功能：自动显示所有DOM元素的外边框，可用于元素块布局调整阶段的开发。 页面会发生的变化(以百度为例)： 该样式应用前： 该样式应用后： ...
css 实现页面区域分栏左右拉伸调整布局
hello，是翠花呀
11-23 3494
想要实现如下图效果，红色可拉动的线往左边拉右边内容区域变大左边内容区域变小，往右边拉右边内容区域变小左边内容区域变大。 我们先来了解一下 css 的resize属性直达w3s，resize: none|both|horizontal|vertical;可以调整元素是否可左右拖动。 把 W3s 中的 resize 改为resize:horizontal;点击运行一下，就只可左右拉动。 接下来我们把 w3s 里代码改为如下内容，然后点击运行 <!DOCTYPE html> <html>
html中outline属性,CSS outline 属性
weixin_30445963的博客
06-05 5690
1、outline(轮廓)用于设置元素周围的一条线，用于元素边框的外围，可起到突出元素的作用。2、outline-style:值如下：值 描述none默认。定义无轮廓。dotted定义点状的轮廓。dashed定义虚线轮廓。solid定义实线轮廓。double定义双线轮廓。双线的宽度等同于 outline-width 的值。groove定义 3D 凹槽轮廓。此效果取...
CSS 轮廓（outline）
QYgujingjing的专栏
01-13 383
CSS 轮廓（outline）
css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示，常见布局技巧
weixin_68773927的博客
04-06 2222
鼠标样式
html伸缩布局,html5-伸缩布局常用属性align-items
weixin_42135462的博客
06-15 1015
Title*{padding: 0;margin: 0;}.box{width: 900px;height: 600px;border: 1px solid red;margin:0 auto;/*设置父容器为盒子：会使每一个子元素自动变成伸缩项当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩*/display: flex;/*设置子元素的主轴方向上的排列方式*/justify-cont...
css3之outline属性
weixin_30379531的博客
06-08 272
在看张鑫旭前辈的css3相关文章时候，看到一个用css样式实现一个“+”加号效果 http://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/ 这里面接触到一个新的css3属性，outline，翻译成中文就是——"轮廓"; 语法：outline:outlineWidth outlineStyle outlineColor...
css样式表属性
lswdcyy的博客
08-19 170
line-height的概念。
md-editor-v3/lib/style.css文件内容
03-25
`md-editor-v3/lib/style.css` 是 `md-editor-v3` 的样式文件，主要用于定义 Markdown 编辑器的外观和布局。该 CSS 文件通常包含了编辑器组件的所有默认样式设置，包括但不限于字体大小、颜色、边距、填充以及暗黑模式的支持。 由于无法直接访问具体的 CSS 文件内容，以下是基于官方文档和常见实现推测的一些可能的关键样式配置： ```css /* 基础样式 */ .md-editor { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } /* 输入区域样式 */ .md-editor textarea, .md-editor input { border: none; outline: none; resize: none; background-color: transparent; width: 100%; height: auto; padding: 8px; font-size: 14px; color: inherit; } /* 预览区域样式 */ .md-preview { white-space: pre-wrap; word-break: break-word; overflow-x: auto; margin-top: 16px; } /* 暗黑模式支持 */ .dark-mode .md-editor, .dark-mode .md-preview { background-color: #272727; color: #f5f5f5; } ``` 上述代码仅为示例，并不代表实际文件中的全部内容[^1]。 若要查看完整的 `style.css` 文件内容，可以前往项目的 GitHub 或 GitCode 地址下载源码并查阅具体文件[^3]。 为了获取最新版本的样式文件内容，建议通过以下方式操作： 1. 访问项目仓库地址：[https://gitcode.com/gh_mirrors/md/md-editor-v3](https://gitcode.com/gh_mirrors/md/md-editor-v3)。 2. 找到 `lib/style.css` 文件并打开查看具体内容。 如果需要自定义样式，则可以通过覆盖默认样式来调整编辑器的表现形式[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值