min-height、min-width、max-width、max-height的理解中的重点

在学习css的min-height、min-width、max-width、max-height这四个属性时，又遇到了一些问题和疑惑。参考了以下三个博客后把它们搞清楚了。
如何理解CSS的min-height、min-width、max-width、max-height
【css】max-height，min-height，height一起使用时，优先级问题
min-height和min-width的用法总结

一、min-width不生效的问题

<div class="test">我是一只小青蛙我是一只小青蛙我是一只小青蛙</div>

   .test{min-width: 100px;height: 60px;background-color: #E5B783;}

结果如图：

会发现min-width并没有生效。
问题原因是：
min-width会继承父元素的width，而min-height不会。
如果无父元素，也就是最外层是body，则默认100%。 ——摘自xi-2130博客

解决方法：浮动，定位，使之脱离文档流
(1) position: absolute：

  .test{min-width: 100px;height: 60px;background-color: #E5B783;position: absolute;top: 0;left: 0;}

(2) position: fixed：

  .test{min-width: 100px;height: 60px;background-color: #E5B783;position: fixed;top: 0;left: 0;}

(3) float进行元素浮动：

    .test{min-width: 100px;height: 60px;background-color: #E5B783;float: left;}

二、同时使用时的优先级问题

MDN说法：
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.

实际效果：
当 height 和 max-height一起使用时，谁小听谁的
　　max-height < height 元素高度： max-height
　　height < max-height 元素高度： height

当 height，max-height，min-height一起使用时
　　height > max-height > min-height 元素高度：max-height
　　height > min-height > max-height 元素高度：min-height（虽然这里的height没有小于min-height，但是它大于了max-height，因此导致height失效；而max-height又小于min-height，导致max-height失效，因此最后对元素高度起作用的就只是min-height）
　　min-height > height > max-height 元素高度：min-height

CSS中min-height、min-width、max-width、max-height的理解及优先级问题相关推荐

Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
CSS中相对定位与绝对定位
绝对定位: absolute, fixed 相对定位: relative 默认值: static <!DOCTYPE html> <html><head><m ...
设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
作者:Ahmad shaded 译者:前端小智来源:sitepoint点赞再看,微信搜索[大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github. ...
一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景
作者:Ahmad shaded 译者:前端小智来源:sitepoint 点赞再看,微信搜索**[大迁世界]**关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://gi ...
【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
html 设置min height,CSS中min-height使用技巧
DIV+CSS中最小高度设定min-height设定最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozi ...
在CSS中实现height:100%-200px； width:100%-200px,既长度或宽度百分百减去200px
实例: .main{height:calc(100% - 200px)width:calc(100% - 200px) } 注: 1.减号左右必须打空格,否则不生效 2.任何长度值都可以使用calc( ...
css中width是什么意思,css width是什么意思
width是宽度的意思,它是CSS中的一个用于设置元素宽度的属性. width属性设置元素的宽度. width属性定义元素内容区的宽度,在内容区外面可以增加内边距.边框和外边距:行内非替换元素会忽略这 ...
CSS中的各种width（宽度）
一 window对象的innerWidth.outerWidth innerWidth是可用区域的宽度(内容区 + 滚动条) outerWidth是浏览器窗口的宽度(可用区域的宽度+审查元素区域的宽度 ...

CSS中min-height、min-width、max-width、max-height的理解及优先级问题

min-height、min-width、max-width、max-height的理解中的重点

一、min-width不生效的问题

二、同时使用时的优先级问题

CSS中min-height、min-width、max-width、max-height的理解及优先级问题相关推荐

最新文章

热门文章