css - 随笔分类 - chen8840

纯CSS实现contain布局

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 阅读全文

posted @ 2023-07-18 10:46 chen8840 阅读(58) 评论(0) 推荐(0)

如何让某一行子元素根据父元素高度变化，当高度足够时不显示滚动条，当高度不够时显示滚动条

摘要：只需要父元素设置flex布局，子元素设置overflow: auto;即可上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" 阅读全文

posted @ 2023-07-06 15:11 chen8840 阅读(264) 评论(0) 推荐(0)

如何让父元素的最小宽度为某一个子元素的内容宽度

摘要：具体做法是让除了那个子元素以外，所有子元素都使用flex布局，让后再叠加一层flex-grow:1;width:0的inner布局上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv 阅读全文

posted @ 2023-07-06 14:23 chen8840 阅读(69) 评论(0) 推荐(0)

B.E.M 规范

摘要：BEM文档 BEM: A New Front-End Methodology 如何看待 CSS 中 BEM 的命名方式？ Battling BEM CSS: 10 Common Problems And How To Avoid Them 编写模块化CSS：BEM 编写模块化的CSS:命名空间阅读全文

posted @ 2022-06-07 15:08 chen8840 阅读(46) 评论(0) 推荐(0)

word-break,word-wrap,line-break相关知识

摘要：1.word-break: break-word与word-wrap: break-word的区别？答：计算最小宽度（width: min-content）时有区别，word-break: break-word计算的是单个字符的宽度，word-wrap: break-word计算的是单个单词的宽度阅读全文

posted @ 2021-11-03 00:24 chen8840 阅读(503) 评论(0) 推荐(0)

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 阅读(1023) 评论(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 阅读(346) 评论(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 阅读(619) 评论(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 阅读(223) 评论(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)

在less里面使用js函数

摘要：.colorPaletteMixin() { @functions: ~`(function() { this.colorPalette = function() { return '123px'; }; })()`; } // It is hacky way to make this functi 阅读全文

posted @ 2020-07-17 10:06 chen8840 阅读(3183) 评论(0) 推荐(0)

display: table-cell里面文字打点的方法

摘要：fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff... 阅读全文

posted @ 2019-09-11 09:12 chen8840 阅读(216) 评论(0) 推荐(0)

background-color和background-image相关细节

摘要：1.background-color 是以border-box作为他的左上角来定位的 2.background-image 默认是以padding-box作为他的左上角来定位的 3.background-origin 可以改变background-image 的定位位置 4.background-i 阅读全文

posted @ 2018-07-27 00:24 chen8840 阅读(305) 评论(0) 推荐(0)

巧用padding生成正方形DIV

摘要：Document 阅读全文

posted @ 2018-06-14 09:13 chen8840 阅读(217) 评论(0) 推荐(0)

使flex-direction: column的子元素height: 100%生效的办法

摘要：在flex-direction: column子元素里直接使用height：100%，height并不会被设置成100% 解决办法是在flex-grow-1这一层再加一个flex row 从以上情况可以大致推测 flex-column子元素的height:100%会优先于flow布局来计算高度，所以阅读全文

posted @ 2018-06-08 19:03 chen8840 阅读(3061) 评论(0) 推荐(0)

防止HTML出现滚动条时页面的抖动

摘要：这样的布局当body出现滚动条时container会往左移动7px左右为了消除这样的滚动，在.container上加入如下规则阅读全文

posted @ 2018-03-21 22:23 chen8840 阅读(755) 评论(0) 推荐(0)

让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法

摘要：Document header bodybodybodybodybody footer Document header bodybodybodybodybody ... 阅读全文

posted @ 2016-04-11 19:11 chen8840 阅读(311) 评论(0) 推荐(0)

两列自适应布局最佳方法

摘要：阅读全文

posted @ 2016-01-06 14:25 chen8840 阅读(178) 评论(0) 推荐(0)

清除浮动的最佳方法

摘要：.clearfix:after { content:''; display: table; clear: both;}.clearfix { *zoom: 1; } 阅读全文

posted @ 2016-01-06 13:50 chen8840 阅读(137) 评论(0) 推荐(0)

随笔分类 - css