2020年10月5日

528 圣杯布局

摘要： 圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局； 圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v 阅读全文

posted @ 2020-10-05 21:35 冲啊！ 阅读(99) 评论(0) 推荐(0)

527 三列布局：float + margin，float + overflow，table + table-cell，flex，grid，postion，中间自适应-四种方法

摘要： 三列布局一般情况下是指三列中左边两列是确定的宽度，右边一列是自动填满剩余所有空间的一种布局效果; 两列定宽,一列自适应(右边) float + margin属性实现； float + overflow属性实现； display属性的table相关值实现； 使用flex实现； 使用Grid实现； 两侧 阅读全文

posted @ 2020-10-05 20:46 冲啊！ 阅读(194) 评论(0) 推荐(0)

526 两列布局：float + margin，float + margin(fix)，float + overflow，table + table-cell，绝对定位，flex，Grid网格布局

摘要： 两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果； 左列定宽, 右列自适应 float + margin属性实现； 优点：实现方式简单 缺点：自适应元素margin属性值需要与定宽元素的width属性值保持一致；定宽元素浮动与自适应元素不浮动导 阅读全文

posted @ 2020-10-05 20:28 冲啊！ 阅读(267) 评论(0) 推荐(0)

525 水平垂直居中：table + margin-auto，position定位，flex + justify-content + align-items

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

posted @ 2020-10-05 20:08 冲啊！ 阅读(163) 评论(0) 推荐(0)

524 垂直居中布局：table-cell+vertical-align，绝对定位position，flex + align-items

摘要： 垂直居中布局解决方案1 - table-cell+vertical-align <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid 阅读全文

posted @ 2020-10-05 20:03 冲啊！ 阅读(210) 评论(0) 推荐(0)

523 水平居中布局：text-align，margin-auto，text-algin + inline-block，绝对定位position + transform，flex + justify-content

摘要： 水平居中布局 水平居中布局解决方案1-text-align <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia 阅读全文

posted @ 2020-10-05 19:42 冲啊！ 阅读(236) 评论(0) 推荐(0)

522 解读伪类和伪元素

摘要： https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudoclasses_and_pseudo-elements 伪类 ⽤于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据⽤户⾏ 阅读全文

posted @ 2020-10-05 13:25 冲啊！ 阅读(138) 评论(0) 推荐(0)

导航