摘要：一、尽可能设置父元素的高度（这是最简单、灵活的方式）。然后通过设置子元素的 flex-basis，flex-shrink，flex-grow分配空间，再使用justify-content, align-items. align-content进行版式控制。 二、父元素不设置高度，依靠子元素的高度来撑
阅读全文
posted @ 2024-06-29 12:37
随笔分类 - CSS
摘要：.child { /* box-sizing: border-box; */ box-sizing: content-box; margin: 10px; padding: 10px; height: 100%; background-color: blue; } 1、子元素height: 100%
阅读全文
posted @ 2022-04-18 11:18
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e
阅读全文
posted @ 2022-02-15 23:00
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e
阅读全文
posted @ 2022-02-15 19:36
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @ 2020-11-21 16:37
摘要：body { font: 12px/1.5 或 font: 12px/36px } 1.5是当前元素字体的1.5位
阅读全文
posted @ 2020-11-21 16:10
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @ 2020-11-21 15:49
摘要：d1,d2,d3的width之和大于父元素的宽，并且都没有设置flex-shrink属性时， 会自动按自身比例收缩，见下图： 如果d1,d2,d3都设置了flex-shrink值时，即使是0， 则会溢出父元素的边框，见下图： 当d1,d2,d3任何一个设置了flex-shrink属性值时，（其它两个
阅读全文
posted @ 2020-05-16 00:46
摘要：当 d1,d2,d3未设置widht 并且flex-grow 为1时， 它们等分父元素的width,如下图： 当d1,d2,d3 未设置widht时， 设置flex-grow都为小数时，相当于按百分比占据父元素的width, 如d1->0.1 d2->0.2 d3->0.3时， 见下图： 如果d1,
阅读全文
posted @ 2020-05-16 00:09
摘要：flex-basis是flex中的 子元素 属性，默认为auto ！！！此属性优先级大于width，但受min-widht， max-width的限制！！！ flex-basis为百分比时，是指父元素的百分比。 默认auto时, 为子元素设置的width. 当 子元素的width设置为 百分比时，指
阅读全文
posted @ 2020-05-15 23:40
摘要：space-around对齐时， 三个div之间的距离是与父边框之间距离的【两倍】 space-evenly对齐时，三个div之间的距离是与父边框之间的距离 【相等】 space-between对齐 center对齐时，是三个div挨在一起（当做一个元素）居中。
阅读全文
posted @ 2020-05-15 22:53
摘要：元素默认是static定位 一 、相对定位 relative 1. 原位置仍被占据。 2, 以当前元素的原坐标开始定位 二、绝对定位 absolute 1. 释放元素所占位置。 2. 参考最近的外层元素（不是static定位的外层元素）的坐标。 三、固定定位 最简单的定位，以当前窗口的左上角为原点。
阅读全文
posted @ 2020-05-14 11:17
