平武建站

CSS常用的知识点有哪些

这篇文章主要讲解了“CSS常用的知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS常用的知识点有哪些”吧！

创新互联公司基于分布式IDC数据中心构建的平台为众多户提供成都天府联通服务器托管四川大带宽租用成都机柜租用成都服务器租用。

一、width(宽)& height(高)

浏览器中，明确了width和height就可以绘制出一块矩形区域，也决定(量化)了当前HTML标签渲染后在屏幕上占据的有效矩形面积。

1.1 width与height的值

CSS常用的知识点有哪些

height属性规则与width相同。另外max-height、min-height优先级大于height，同理max-width和min-width优先级大于width。

1.2 height:100%无效

我们有时会在CSS里写height: 100%，发现并无效果，如下：

* {   padding: 0;   margin: 0;   border: 0; } body {   background-color: green; /*   height: 100%; */   border: 5px solid greenyellow; } .block {   width: 100%;   height: 100%;   background-color: red; }

block类 div的高度并未按照我们预想那样撑满全屏高度

CSS常用的知识点有哪些

高度100%并未铺满屏幕

代码&效果：https://codepen.io/DYBOY/embed/RwoJKRP

block类的父级(包含块)是body，body在未设置值的时，height值为auto，body的实际计算高度为内容撑开的高度，即为0(可以将上述代码的border样式取消注释，可看到body的高度)

那么子元素block类的高度即等同于0

body {     background-color: azure;     height: auto; } .block {     width: 100%;     height: 0 * 100%; // 0     background-color: red; }

所以此时block类所在的div盒子的高度无效，height为0，即在浏览器上无渲染高度浏览器的渲染规则可理解记忆为：深度优先遍历计算

子元素的相对单位的计算值都是基于父/祖先元素对应的属性值，auto是基于内容区域撑开计算所得。

浏览器渲染HTML文档流，背景色默认为白色，如果文档中的html、body标签设置了背景色，这两个标签的背景色实际设置的是浏览器视口的背景色。

二、padding(内边距)& border(边框)& magin(外边距)

盒模型可以看作四个“同心矩形”组合而成，如下图

CSS常用的知识点有哪些

对于这三个属性的表现其实并无特别可说明，见上图可知意。

元素分为行级元素和块级元素，行级元素的margin和padding的上下值无效。

2.1 百分比单位计算

自己之前一直有个误区，认为padding、margin的百分比单位的计算基数是当前元素矩形区域宽高来算，但是根据包含块的规则，他们的计算基数应该是包含块的width值。

之前团队里大佬洪岩问：“如何实现一个高度是自适应宽度3倍的图片?”

实现方法1:利用Chrome浏览器最新支持的aspect-ratio属性，其问题就是C端浏览器兼容性不好

.box {     aspect-ratio: 1/3; // width/height 宽高比 }

CSS常用的知识点有哪些

aspect-ratio效果

实现方法2:巧用包含块规则(padding和width属性百分比值的计算基数是包含块的宽度)+背景图实现

CSS常用的知识点有哪些

利用包含块规则实现

代码和演示：https://codepen.io/DYBOY/pen/JjbZgeE

2.2 border-radius百分比和像素

border-radius属性用于描述边框圆角半径，根据资料如果是百分比单位，则根据所在**盒子模型的矩形宽和高(包含border和padding)**作为计算基数，border-radius的值描述的是边框角度所在椭圆的半长轴和半短长轴长度。

border-*-radius属性的两个长度或百分比值定义了四分之一椭圆的半径，该半径定义了外边界边角的形状(参见下图)。第一个值为水平半径，第二个为垂直半径。如果省略第二个值，则从第一个复制。如果任一长度为零，则角为正方形，而不是圆角。

CSS常用的知识点有哪些

水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。

来看下面这个示例：

* { padding: 0; margin: 0; } body { background-color: #fff; } .box { position: relative; width: 200px; height: 200px; margin: 10px auto; background-color: #00abef; border-radius: 100px; display: flex; justify-content: center; align-items: center; font-size: 32px; color: #fff; } .style1 { padding: 20px; } .style2 { padding: 20px; border-radius: 50%; } .style3 { padding: 20px; border-width: 10px; box-sizing: border-box; }

.a.b：（无空格）当a和b在同一标签类名中同时出现才选择 .a .b：（有空格）选择a的所有后代b .a>.b：（>）选择a的子代b .a, .b：（,）a与b样式相同 .a+.b：（+）选择a紧邻的兄弟b .a~.b：（~）有共同父元素，选择a后的所有b，ab不必紧邻

.box { display: flex; /* 还可以设置行内元素的 inline-flex */ flex-direction: row; /* 主轴水平！：row：列（左至右）；row-reverse：列（右至左）主轴竖直！cloumn：行（上至下）；column-reverse：行（下至上） */ flex-wrap: nowrap; /* 一行放不下的时候：nowrap不换行，wrap换行，wrap-reverse换行第一行在下方 */ /* flex-flow: row nowrap; 是上面两者的简写形式 */ justify-content: flex-start; /* 定义项目在主轴上的对齐方式 flex-start左侧，flex-end右侧，center居中，space-between两端对齐项目间隔相等，space-around项目左右两侧间距相同 */ align-items: flex-start; /* 定义项目在纵轴上的对齐方式 flex-start上，flex-end下，center居中，baseline项目中第一行文字对齐，stretch默认值高度未设置时候将撑满容器高度 */ } .item { order: 0; /* 定义项目的排列顺序，数值越小越靠前，默认0 */ flex-grow: 0; /* 定义剩于空间的放大比例，默认0不放大，如果多个item均为1，则将等分剩于的空间，不同值按照比例分配剩于空间 */ flex-shrink: 1; /* 定义项目缩小比例，默认为1，空间不足，均等比例缩小，为0则不缩小 */ flex-basis: auto; /* 定义项目在分配剩于主轴空间之前的主轴占据的长度，浏览器会根据这个属性去计算是否有剩于的空间 */ /* flex: auto; 是flex-grow、flex-shrink和flex-basis的简写默认值：0 1 auto */ align-self: flex-start; /* 设置单个项目与其他项目不一样的对齐方式，可覆盖父容器设置的align-items，默认auto继承父元素的align-items值 auto | flex-start | flex-end | center | baseline | stretch */ }

@supports(color: var(--theme-color)) { // 支持上面的的处理方式则下面的css将生效 .class-box { color: var(--theme-color); } } // 对于selector的支持不好 @supports not (color: var(--theme-color)) { // 不支持上面的的处理方式则下面的css将生效 .class-box { color: red; } }