CSS基础-06-元素大小和（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）

已于 2022-11-18 23:50:47 修改
阅读量618 收藏
点赞数
分类专栏： # CSS基础教程 文章标签： css 元素尺寸 行间距 最大值限制 最小值限制
于 2022-04-12 20:45:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingzuo_1840/article/details/123526164
版权

文章目录

1. 设置元素尺寸（height/width）

语法示例

  • 自动大小
height:auto;width:auto;
  • 像素设置
height:100px;width:100px;
  • 百分百设置
height:50%;width:10%;

完整示例

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            border: 1px solid black;
            height:100px;width:100px;
        }
    </style>
</head>

<body>
<p>元素大小测试</p>
</body>

</html>
  • 结果显示
    在这里插入图片描述

2. 最大值、最小值（max-height|width、min-height|width）

语法示例

  • 设置元素最大值
max-height: 50px;
max-width:500px;
  • 设置元素最小值
min-height: 50px;
min-width:500px;

完整示例（最大值限制）

当元素高设置为400px，但是最大值限制为200px，最后元素高度为200px。

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            border: 1px solid black;
            height: 200px;
            width: 400px;
            max-width: 200px;
        }
    </style>
</head>

<body>
    <p>元素大小测试</p>

</body>
</html>
  • 结果显示

在这里插入图片描述

完整示例（最小值限制）

设置对打宽度100px，自小宽度设置为50%。

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            border: 1px solid black;
            height: 200px;
            width: 100px;
            min-width: 50%;
        }
    </style>
</head>

<body>
    <p>元素大小测试</p>

</body>

</html>

在这里插入图片描述

3. 设置行间距（line-height）

语法示例

  • 用像素设置
line-height:10px;
line-height:50px;
  • 用百分比设置
line-height:30%;
line-height:200%;
  • 用数值设置
line-height:0.3;
line-height:2;

完整示例

  • 代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CROW-SONG</title>
    <style>
        p {
            text-decoration: underline;
        }

    </style>
</head>

<body>
    <p>平生无用是逍遥，</p>
    <p>应悔曾效楚歌狂。</p>

</body>

</html>
  • 结果

在这里插入图片描述

玄德公笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
IE6支持max-width/height与min-width/height(完美解决方案)
09-25
当元素的滚动宽度（scrollWidth）超出最大值时，可以将其设置为最大宽度，当滚动宽度小于最小值时，可以设置为最小宽度，否则保持auto。示例代码如下： ```css img { max-width: 620px; _width: expression(this....
CSS中的宽高自适应以及最小最大宽/高
liu0218的博客
08-03 6582
一、宽度自适应 二、高度自适应 三、最小和最大宽度值 四、最小和最大高度值
对min/max-width/height的认识
weixin_33682719的博客
08-03 251
在css世界中，提出了min/max-weight的应用场景：自适应布局或者是流式布局中才会出现，从最小和最大上面我们知道他们是具有边界行为的属性。 在现在的pc端开发中，为了适应各种不同分辨率的显示屏，min/max-width就会起到很关键的作用。 应用场景 下面列举一个自己遇到的小情况（电脑分辨率为1920*1080），正常情况如...
html lineheight div,html – Chrome上的文本输入：line-height似乎有最小值
weixin_34788662的博客
06-28 336
我想我做到了！在我的测试中，似乎line-height必须至少约115％的字体大小，所以如果你想50px高元素你必须有〜43px的东西，所有排队： 图1.字体大小为50px线宽的86％。事情排列，但不遵守OP要求的50px字体大小。input, span {border: 2px solid red;display: inline-block;font: 43px Arial;line-heigh...
CSS之关于min-width、max-width、min-height和max-height的使用
qwerty053的博客
12-01 3683
????min-height 设div父盒子A中有个div子盒子B，设B的min-height为H，则H为盒子B的最小高度值，意思是： 当B中内容填充的高度小于H时，B的高度就是H；当B中内容填充的高度大于H时，B的高度就是其中内容填充到的高度。 通俗一点来说，就是如果min-height的高度设小了还可以变大，但是设大了就只能这样。看下面的例子： 当H为100px时： ==>⭐️最小就为100px，若你填充的内容高度小于100，就以最小为准 当H为5px时： ==>⭐️最小为5px
css同时设置最大宽度和最小宽度
lianflower的博客
09-01 370
【代码】css同时设置最大宽度和最小宽度。
学习样式表CSS参考-常用的CSS知识
10-30
`min-width`是一个非常有用的CSS属性，用于确保元素的宽度不会低于特定的最小值。然而，IE并不支持该属性，而是将普通的`width`属性作为最小宽度来处理。为了解决这一问题，可以采用以下方法： 1. **添加一个容器**...
jQuery制作图表之一--线图
04-17
- `scaleY`：定义Y轴的最小值、最大值以及间隔。 - `labelX`：定义X轴的标签。 2. **示例代码**：下面是一个更详细的配置示例，展示了如何使用`config`对象来自定义线图。 ```javascript $(document).ready...
前端-图像明暗切换-滑块控制
06-24
滑块由`<input type="range">`创建，它的`min`、`max`和`value`属性分别定义了滑块的最小值、最大值和初始位置。 接下来是CSS部分，我们可以通过CSS来美化滑块和图像容器： ```css .container { display: flex; ...
react-slider
04-09
这个例子中，滑块的最小值为0，最大值为100，初始值设为50。 接下来，我们需要用React来构建组件。React组件是可重用的代码块，可以通过props接收外部数据并返回React元素。创建滑块组件时，我们可以定义一个名为`...
设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
weixin_39714528的博客
08-03 1199
作者：Ahmad shaded译者：前端小智来源：sitepoint点赞再看，微信搜索【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。2020年4月8日，Firefox浏览器支...
CSS 里的min-width/max-width和min-height/max-height
SUZEHUI9636的博客
09-05 1230
css属性max-width应用场景
第二关：min-width/max-width和max-height/max-height
rong05151005的博客
04-02 2853
和width/height相比，min-width/height和max-width/height有以下四点不同： 1、min-width/max-width是为流而生的，像width/height这种定死的砖头式布局，min-width/max-width就没有存在的意义 ，min-width/max-width一定是自适应布局或流体布局中。常应用于表格或图片，在公众号的热门文章中，经常会有图...
CSS 的大小
cherrylqq9的博客
08-31 910
CSS 的大小 CSS 宽度和高度 —width、height CSS 通过height 和 width 属性来设置元素的高度和宽度。 height 和 width 属性不包括内边距、边框或外边距。 它设置的是元素内边距、边框以及外边距内的区域的高度或宽度 height 和 width 属性可设置如下值： auto - 默认。浏览器计算高度和宽度。 length - 以 px、cm 等定义高度/宽度。 % - 以包含块的百分比定义高度/宽度。 initial - 将高度/宽度设置为默认值。 inherit
line-height 3种设置方式的区别
weixin_34353714的博客
01-29 1216
前言：平常写CSS习惯性的写 line-height: 1.5em，也见过类似line-height: 1.5，line-height: 150%这种写法，但是从来没有想过这三者有什么区别，最近突然看到有人提到这个问题，很感兴趣，于是查资料自己尝试了一下。 首先有一点要明确的是，line-height是具有继承性的，如果直接在某个元素上使用line-height，那么这三种写法是没有区别的，比如给...
关于line-height
weixin_30871293的博客
04-29 86
line-height不允许负值，给定值之后会根据font-size计算行高，line-height指定的行高是行高最小值，设置height可以增大行高line-height的计算：以px为例，line-height减font-size再除以二，即为font的上下间距normal的情况为默认值，浏览器会计算出“合适”的行高，与设置的字体有关。多数浏览器（Georgia字体下）取值为1...
对于line-height的理解和应用
Lonelydesertea的博客
12-05 373
对于line-height的理解和应用
深入了解 CSS：探索如何设置元素的大小
最新发布
kkdsgjg的博客
05-12 386
在实际的网页设计和开发中，根据具体的需求和设计目标，灵活运用这些方法，可以创建出更加丰富多彩的网页效果和用户界面。6.盒子模型总大小：如果需要将元素的大小设置为包括内边距和边框在内的总大小，可以使用 box-sizing 属性，并将其值设为 border-box。8.网格布局：通过灵活设置元素的大小和定位，可以创建各种复杂的网格布局，实现多栏等设计效果。5.内容框大小：设置 width 和 height 属性时，指定的是内容框的大小。2.百分比大小：可以使用百分比来设置元素的大小，相对于其父元素的尺寸。
max-width min-width max-height min-height
like_jack的博客
03-28 2175
max-width:设置最大宽度之后，其对象宽度将不超过此最大宽度值，一般设置变量的宽度，固定宽度就不能同时设置。值不能为负数，可以是百分数和具体数值。 .set-max-w{border:1px solid red;max-height: 100px;max-width: 50px;} .set-min-w{border:1px solid red;margin-top: 200px; min-h
实现一个类似element ui 的 el-slider
06-07
可以使用 HTML、CSS 和 JavaScript 实现一个类似 Element UI 的滑块组件。以下是一个简单的示例： HTML： ``` <div class="el-slider"> <div class="el-slider__bar"></div> <div class="el-slider__button"></div> </div> ``` CSS： ``` .el-slider { position: relative; height: 6px; width: 100%; background-color: #e5e5e5; } .el-slider__bar { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; width: 100%; background-color: #409EFF; } .el-slider__button { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 16px; width: 16px; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; } ``` JavaScript： ``` const slider = document.querySelector('.el-slider'); const bar = slider.querySelector('.el-slider__bar'); const button = slider.querySelector('.el-slider__button'); let isDragging = false; function updateButtonPosition(percent) { button.style.left = `${percent}%`; } function updateBarWidth(percent) { bar.style.width = `${percent}%`; } function updateValue(percent) { const min = parseFloat(slider.getAttribute('data-min')) || 0; const max = parseFloat(slider.getAttribute('data-max')) || 100; const value = (max - min) * percent / 100 + min; slider.setAttribute('data-value', value); slider.dispatchEvent(new Event('input')); } function handleMouseDown(event) { isDragging = true; } function handleMouseMove(event) { if (isDragging) { const rect = slider.getBoundingClientRect(); const percent = Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100)); updateButtonPosition(percent); updateBarWidth(percent); updateValue(percent); } } function handleMouseUp(event) { isDragging = false; } button.addEventListener('mousedown', handleMouseDown); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); ``` 以上代码实现了一个基本的滑块组件，可以拖动滑块按钮来改变其值，并且会触发 `input` 事件。需要注意的是，这里使用了 `data-min` 和 `data-max` 属性来设置滑块的最小值和最大值，使用了 `data-value` 属性来设置当前的值（通过 `input` 事件更新）。可以在 HTML 中动态设置这些属性来初始化滑块组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玄德公笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值