el-popover 设置盒子高度_WEB前端-盒子模型

最新推荐文章于 2023-06-05 12:16:18 发布
最新推荐文章于 2023-06-05 12:16:18 发布
阅读量5.4k 收藏 3
点赞数
文章标签： el-popover 设置盒子高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_29001327/article/details/112106996
版权

一、概念

  1. 盒子模型用来“放”网页中的各种元素
  2. 网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套)

网页盒子模型：

92b919af4057b041b7ae5d3d71ac77d7.png

二、盒子模型属性

1、width（宽度）属性

  • 宽度：width：长度值 | 百分比 | auto
  • 最大宽度：max-width：长度值 | 百分比 | auto
  • 最小宽度：min-width：长度值 | 百分比 | auto

说明：设置块级元素和替换元素的内容宽度

2、height（高度）属性

  • 高度：height：长度值 | 百分比 | auto
  • 最大高度：max-height： 长度值 | 百分比 | auto
  • 最小高度：min-height： 长度值 | 百分比 | auto

说明：设置块级元素和替换元素的内容高度

3、可设置高和宽的HTML属性

  • 块级元素：<p>、<div>、<h1>~<h6>、<ul>、<li>、<ol>、<dl>、<dt>、<dd>等
  • 替换元素：浏览器根据其标签的元素与属性来判断现实的具体内容：<img>、<input>、<textarea>等

4、height和width属性总结

  1. width和height属性设置的是内容的宽和高
  2. width和height属性设置对块级元素和替换元素有效
  3. max-height(width)/min-height(width)有兼容性问题，IE不支持

5、border边框属性

  • 边框宽度（border-width）：thin | medium | thick | 长度值
  • 边框颜色（border-color）：颜色 | transparent
  • 边框样式（border-style）：值

e8439b4faf5de35b5d5280a5515fad6f.png

四个不同方向来表示（上、下、左、右），表示为：

border-[left | right | top | bottom]-width

border-[left | right | top | bottom]-color

border-[left | right | top | bottom]-style

边框缩写：

1、boder:[宽度] | [样式] | [颜色]

2、不同方向：

border-top：[宽度] | [样式] | [颜色]

border-left：[宽度] | [样式] | [颜色]

border-right：[宽度] | [样式] | [颜色]

border-bottom：[宽度] | [样式] | [颜色]

6、padding（内边距）填充属性

设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上，下，左，右）

  1. padding-top:长度值 | 百分比
  2. padding-right：长度值 | 百分比
  3. padding-bottom：长度值 | 百分比
  4. padding-left：长度值 | 百分比

说明：值不能为负

内边距属性缩写：

  1. padding:值1； 4个方向都为值1
  2. padding：值1 值2； 上下为值1，左右为值2
  3. padding：值1 值2 值3； 上为值1，左右为值2，下为值3
  4. padding：值1 值2 值3 值4； 上为值1，右为值2，下为值3，左为值4

7、margin外边距属性

设置元素的内容与边框之间的距离（外边距），分4个方向（上，下，左，右）

  1. margin-top:长度值 | 百分比 | auto
  2. marign-right：长度值 | 百分比 | auto
  3. marign-bottom：长度值 | 百分比 | auto
  4. marign-left：长度值 | 百分比 | auto

说明：值可为负值

外边距属性缩写：

  1. margin:值1； 4个方向都为值1
  2. margin：值1 值2； 上下为值1，左右为值2
  3. marign：值1 值2 值3； 上为值1，左右为值2，下为值3
  4. marign：值1 值2 值3 值4； 上为值1，右为值2，下为值3，左为值4

注：

  • 默认情况下，相应HTML块级元素存在外边距body、h1`h6、p......
  • 声明margin属性，覆盖默认样式
  • margin值为auto，实现水平方向居中显示效果
  • 由浏览器计算外边距
  • 垂直方向，两个相邻元素都设置外边距，外边距会发生合并
  • 合并后外边距高度=两个发生合并边距的=高度中最大值

4685b4dc1ec299bd1fc3b52142fd9aff.png

8、盒子计算

1cebd8f2c4e116877bc1fbd244130c51.png

盒子在页面中所占宽度：左边距+左边框+左填充+内容宽度+右填充+右边框+右边距组成

width=100-20-10-2=68px

盒子在页面中所占高度：上边距+上边框+上填充+内容高度+下填充+下边框+下边距

height=80-20-10-2=48px

  • IE盒子模型：
  1. 如果没有Doctype文档类型声明，各浏览器按照自己的方式解析
  2. 如果有Doctype文档类型声明，按照标准盒子模型来解析

三、应用

display属性

  • inline：元素将显示为内联元素，元素前后没有换行符
  • block：元素将显示为块级元素，元素前后会带有换行符
  • inline-block：行内块元素，元素呈现为inline，具有block相应特性
  • none：此元素不会被显示
于欣烈
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-popover可以设高度_关于（活动）挡烟垂壁距地面高度要求的观点|一个暖通
weixin_34285757的博客
12-14 3149
忽略以上图片，点击蓝色字体关注即可，“设为星标”那就更好了。0、关于题目中的括号为满足平时的使用要求，挡烟垂壁肯定安装的越高越好，如果挡烟垂壁设计安装高度较高，开发商考虑节省造价肯定选用固定挡烟垂壁。本文讨论的是下限要求，故文中的挡烟垂壁更多指的是活动挡烟垂壁。1、相关规范明确要求①、原《建筑设计防火规范》(GB 50016-2006)第9.4.2条条文说明就认为，“需设排烟设施的走道、...
elementPlus popover的高度以及自适应位置
大胆刁民的博客
09-03 8511
借助属性，当Popover弹出框的位置接近边界时，应该自动切换到相反的方向进行显示
CSS基础复习笔记3---盒子模型
Cinderella2333的博客
10-29 348
1.盒子模型 （1）（最大/小）宽度：（max/min-）width:长度/百分比/auto （2）（最大/小）高度：（max/min-）height:长度/百分比/auto 注意：max-height/width和min-height/width有兼容性问题，IE浏览器不支持 问：哪些HTML元素可以设置高和宽属性？ 答：块级元素（&lt;p&gt;、&lt;div&gt;、&lt...
css3盒子模型最详解
qq_37805832的博客
10-31 1804
box-sizing <html lang="en"> <head> <meta charset="UTF-8"> <title>51-盒子box-sizing属性</title> <style> .content{ width: 300px; height: 300px; background-color: red;
el-popover限制高度 加css样式
最新发布
Yangpengxunb的博客
06-05 1712
scoped 删掉 类名写成.el-popover.popoverStyle。加上popper-class="popoverStyle"属性。
elementui 中的 el-popover 自定义高度,并增加滚动条
cmmboy1990的博客
12-16 6334
解决： <style> .el-popover{ height: 500px; overflow: auto; } </style>
react-popover::magnifying_glass_tilted_right:Varld的弹出窗口和工具提示库
05-22
Varld的Popover和工具提示库Varld制造的简单工具提示和Popover组件 :sparkling_heart:例子 :automobile: :delivery_truck:安装 # yarnyarn add @varld/popover# npmnpm install --save @varld/popover工具提示 ...
jquery弹出悬浮插件webui-popover.zip
07-04
除了基础的提示框，WebUI-Popover还支持更复杂的用法，如设置触发方式、自定义样式、添加链接等。例如，要设置为鼠标悬停触发，可以添加"data-trigger='hover'"： ```html <a href="#" data-toggle="popover" data-...
react-popover：一个用于React的智能popover组件
02-26
React弹出 React版本支持 react-popover >= 0.5.0支持React 16，而react-popover < 0.5.0适用于React 15.xx ... 设置放置Popover的位置的首选项。 仅在有多个可用配合的情况下用于指定放置位置才有用。 默认为null
react-native-popover-view：经过测试，适应性强，轻量级本机组件
02-05
React本机弹出视图 经过测试的，适应性强的轻量级<Popover>组件，用于本机响应。 经过测试并可以在iOS和Android上使用。...import Popover from ' react-native-popover-view ' ;function App () { return (
react-native-modal-popover：使用Modal的React-Native纯JS popover
02-05
纯JS popover组件，用于本机 关于本模块 原始的现在已过时，因此我决定发布自己的模块，以避免在package.json中使用github url。 在重写过程中有些东西丢失了，但是现在它使用了Modal和本机动画驱动程序，并且还具有...
el-popover可以设高度_笼养可以提高蛋用鸡生产率，方式多种多样，各有各的好处...
weixin_42502419的博客
11-28 148
蛋用鸡进行笼养好处很多。第一，能有效地利用房屋空间多养鸡，一般笼养比平养密度高2至4倍；第二，鸡不与粪便接触，减少了寄生虫和肠道疾病的危害，因而成活率提高；第三，在笼内饲养，鸡的活动范围小，采食量比平养少，能节省饲料；第四，不用垫料，也不另设产蛋箱，鸡蛋自笼底斜面滚出笼外，蛋表面干净，细菌减少；第五，便于饲养管理，适应搞机械化和自动化装置，提高劳动生产率。国际上，蛋用鸡笼养法很普遍，占80%以上。...
el-popover可以设高度_吧台桌的高度是多少
weixin_39854778的博客
12-13 132
在生活中吧台桌是经常都可以看到的，在装修房子的时候大家都会设计的。因为对装修设计的不了解，大家都不知道该怎么样去合理的设计，那么大家知道吧台桌在设计的时候高度多少合适呢?吧台桌的高度是多少1、如果是在角落上做的吧台，那么操作空间就至少要有90cm。如果做的是单层吧台,那么高度要在110厘米左右,双层吧台又是另外一种高度,在80厘米与110厘米上下,还有其差距至少要有25厘米。2、一般来说...
el-popover可以设高度_卫生间只做干湿分离还不够，现在流行洗手池设隔断，实用又美观...
weixin_30141859的博客
12-05 257
室内装修做隔断非常常见但是洗手池做隔断你听说过吗想必很多人都没有见过吧近几年装修非常流行洗手池做隔断尤其适合小户型。很多家庭在装修的时候都会考虑到卫生间和浴室的干湿分离洗手池往往会被忽略如果只是单纯的在浴室和卫生间间做隔断并没有完全做到干湿分离。想要做到彻底的干湿分离给洗手池设隔断是非常有必要的不仅实用，还非常美观一个小小的隔断能使房间看上去更干净整洁。洗手池隔断和其它空间的隔断不同洗手池设隔断非...
el-popover可以设高度_中蜂可以加《继箱》？了解一下什么是GN蜂箱，如何制作GN箱...
weixin_35943077的博客
12-24 647
中蜂用GN箱的制作参数和步骤，一起来学习下中蜂用GN箱是如何制作的一、gn式巢框、蜂箱设计 巢脾是蜂巢的基本单位。活框饲养群的单张巢脾，筑造粘接在巢框内，这样的巢框便成为人工蜂巢的基本单位。人工蜂巢即由数个这样的巢框组成。因此，巢框成为最基本最重要的蜂具，需要首先设计确定。蜂箱则是人工蜂巢的遮掩物兼作巢框的承载体。我们尊重蜜蜂的单王习性。设计时，以能够充分满足1个中蜂自然群的生活需要为基准。 (一...
el-popover可以设高度_卫生间不做沉箱可以吗？老工程师结合图集这样总结，新手值得学习...
weixin_39641236的博客
12-21 187
本文来源：网络如果卫生间不做沉箱，地漏一般采用无水封地漏，地漏下面设 S 型或者 P 型存水弯都可以；如果采用沉箱，一般沉箱内部不设置存水弯，水封基本要在地坪上方解决，比如洗手盆、浴盆(浴盆排水口距离地坪有一定高度，用于设置水封)，地漏采用有水封地漏(比普通无水封地漏略贵一些，但实际很多家庭装修都是采用全通防臭有水封地漏，这样检修清通的时候可以把地漏卸下来，方便一些)，地漏下方采用 90 度弯头接...
el-popover可以设高度_人类如何观察到纳米级别的世界，科学家告诉你隧道效应可以做到...
weixin_35918734的博客
12-07 123
波的特点对于波长小得多的障碍物不敏感，对于人眼来说，所能够接受的光波波长大约是390nm～760nm，这个波段范围正好和光学窗口所透过的波段相吻合，这是人眼对大自然(或说对太阳)适应的必然结果。在这个范围我们可以看见细菌、细胞这样微小的生命结构。但如果比这个范围更小的波长，我们就无法用光学显微镜观察到了，比如电子。为了观察到更小的水平，人类发明了电子显微镜。量子力学的理论告诉我们，电子也是波，它的...
el-popover可以设高度_短视频如何孵化个人IP？怎么做人设？精细化运营究竟有多重要？...
weixin_36299472的博客
12-19 136
在现在这个短视频高速发展的时代，无数人都想去做短视频，入行之后都不可避免的听到一个词：个人IP。个人IP这个词有点高大上，说人话就是"做人设"。如果你没入行，那么你肯定是在饭圈听见这个词。娱乐圈里面，动不动哪个明星人设崩塌，动不动哪个艺人又出新人设了。换了在短视频里面，也是一样的。有粉丝这种存在，就不可避免的有"人设"。想让自己的短视频得到高度传播，那么必定要给自己做一个"人设"。那么这个人设到底...
word导出表格ui组件_UI组件库-表格高度自适应
weixin_39845039的博客
12-12 163
各种UI组件库都有表格组件，有的叫 table，有的叫 data grid，反正都是为了展示大量数据。像Element的table组件，功能很强大，代码也很多，我们的目标不是copy一个Element的table，而是要根据自己的需求，尽量简化代码，尽量容易使用。今天讨论的是表格高度自适应这个功能，Element的table是没有的，但却是我们项目中常用的，所以一定要加上它！Element可以通过...
el-popover设置高度
05-12
可以使用 `popper-class` 属性来设置 `el-popover` 组件的样式，其中 `popper-class` 属性可以指定一个 CSS 类名，用于自定义 `popper` 元素的样式。你可以通过设置 `max-height` 或 `height` 属性来设置 `el-popover` 的高度，例如： ```html <el-popover popper-class="my-popover" placement="top" title="Popover Title" width="200" trigger="click" > <p>Content of Popover</p> </el-popover> ``` ```css .my-popover .el-popover__content { max-height: 200px; overflow-y: auto; } ``` 在上面的例子中，我们设置了 `el-popover` 的 `popper-class` 属性为 `my-popover`，并在 CSS 中定义了 `.my-popover .el-popover__content` 的样式，其中 `max-height` 属性设置了 `el-popover` 的最大高度为 `200px`，并且添加了 `overflow-y: auto` 属性，当内容超出最大高度时会显示滚动条。你可以根据自己的需求来设置 `max-height` 或 `height` 属性来调整 `el-popover` 的高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值