首页
学习
活动
专区
工具
TVP
发布

CSS max-width: 0;

CSS,大家都知道max-width是要在宽度超过后才会生效,但今天我发现一个神奇的现象, 为表格td加上max-width: 0;可以让上下两个表格自动对齐,这句的作用到底是什么还有待研究,今天先在这里做个记录...td.t{width:80px;} td.c{max-width: 0;} 网路上能查到的相关max-width:0的资料非常的少,翻遍了整个度娘也没找到几条有用的信息,在这个帖子上发现了一些蛛丝马迹(...https://stackoverflow.com/questions/19907020/what-does-max-width-0px-do) 坛友Adam Botley说到: max-width:...基本意思是: max-width: 0px基本防止元素膨胀。在上下文中。它可以防止单元格根据文本区域的内容进行扩展。...本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息: 原文出处:Yiiven https://www.yiiven.cn/css-max-width.html

53350
您找到你想要的搜索结果了吗?
是的
没有找到

CSS之关于min-width、max-width、min-height和max-height的使用

不同,子盒子的min-width和max-width会受到父盒子width的影响 ---- :fire:min-width :star:设子盒子的min-width为H,父盒子widthwidth,使用...min-width是指: 如果H<width,意味着子盒子还可以更大一点,所以此时子盒子的宽度=父盒子宽度width 如果H>width,则子盒子宽度为H 举例: 当父盒子A宽度为200px,子盒子B...min-width为10px时: Snipaste_2021-12-01_22-19-37.png 当父盒子A宽度为10px,子盒子B min-width为200px时,与上图一样 ---- :fire...:max-width :star:设子盒子的max-width为H,父盒子widthwidth,使用max-width是指: 如果H<width,则子盒子宽度为H 如果H>width,子盒子要受到父盒子的约束...,子盒子 max-width为200px时,同上图

1.3K20

CSSCSS 背景设置 ⑧ ( 背景设置案例 | 导航栏按钮 )

文章目录 一、背景附着 1、HTML 标签结构 2、设置 div 盒子内容水平居中显示 3、设置链接标签默认显示样式 4、设置鼠标经过样式 二、完整代码示例 1、代码示例 2、效果展示 一、背景附着...120 x 50 像素 , 这里将 标签 也设置成 120x50 大小 ; width: 120px; height: 50px; 文字水平居中 , 通过设置 text-align: center;...即可 ; 文字垂直居中 , 需要将行高与文本高度设置成一致即可 , 之前设置的 标签 的高度为 50 像素 , 这里将行高设置成 50 像素即可 ; line-height: 50px; 图片背景设置...设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 120px; height: 50px; /*...设置默认的显示样式 */ a { /* 转为行内块样式 */ display: inline-block; width: 120px; height: 50px; /*

4.3K20

前端学习笔记之CSS属性设置 CSS属性设置

单位是像素 (0px 0px) 或任何其他的 CSS 单位。  如果只设置了一个值,另一个值就是50%。  可以混合使用%和position值。...和height属性设置 #2、元素的宽度和高度 宽度= 左边框 + 左内边距 + width(内容的宽) + 右内边距 + 右边框高度 高度= 。。。。...css显示模式:块级、行内、行内块级 在HTML中HTML将所有标签分为两类,分别是容器级和文本级 在CSSCSS也将所有标签分为两类,分别是容器级是块级元素和行内元素 #1、HTML中容器级与文本级...CSS显示模式转换 属性 描述 值 display 可以通过标签的display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素...:边框的宽度 边框的样式 边框的颜色border-bottom:边框的宽度 边框的样式 边框的颜色 分别指定宽度、格式、颜色 1、连写:(分别设置四条边的边框)bord-width: 上 右 下 左border-style

5.7K30

CSSCSS 背景设置 ⑦ ( 背景简写 )

文章目录 一、背景简写 1、语法说明 2、代码示例 一、背景简写 ---- 1、语法说明 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 ,...定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度, 让页面滚动起来 */ height: 2000px;.../* 设置背景图片 */ background-image: url(images/bg.jpg); /* 设置图片背景平铺模式 */ background-repeat...scroll; } 类似于 文本样式的字样样式综合写法 方式 , 选择器 { font:font-style font-weight font-size/line-height font-family;} CSS..., 让页面滚动起来 */ height: 2000px; /* 设置背景图片 */ /*background-image: url(images/bg.jpg);*/

2.6K10

不要再用js设置rem了,现代css自适应方案来了

padding、height、width、border-radius 这些属性的时候,使用 em 很方便,会动态根据 font-size 变化 那既然元素的 em 是根据当前元素的 font-size...等等,这样统一的字号标准,让页面不论是缩放还是适配都游刃有余,所以当你拿捏不准使用什么方式来设置一些元素的时候,就按照上述的来,一般是没有什么问题的 使用 js 设置根元素 rem 自从有了 rem...这个便捷的相对单位,我们就有了一些奇怪的操作,比如用 js 设置根元素大小这个操作,就是将网页的根元素字号根据屏幕的大小动态设置为一个固定值,然后在页面中根据 ui 给出的图,换算成 rem 值,进行各种适配...这确实是会增加我们一些工作量,因为你需要思考什么时候使用 em ,什么时候使用 rem 以及 px 之间相互切换,但是好处也是很明显的 如果你想要将当前的内容做一个响应式 只需要这样 @media (min-width...: 800px){ :root{ font-size: 1em } } @media (min-width: 1200px){ :root{ font-size: 1.2em

4K41

CSSCSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

图片 位置是 左上角 ; 设置背景位置的 CSS 语法如下 : background-position : length length background-position : position position...: 设置 background-position 属性值 之前 需要先设置 background-image 背景图片属性 ; 方位设置 : 如果设置 position 方位属性值 , 设置的是 x...: 如果 只设置了一个方位值 , 那么另外一个默认居中对齐 , 如 : 设置了 left , 则垂直方向居中对齐 ; 设置了 top , 则水平方向居中对齐 ; 坐标设置 : 如果 设置的是...length 长度坐标 , 则 第一个数值是 x 坐标 , 第二个数值是 y 坐标 ; 设置了一个值 : 如果 只设置了一个坐标值 , 那么该设置为 x 坐标设置 , 垂直方向默认居中设置 ; 同时设置放位和坐标...*/ .background { width: 400px; height: 400px; color: black; background-color:pink;

3.8K20

只听说过CSS in JS,怎么还有JS in CSS

本文由作者 Menndy 授权原创发布 CSS in JS CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。...从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。...将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关系,生成唯一的选择器来锁定作用域。...尽管CSS in JS不是一个很新的技术,但国内的普及程度并不高。...JS in CSS又是什么 在上面我们提到CSS in JS就是把CSS写在JavaScript中,那么JS in CSS我们可以推断出就是可以在CSS中使用JavaScript脚本,如下所示。

6.5K40
领券