随笔档案「2021年4月」 - chen8840

html元素height(width)是怎么确定的？

摘要：1.若height是确定的（比如height:100px)，则height直接可确定（还受min-height,max-height影响，见height,min-height,max-heigth的作用机制问答)。 2.若width是不确定的（比如width: min-content 或 width 阅读全文

posted @ 2021-04-25 11:15 chen8840 阅读(1021) 评论(0) 推荐(0)

fill-available,min-content,max-content,fit-content的作用机制

摘要：fill-available:宽度由外部元素决定（div）min-content:宽度由内部元素宽度缩小到最小的最大内部元素宽度决定max-content:宽度由内部元素宽度扩大到最大后的最大内部元素宽度决定fit-content:（inline-block）先取max-content和min-c 阅读全文

posted @ 2021-04-25 09:22 chen8840 阅读(102) 评论(0) 推荐(0)

height,min-height,max-heigth的作用机制问答

摘要：1.min-height和height同时存在，子元素高度100%，以哪个高度为准？答：min-height 2.height存在，子元素高度100%，子元素内容高度大于100%，子元素高度为多少？答：高度为父元素高度100% 3.min-height 和 height 同时存在且相等，子元素高阅读全文

posted @ 2021-04-25 09:15 chen8840 阅读(345) 评论(0) 推荐(0)

使用flex防止fit-content子元素冲出父元素宽度的方法

摘要：父元素设置了min-width:fit-content后，其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" 阅读全文

posted @ 2021-04-23 10:14 chen8840 阅读(618) 评论(0) 推荐(0)

使用fit-content撑开子元素

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-04-21 09:34 chen8840 阅读(221) 评论(0) 推荐(0)

使min-height子元素height百分比生效的2种方式

摘要：方式1，使用flex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" 阅读全文

posted @ 2021-04-21 09:26 chen8840 阅读(266) 评论(0) 推荐(1)