Loading... 来自：柠檬有时不酸 # CSS ## 一、CSS简介 网页分成三个部分：结构（html)、表现（css)、 行为（javaScript) ### css： -层叠样式表 -网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层来设置样式 而最终我们能看到只是网页的最上边一层 --总之一句话，CSS用来设置网页中元素的样式 ### 使用CSS来修改元素的样式 #### 第一种方式（内联样式，行内样式）： 在标签内部通过style属性来设置元素的样式 --问题：使用内联样式，样式只能对一个标签生效， 如果希望影响到多个元素必须在每一个元素中都复制一遍 并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便 --注意，开发时一定不要使用内联样式 #### 第二种方式（内部样式表）： 将样式编写到head中的style标签里 然后通过CSS的选择器来选中元素并为其设置各种样式 可以同时为多个标签设置样式，并且修改时只需要修改一处即可 -内部样式表更加方便对样式进行重复使用 #### 第三种方式（外部样式表）： -可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件 -意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行重复使用 -将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验 ## css语法 css的基本语法：选择器 声明块 选择器：通过选择器可以选中页面中的指定元素。比如p的作用就是选中页面中所有的p元素 声明块：通过声明块来指定要为元素设置的样式；声明块由一个一个的声明组成；声明是一个名值对结构。 一个样式名对应一个样式值，名和值之间以：连接，以；结尾 ## 常用选择器 ### 元素选择器 作用，根据标签名来选中指定的元素 语法，标签名{} 例子，P{} h1{} div{} ### id选择器 作用，根据元素的id属性选中一个元素 语法，#id属性值{} eg.#box{} #read{} ### 类选择器 作用，根据元素的class属性值选中一组元素 语法，.class属性值 注意：class是一个标签的属性，它和id类似，不同的是：class可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class ### 通配选择器 ``` 作用，选中页面中的所有元素 语法：* ``` ### 复合选择器 #### 交集选择器 作用，选中同时符合多个条件的元素 语法，选择器1选择器2选择器3选择器n{} 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头 #### 选择器分组(并集选择器) 作用：同时选择多个选择器对应的元素 语法：选择器1，选择器2，选择器3，选择器n{} eg.#b1,.p1,h1,span,div.red{} ### 关系选择器 **父元素**-直接包含子元素的元素叫做父元素 **子元素**-直接被父元素包含的元素是子元素 **祖先元素** -直接或间接包含后代元素的元素叫做祖先元素-一个元素的父元素也是它的祖先元素 **后代元素**-直接或间接被祖先元素包含的元素叫做后代元素； 子元素也是后代元素 **兄弟元素**：-拥有相同父元素的元素是兄弟元素 #### 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素>子元素 ```css div.red>span{ color:red;} ``` #### 后代元素选择器 作用：选中指定元素内的指定后代元素 语法：祖先 后代(不要忘了中间的空格) ```css div span{ color:skyblue; } ``` #### 选择下一个兄弟 语法：前一个 + 下一个 ```css P+span{ color:red; } ``` #### 选择下边所有的兄弟 语法：兄 ~ 弟 ```css p~span{ color:red; } ``` ### 属性选择器 ```css <style> /* [属性名]选择含有指定属性的元素 [属性名=属性值]选择含有指定属性和属性值的元素 [属性名^=属性值]选择属性值以指定值“开头”的元素 [属性名$=属性值]选自属性值以指定值“结尾”的元素 [属性名*=属性值]选择属性值中含“有某值的”元素的元素 */ /* p[title]{ */ /* p[title=abc]{ */ /* p[title^=abc]{ */ /* p[title$=abc]{ */ p[title*=abc]{ color:orange; } </style> ``` ### 伪类选择器 伪类(不存在的类，特殊的类) -伪类用来描述一个元素的特殊状态 比如：第一个子元素，被点击的元素，鼠标移入的元素... -伪类一般情况下都是使用：开头 :first-child第一个子元素 :last-child最后一个子元素 ：nth-child()选中第n个子元素 特殊值： n 第n个，n的范围是0到正无穷 2n 表示选中偶数位的元素 2n+1或者odd 表示选中奇数位的元素 ---以上这些伪类都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-type() -这几个伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序 :not()否定伪类 -将符合条件的元素从选择器中去除 ```css ul>li:first-child {color:red;} */ /* ul>li:first-child {color:red;} */ /* ul>li:nth-child(odd){ color:darkgreen; } */ /* ul>li:first-of-type{ color:red; } */ ul>li:not(:nth-of-type(3)){ color:red; } ``` ### 超链接的伪类 ```css /* :link用来表示没访问过的链接(正常链接) */ a:link{ color:red; font-size: 20px; } /* :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色 */ a:visited{ color:orange; } /* :hover用来表示鼠标移入的状态,其他元素也可以用 */ a:hover{ color:aqua; } /* :active用来表示鼠标点击，其他元素也可以用 */ a:active{ color:cornflowerblue; } ``` ### 伪元素选择器 伪元素，表示页面中一些特殊的并不真实的存在的元素(特殊位置) 伪元素使用::开头 ::first-letter表示第一个字母 ::first-line表示第一行 ::selection表示选中的内容 ::before表示元素的开始 ::after表示元素的最后 --before和after必须结合content属性来使用 ```css p::first-letter{ font-size: 50px; } P::first-line{ background-color: antiquewhite; } p::selection{ background-color:darksalmon; } div::before{ content: "abc"; color:aqua; } div::after{ content:"haha"; color:blue; } ``` 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上 。继承是发生在祖先后代之间的 继承的设置是为了方便我们开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式 注意：并不是所有的样式都会被继承， 比如，**背景相关的，布局相关的**这些样式都不会被继承。 样式冲突 当我们通过不同的选择器，选中相同的元素，并且为相同样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重(优先级)决定。 ### 选择器的权重 内联样式 1，0，0，0 id选择器 0，1，0，0 类和伪类选择器 0，0，1，0 元素选择器 0，0，0，1 通配选择器 0，0，0，0 继承的样式 没有优先级 比较优先级时，需要将所有的选择器进行相加计算，最后优先级越高，则优先显示。 注意(分组选择器是分开计算的) 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过类选择器。如果优先级计算后相同，此时则优先使用靠下的样式。 可以在某一个样式的后边添加！important,则此时该样式会获取到最高的优先级，甚至超过内联样式。注意：在开发中要慎用 ### 单位 长度单位： **像素** 屏幕(显示器)实际上是由一个一个的小点点构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样 **百分比** 也可以将属性值设置为相对其父元素属性的百分比，设置百分比可以使子元素根据其父元素的改变而改变 **em** em是相对元素字体的大小来计算的 1em=1font-size em会根据字体大小的改变而改变 **rem** rem是相对于根元素的字体大小来计算 ### 颜色 颜色单位： 在CSS中可以直接使用颜色名来设置各种颜色比如，red,blue.....但是在CSS中直接使用颜色名是非常不方便的RGB值： -RGB通过三种颜色的不同浓度来调配出不同的颜色 -R red,G green,B blue（光的三原色） -每一种颜色的范围在0-255(0%-100%)之间 -语法，RGB(红，绿，蓝) RGBA: 就是在RGB的基础上增加一个a表示不透明度需要四个值，前三个和RGB一样，第四个表示不透明度 1表示完全不透明 0表示完全透明 .5表示半透明 十六进制的RGB值： 语法：#红色绿色蓝色 颜色浓度通过00-ff 如果颜色两位两位重复可以进行简写 \#aabbcc-->#abc HSL值 HSLA值： H 色相(0-360) S 饱和度,颜色浓度0%-100% L 亮度，颜色亮度0%-100% A 透明度 ```css <style> .box1{ width:100px; height:100px; /* background-color:blue; */ /* background-color: rgb(0,235,205); */ /* background-color: rgba(12,225,100,.5); */ /* background-color: #ff0000; */ background-color: hsl(14,100%,50%); background-color: #bfa; } </style> ``` ## 二、layout ### 文档流 文档流(normal flow) 网页是一个多层的结构，一层摞着一层 通过CSS可以分别为每一层来设置样式 作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列 对于我们来说元素主要有两个状态 在文档流中 不在文档流中（脱离文档流） 元素在文档流中有什么特点： **块元素** 块元素在页面中独占一行(自上向下垂直排列)，默认宽度是父元素的全部（会把父元素撑满），默认高度是被内容撑开（子元素）。 **行内元素** 行内元素不会独占页面的一行，只占自身的大小。行内元素在页面中自左向右排列，如果一行之中放不下，则元素会换到第二行继续自左向右排列。行内元素的默认宽度和高度都是被内容撑开。 ### 盒模型 盒模型、盒子模型、框模型(box modle) CSS将页面中的所有元素都设置为了一个矩形盒子 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置 每一个盒子都由以下几个部分组成： 内容区(content) 内边距(padding) 边框(border) 外边距(margin) **内容区(content)**,元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小由width和height两个属性来设置，width设置内容区的宽度，height设置内容区的高度。 ### **边框(border)** 边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响整个盒子的大小， 要设置边框，至少要设置三个样式： 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style 1.border-width可以用来指定四个方向的边框的宽度 值的情况 4个值：上 右 下 左 3个值：上 左右 下 2个值：上下 左右 1个值：上下 左右 除了border-width还有一组border-xxx-width xxx可以是 top right bottom left 用来单独指定某一个边的宽度 border-style用法同上 2.border-color用来指定边框的颜色，同样可以分别指定四个边的边框 规则和border-width一样 border-color也可以省略不写，如果省略了则自动使用color的颜色值 3.border-style指定边框的样式 solid表示实线 dotted 点状虚线 dashed 虚线 double 双线 默认值是none表示没有边框 border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 eg. border:10px red solid; 除了border以外还有四个border-xxx border-top:10px solid red border-right border-bottom border-left ### 内边距 内边距(padding) 内容区和边框之间的距离是内边距 一共有四个方向的内边距： padding-top padding-right padding-bottom padding-left 内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上 一共盒子的可见框的大小，由内容区 内边距和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。 padding内边距的简写属性，可以同时指定四个方向的內边距 规则和border-width一样 ### 外边距 外边距(margin) 外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置，一共有四个方向的的外边距： margin-top 上外边距，设置一个正值，元素会向下移动 margin-right 默认情况下设置margin-right不会产生任何效果 margin-bottom 下外边距，设置一个正值，其下边的元素会向下移动 margin-left 左外边距，设置一个正值，元素会向右移动 margin也可以设置负值，如果是负值则元素会向相反的方向移动。元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上边距则会移动元素自身， 而设置下和右外边距则会移动其他元素。 margin可以同时设置四个方向的外边距，用法和padding 一样 ；margin会影响盒子实际占用空间 ### 水平布局 元素的水平方向的布局： 元素在其父元素中水平方向的位置由以下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中，水平布局必须要满足以下等式 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right=其父元素内容区的宽度 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整 调整情况： 如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足 这七个值中有三个值可以设置成auto width margin-left margin-right 如果某个值为auto,则会自动调整为auto的那个值以使等式成立 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0；如果将三个值都设置为auto,则外边距都是0，宽度最大；如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值 所以我们经常利用这个特点来使一个元素在其父元素中**水平居中** 注意：width不设置时，默认值就是auto ### 垂直布局 默认情况下父元素的高度被内容撑开 子元素是在父元素的内容区中排序的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用**overflow属性**来设置父元素如何处理溢出的子元素 可选值： visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出内容将会被裁剪不会显示 scroll 生成两个滚动条，通过滚动条来查看完整内容 auto 根据需要生成滚动条 overflow-x:单独处理水平方向的 overflow-y：单独处理垂直方向的 ### 外边距的折叠 垂直外边距的重叠（折叠） 相邻的垂直方向外边距会发生重叠现象 兄弟元素： 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值） 特殊情况： 如果相邻的外边距一正一负，则取两者和；如果两个都为负，则取绝对值较大的。 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理。 父子元素 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）；父子外边距的折叠会影响到页面的布局，必须要进行处理。 ### 行内元素的盒模型 行内元素不支持设置宽度和高度(就算设置了宽度和高度，也不起作用)；行内元素可以设置padding,但是垂直方向padding不会影响页面的布局；行内元素可以设置border,垂直方向的border不会影响页面的布局；行内元素可以设置margin,垂直方向的margin不会影响页面的布局。 **display用来设置元素显示的类型** 可选值： inline将元素设置为行内元素 block将设置为块元素 inline-block将元素设置为行内块元素（行内块，既可以设置宽度和高度又不会独占一行） table 将元素设置为一个表格 none 元素不在页面中显示 **visibility用来设置元素的显示状态** 可选值： visible默认值，元素在页面中正常显示 hidden元素在页面中隐藏，不显示，但是依然占据页面的位置 ### 默认样式 默认样式： 通常情况下，浏览器都会为元素设置一些默认样式 默认样式的存在会影响到页面的布局， 通常情况下编写网页时要去除浏览器的默认样式(pc端的页面) **重置样式表：**专门用来对浏览器的样式进行重置的 reset.css直接去除了浏览器的默认样式 normalize.css对默认样式进行了统一 ```css /* 去除项目符号,如列表各项前面的小黑点 */ *{ margin:0; padding:0; } /* 通配选择器，设置范围广，但是还是会有一些标签的默认样式去不掉 */ ``` ### 盒子尺寸 默认情况下，盒子可见宽的大小由内容区、内边距和边框共同决定。box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用） 可选值： content-box默认值，宽度和高度用来设置内容区的大小(向外扩) border-box宽度和高度用来设置整个盒子可见框的大小（向內挤） 此时设置的width和height指的是内容区和边框的总大小 ### 轮廓和圆角 box-shadow用来设置元素的阴影效果，阴影不会影响页面布局 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动 第二个值 垂直偏移量 设置阴影的垂直位置 正值向下移动 负值向上移动 第三个值 阴影的模糊半径(更真实) 第四个值 阴影的颜色 border-radius:用来设置圆角 圆角设置的永远的半径的大小可以分别指定四个角的圆角. 四个值 左上 右上 右下 左下 三个值 左上 右上/左下 右下 border-top-right-radius border-top-left-radius border-bottom-right-radius border-bottom-left-radius ```css .box1{ width:200px; height:200px; background-color: aquamarine; box-shadow:10px 10px 10px rgba(0,0,0,.3); /* outline用来设置元素的轮廓线，用法和border一摸一样 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小 */ } .box1:hover{ outline:10px red solid; } .box2{ width:200px; height:200px; background-color: bisque; border-radius:10px 20px 30px 40px; /* 将元素设置为一个圆 */ border-radius:50%; } ``` ## 三、float ### 浮动简介 通过浮动可以使一个元素向其父元素的左侧或者右侧移动 使用float属性来设置于元素的浮动 可选值： none默认值，元素不浮动 left元素向左浮动 right元素向右浮动 注意，元素设置浮动以后，水平布局的等式便不需要强制成立，元素设置浮动后，会完全从文档流中脱离，不再占用文档流的位置 ，所以元素下边的还在文档流中的元素会自动向上移动。 浮动的特点： 1、浮动元素会完全脱离文档流，不再占据文档流流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动 3、浮动元素默认不会从父元素中溢出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6、浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高 简单总结： 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。 ### 浮动其他的特点 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果 脱离文档流的特点： 块元素： 1.块元素不在独占页面的一行 2.脱离文档以后，块元素的宽度和高度默认都被认都被内容撑开 行内元素： 行内元素脱离文档流以后会变成块元素，特点和块元素一行 脱离文档以后，不需要再区分块和行内了 ### 高度塌陷问题解决 高度塌陷的问题： 在浮动布局，父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致页面的布局混乱 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理 #### BFC(Block Formatting Context)块级格式化环境 -BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 元素开启BFC后的特点： 1.开启BFC的元素不会被浮动元素所覆盖 2.开启BFC的元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动的子元素 可以通过一些特殊方式来开启BFC 1.设置元素的浮动(不推荐) 2.将元素设置为行内块元素(不推荐) 3.将元素的overflow设置为一个非visible的值 常用的方式 为元素设置overflow hidden 开启BFC 以使其可以包含浮动元素 ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width:200px; height:200px; background-color: rgb(86, 146, 199); float:left; /* overflow:hidden */ } .box2{ width:200px; height:200px; background-color: aqua; overflow:hidden; /* 开启BFC，不然会被box1遮住 */ } .box3{ width:100px; height:100px; background-color: rgb(109, 246, 200); margin-top: 100px; } </style> </head> <body> <div class="box1"> <div class="box3"></div> </div> <div class="box2"> </div> </body> </html> ``` ### clear ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ font-size:50px; } .box1{ width:200px; height:200px; background-color: rgb(198, 245, 245); float:left; } .box2{ width:400px; height:400px; background-color: rgb(133, 214, 214); float:right; } .box3{ width:200px; height:200px; background-color: rgb(111, 222, 185); /* 由于box1的浮动，导致box3位置上移 也就是box3受到了box1浮动的影响，位置发生了变化 如果我们不希望某个元素因为其他元素浮动的影响而改变位置， 可以通过clear属性来清楚浮动元素对当前元素所产生的影响 clear -作用：清楚浮动元素对当前元素所产生的影响 -可选值： left清除左侧浮动元素对当前元素的影响 right清除右侧浮动元素对当前元素的影响 both清除两侧中最大影响的那侧 原理： 设置清楚浮动以后，浏览器会自动为元素添加一个上外边距， 以使其位置不受其他元素的影响 */ clear:left; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html> ``` #### 伪类+clear ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clear解决高度塌陷</title> <style> .box1{ border:10px red solid; /* overflow:hidden; */ } .box2{ width:100px; height: 100px; background-color: antiquewhite; float:left; } /* .box3{ clear:both; } */ /* 创建after伪类元素再用clear清除浮动对元素的影响来处理高度塌陷的问题 */ .box3::after{ content:''; display:block; clear:both; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> </html> ``` #### clearfix ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width:200px; height:200px; background-color: aqua; } /* 解决外边距重叠的问题 */ /* .box1::before{ content:''; display:table; } */ .box2{ width:100px; height:100px; background-color: bisque; margin-top: 100px; float:left; } /* clearfix这个样式可以同时解决高度塌陷和外边距重叠问题，遇到此类问题可以直接使用clearfix这个类 */ .clearfix::before,.clearfix::after{ content:''; display: table; clear:both; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ## 四、position ### 定位的简介 定位（position） 定位是一种更加高级的布局手段 通过定位可以将元素摆放到页面的任意位置 使用position属性来设置定位 可选值： static 默认值，元素是静止的没有开启定位 **relative** 开启元素相对定位 **absolute** 开启元素的绝对定位 **fixed** 开启元素的固定定位 **sticky** 开启元素的粘滞定位 ### 相对定位： -当元素的position属性值设置为relative时则开启了元素的相对定位 -相对定位的特点： 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何变化 2.相对定位是参照于元素在文档流中的位置进行定位的 3.相对定位会提升元素的层次，移动到其他元素所在位置会把该元素遮住 4.相对定位不会使元素脱离文档流 5.相对定位不会改变元素的性质块还是块元素，行内元素还是行内元素 -偏移量(offset) -当元素开启了定位以后，可以通过偏移量来设置元素的位置 top -定位元素和定位位置上边的距离 值越大越向下 bottom -定位元素和定位位置下边的距离 -定位元素垂直方向的位置由top和bottom两个属性来控制，通常二者用其一即可 left -定位元素和定位位置左边的距离 值越大越向右 right -定位元素和定位位置右边的距离 -定位元素水平方向的位置由left和right两个属性来控制，通常二者用其一即可 ```css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>相对定位</title> <style> body{ font-size:60px; } .box1{ width:200px; height:200px; background-color: rgb(243, 215, 250); } .box2{ width:200px; height:200px; background-color: rgb(213, 182, 245); position:relative; top:-200px; left:200px; } .box3{ width:200px; height:200px; background-color: rgb(250, 215, 244); } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html> ``` ### 绝对定位： 当元素position属性值设置为absolute时，则开启了元素的绝对定位 绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量的元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽和高被内容撑开 4.绝对定位会使元素提升一个层级 5.绝对定位元素是相对于其包含块进行定位的 包含块(containing block) 正常情况下：包含块就是离当前最近的祖先块元素 绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块 html(根元素、初始包含块) #### 绝对定位元素的布局 水平布局 left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块内容区的宽度 当我们开启了绝对定位后： 水平方向的布局等式就需要添加left和right两个值，此时规则就和之前一样只是多添了两个值： 当发生过度约束：如果9个值中没有auto则自动调整right值以使等式满足；如果有auto，则自动调整auto的值以使等式满足。 **可设置auto的值**：margin width left right 因为left和right的值默认是auto,所以如果不知道left和right,则等式不满足时，会自动调整这两个值 垂直方向布局的等式也必须满足： top+margin-left/riight+padding-left/right+border-top/bottom+height+bottom=包含块垂直方向的高度 ### 固定定位： 将元素position属性设置为fixed则开启了元素的固定定位；固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。唯一不同的是固定定位永远参照于浏览器的视口进行定位。**固定定位的元素不会随网页的滚动条滚动** ### 粘滞定位 当元素的position属性设置为sticky时则开启了元素的粘滞定位。粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。 注意：要达到这种效果，一般不用粘滞定位了，因为它的兼容性不好，有很多浏览器都不支持了 ### 元素的层级 对于开启了定位元素，可以通过z-index属性来指定元素的层级。z-index需要一个整数作为参数，值越大元素的层级越高元素的层级越高越优先显示。如果元素的层级一样，则优先显示靠下的元素。祖先元素层级再高也不会盖住后代元素。 ```css .box2{ width:200px; height:200px; background-color: rgba(213, 182, 245,.5); position:absolute; top:50px; left:50px; z-index:2; } ``` ## 五、font&background ### 1.字体 font-face可以将服务器中的字体直接提供给用户去使用（存在问题：1.加载速度 2.版权问题 3.字体格式） @font-face{ /*指定字体的名字，你自己起的*/ font-family: ; /*服务器中字体的路径*/ src:url(); } 字体相关的样式 color用来设置字体颜色 font-size用来设置字体的大小和其相关的单位 em 相当于当前元素的一个font-size值 rem相对于根元素的一个font-size font-family字体族（字体的格式）不涉及版权问题 可选值： serif衬线字体 sans-serif非衬线字体 monospace等宽字体 -指定字体的类别，浏览器会自动使用该类别下的字体 -font-family可以同时指定多个字体，多个字体间使用，隔开字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推 有特殊符号的要加 '' ### 2.图标字体 图标字体（iconfont）：在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体惊醒引入。这样我们就可以通过使用字体的形式来使用图标。 **fontawesome**使用方法：1.下载 2.解压 3.将css和webfonts移动到项目中 4.将all.css引入到网页中，link 引入该文件 #### 使用图标字体的方法 1.直接通过类名来使用图标字体class=“fas-fa-bell” ```html <i class="fas fa-bell-slash" style="font-size: 15px;color:rgb(137, 242, 191);"></i> ``` 2.通过伪元素来设置图标字体 a.找到要设置图标的元素字体通过before或者after选中 b.在content中设置字体编码 c.设置字体样式 fab font-family:'Font Awesome 5 Brands'; fas(两条语句) font-family:'Font Awesome 5 Free'; font-weight:900; ```css li::before{ /* 反斜杠加编码 */ content: '\f1b0'; /* font-family:'Font Awesome 5 Brands'; */ font-family:'Font Awesome 5 Free'; font-weight: 900; color:rgb(161, 224, 224); } ``` 3.通过实体来使用图标字体 语法：**&#x**图标的编码 ```html <span class="fas"></span> <i class="iconfont"></i> <!--实体--> ``` ### 3.行高 **行高(line height)：**指的是文字占有的实际高度，可以通过line-height来设置行高。行高可以直接指定一个大小（px em)，也可以直接为行高设置一个整数，（此时行高将会是字体的指定的倍数）。 字体框：字体存在的格子，设置font-size实际上就是在设置字体框的高度，行高会在字体框的上下均匀分配。 注意：可以将行高设置为和高度一样的值,**使单行文字在一个元素中垂直居中** ### 4.字体的简写属性 **font** 可以设置字体相关的所有属性 语法: font:字体大小/行高 字体族 //前面省略的两个是默认normal font:字体风格 字重 字体大小/行高 字体族 （行高可以省略不写但是不代表不设置,不写时使用默认值) ```css font:50px/2 'Times New Roman', Times, serif; font:italic bold 50px/2 'Times New Roman', Times, serif; ``` **font-style** 字体的风格 normal 默认值正常的 italic 斜体 **font-weight** 自重 字体的加粗 normal 默认值不加粗 bold 加粗 100-900九个级别(没什么用,每个电脑上不会都全部安装各个级别的同一种字体) ### 5.文本的样式 #### 1.text-align文本的水平对齐 可选值: left 左侧对齐 right 右对齐 center 居中对齐 justify 两端对齐 #### 2.vertical-align设置元素垂直对齐的方式 可选值: baseline默认值 基线对齐 top顶部对齐(让子元素的上线对齐父元素的上线) bottom 底部对齐 midlle 居中对齐 直接赋值eg. vertical-align:10px;(常用) 补充：图片对齐是有默认值的--基线对齐,导致图片与它的父元素的底边会有空隙,解决方法就是让它不基线对齐 ```css img{ vertical-align: top; } ``` #### 3.文本修饰--text-decoration 可选值: none 什么都没有 underline 下划线 line-through 删除线 overline 上划线 注意:在IE浏览器中不支持设置下划线的颜色。字体是什么颜色,下划线就是什么颜色;但谷歌和火狐等支持 #### 4.white-space 设置网页如何处理空白 可选值: normal 正常 nowrap 不换行 pre 保留空白 #### 5.文本溢出处理 text-overflow: ellipsis;/*文本溢出处理: 显示省略号*/ ### 6.背景 #### background-image 设置背景图片 -可以同时设置背景图片和背景颜色，这样背景颜色将会称为图片的背景色 -如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满； -如果背景的图片大于元素，将会一个部分背景无法完全显示 -如果背景图片和元素一样大，则会直接正常显示 #### background-repeat 用来设置背景的重复方式 可选值： repeat 默认值，背景会沿着x轴y轴双方向重复 repeat-x 沿着x轴方向重复 repeat-y沿着y轴方向重复 no-repeat 背景图片不重复 #### background-position 用来设置背景图片的位置 设置方式： a.通过top left right bottom center 几个表示方位的词来设置背景图片的位置。使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center b.通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量(值有正有负) #### background-origin 背景图片的偏移量计算的原点 可选值： padding-box 默认值，background-position 从内边距处开始计算 content-box 背景图片的偏移量从内容区处计算 border-box 背景图片的变量从边框处开始计算 #### background-clip 设置背景的范围 可选值： border-box 默认值，背景会出现在边框的下边 padding-box 背景不会出现在边框，只出现在内容区和边距区 content-box 背景只会出现在内容区 #### background-size设置背景图片的大小 第一个值表示宽度 第二个值表示高度 -如果只写一个，则第二个值默认是auto cover图片的比列不变，将元素铺满 contain 图片比例不变，将图片在元素中完整显示 #### background-attachment背景颜色是否跟随元素移动 -可选值： scroll 默认值 背景图片会跟随元素移动 fixed 背景会固定在页面中，不会随元素移动 简写： background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment -background 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置 注意：background-origin的值必须写在background-clip的值的前面 background-position/background-size ### 7.渐变 通过渐变设置一些复杂的背景颜色，可以实现从一个颜色向其他**颜色过渡**的效果 ！！渐变是图片，需要通过background-image来设置 #### linear-gradient()线性渐变： 颜色沿着一条直线发生变化 linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域 -线性渐变的开头，我们可以指定一个渐变的方向 to left to right to bottom to top deg （表示度数） turn 表示圈 -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况 repeating-linear-gradient() 可以平铺的线性渐变 注意background-repeat对它无影响 ```css <style> .box1{ width: 200px; height: 200px; background-image: linear-gradient(red,yellow,#bfa); background-image: linear-gradient(to right red 20px,yellow 100px,#bfa 180px); background-image:repeating-linear-gradient(red 25px,yellow 50px); } </style> ``` #### radial-gradient() 径向渐变(放射性的效果) 默认情况下径向渐变的形状根据元素的形状来计算的 正方形-->圆形 长方形-->椭圆形 -我们也可以手动指定径向渐变的大小 circle ellipse -也可以指定渐变的位置 -语法： radial-gradient（大小 at 位置，颜色 ，颜色 ，颜色 ） 大小： circle 圆形 ellipse 椭圆 closest-side 近边 closest-corner 近角 farthest-side 远边 farthest-corner 远角 位置：(可选值) top right left center bottom 也可以用像素描述 ## 六、表格与表单 ### 1.表格 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> </head> <body> <!-- 在网页中使用table标签来创建一个标签 --> <table border="1" width="50%" align="center"> <!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 --> <tr> <!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 --> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <!-- rowspan 纵向的合并单元格 --> <td rowspan="2">D2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <!-- <td>D3</td> --> </tr> <tr> <td>A4</td> <td>B4</td> <td colspan="2">c4</td> <!-- <td>D4</td> --> <!-- colspan横向的合并单元格 --> </tr> </table> </body> </html> ```  ### 2.长表格 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长表格</title> </head> <body> <table border="1" width="50%" align="center"> <!-- 可以将一个表格分成三个部分： 头部thead 主体tbody 底部tfoot 此三个部分可以随意交换位置，但不影响网页的布局 th表示头部的单元格 --> <thead> <tr> <th>日期</th> <th>收入</th> <th>支出</th> <th>合计</th> </tr> </thead> <tbody> <tr> <td>2022.1.1</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2022.1.2</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2022.1.3</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tr> <td>2022.1.4</td> <td>500</td> <td>200</td> <td>300</td> </tr> <tfoot> <tr> <td colspan="2"></td> <td>合计</td> <td>1200</td> </tr> </tfoot> </tbody> </table> </body> </html> ```  ### 3.表格的样式 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格的样式</title> <style> table{ width:50%; border:1px solid black; margin:0 auto; /* border-spacing:指定边框之间的距离 */ border-spacing:0; border-collapse: collapase; /* border-collapse: collapase;设置边框的合并 */ } td{ border:1px solid black; height: 100px; /* 默认情况下元素在td中是垂直居中的 可以通过vertical-align 来修改 */ vertical-align:top; text-align: right; } /* 如果表格中没有使用tbody而是直接使用tr, 那么浏览器会自动创建一个tbody,并且将tr全部放到其中 tr不是table的子元素 */ /* tbody>tr:nth-child(odd)--奇数行 */ tr:nth-child(2n){ background-color: #bfa; } .box1{ width:30px; height:30px; background-color: bisque; /* 将 元素设置为单元格*/ display:table-cell; vertical-align:middle; } .box2{ width:10px; height:10px; background-color: #bfa; margin:0 auto; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <table> <tr> <td>学号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>地址</td> </tr> <tr> <td>1</td> <td>小明</td> <td>男</td> <td>17</td> <td>四川</td> </tr> <tr> <td>2</td> <td>小花</td> <td>女</td> <td>15</td> <td>重庆</td> </tr> <tr> <td>3</td> <td>小王</td> <td>男</td> <td>20</td> <td>北京</td> </tr> <tr> <td>4</td> <td>小张</td> <td>女</td> <td>18</td> <td>海南</td> </tr> <tr> <td>1</td> <td>小明</td> <td>男</td> <td>17</td> <td>四川</td> </tr> <tr> <td>2</td> <td>小花</td> <td>女</td> <td>15</td> <td>重庆</td> </tr> <tr> <td>3</td> <td>小王</td> <td>男</td> <td>20</td> <td>北京</td> </tr> <tr> <td>4</td> <td>小张</td> <td>女</td> <td>18</td> <td>海南</td> </tr> <tr> <td>1</td> <td>小明</td> <td>男</td> <td>17</td> <td>四川</td> </tr> <tr> <td>2</td> <td>小花</td> <td>女</td> <td>15</td> <td>重庆</td> </tr> <tr> <td>3</td> <td>小王</td> <td>男</td> <td>20</td> <td>北京</td> </tr> <tr> <td>4</td> <td>小张</td> <td>女</td> <td>18</td> <td>海南</td> </tr> </table> </body> </html> ```  ### 4.表单 表单：在现实生活中表单用于提交数据，在网页中也可以使用表单，网页中的表单用于将本地的数据传到远端的服务器，使用form标签来创建一个表单。 ```html <body> <!-- form的属性 action 表单要提交的服务器的地址 --> <form action="target.html"> <!-- 文本框 --> 文本框<input type="text"> <br><br> <!-- 密码框 --> 密码框<input type="password" name="password"> <br><br> <!-- 单选按钮 -像这种选择框，必须要指定一个value属性，value属性最终会作为用户填写的一个值传递给服务器 -checked 可以将单选按钮设置为默认选中 --> 单选按钮<input type="radio" name="hello" value="a"> <input type="radio" name="hello" value="b" checked> <br><br> <!-- 多选框 --> 多选框<input type="checkbox" name="test" value="1" > <input type="checkbox" name="test" value="2" > <input type="checkbox" name="test" value="3" checked> <br><br> <!-- 下拉列表 --> <select name="haha"> <option value="i">选项一</option> <option selected value="ii">选项二</option> <!--默认选中--> <option value="iii">选项三</option> </select> <br><br> <!-- 提交按钮 --> <input type="submit" value="注册"> </form> </body> ```  ```html <form action="target.html" autocomplete="off"> <!-- autocomplete="off"表示关闭自动补全--autocomplete="on"表示开启 readonly将表单项设置为只读，数据会提交 disabled 将表单项设置为禁用，数据不会提交 autofocus 设置表单项自动获取焦点 --> <input type="text" name="username" value="hello" readonly> <br><br> <input type="text" name="username" autofocus> <br><br> <input type="color"> <!-- 兼容性不好，一般很少用 --> <br><br> <input type="email"> <!-- 会有提示当邮件格式不正确时，但在不同的浏览器中提示不同 --> <br><br> <input type="submit"> <!-- 重置按钮 --> <input type="reset"> <!-- 普通按钮 --> <input type="button" value="按钮"> <br><br> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> </form> ``` ## 七、animation ### 1.过渡 过渡(transition)：通过过渡可以指定一个属性发生变化时的切换方式；通过过渡可以创建一些非常好的效果，提升用户体验。 #### transition-property:指定要执行过渡的属性 多个属性间使用，隔开 如果所有属性都需要过渡，则使用all关键字 大部分属性都支持过渡效果（像素、颜色） 注意，过渡时必须是从一个有效值向另一个有效数值进行过渡 #### transition-duration: 指定过渡效果的持续时间 时间单位:s 和 ms 1s=1000ms 也可以对应过渡对向分别指定时间，隔开方式，连接 #### transition-timing-function: 过渡的时序函数**指定过渡的执行方式** 可选值： 默认值ease, 慢速开始，先加速，再减数 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速，后减速 cubic-bezier()来指定时序函数 网址：http://cubic-bezier.com steps()分布执行过渡效果 可以设置第二个值： end 在时间结束时执行过渡---默认值 start 在时间开始时执行过渡 #### transition-delay:表示过渡效果的延迟 等待相应的时间后执行过渡 **简写：**transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。 ### 2.动画 动画 ：动画和过渡类似，都是可以实现一些动态的效果。不同的是 过渡 需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤。 #### animation-name:要对当前元素生效的关键帧的名字 #### animation-duration: 动画的执行时间 #### animation-delay:动画的延时 #### animation-timing-function:执行方式 #### animation-iteration-count:动画执行的次数 可选值： 次数 infinite 无限执行 #### animation-direction用来指定动画运行的方向 可选值： normal 默认值 从 from 向 to 运行 每次都是这样 reverse 从to向from运行 每次都是这样 alternate 从from向to运行 重复执行动画时方向执行 alternate-reverse 从 to 向from 运行 重复执行动画时反向执行 #### animation-play-state: 设置动画的执行状态 可选值： running 默认值 动画执行 paused 动画暂停 #### animation-fill-mode: 动画的填充模式 可选值： none 默认值 动画执行完毕元素回到原来的位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards 动画延时等待时，元素就会处于开始位置 both 结合了前两者 注：animation也可以简写，规则和transition一样 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</title> <style> * { margin:0; padding:0; } .box1 { width: 800px; height: 800px; background-color: silver; overflow: hidden; } .box1 div { width: 100px; height: 100px; margin-bottom: 100px; margin-left: 0; } .box2 { background-color: #bfa; transition:color 12s; animation-name:test; animation-duration:2s; animation-delay: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 5; animation-direction:alternate-reverse; animation-play-state:running; animation-fill-mode: backwards; } .box1:hover div { margin-left: 700px; background-color: rgb(240, 190, 212); } @keyframes test{ /* from 表示动画的开始位置 也可以使用0% */ from{ margin-left:0; } /* to动画的结束位置 也可以使用100%表示 */ to{ margin-left:700px; } } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html> ``` ### 3.变形 变形：就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局，**transfom**用来设置元素的变形效果。 transform-origin:**变形的原点** 默认值center #### 1.平移： translatex()沿着x轴方向平移 translatey()沿着y轴方向平移 translatez()沿着z轴方向平移 -平移元素，百分比是相对于自身尺寸来计算的 **z轴平移**，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。 z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见这个效果， **必须要设置网页的视距**。 谷歌浏览器的视距**perspective** 必须设置在 transform里面，还要写在前面。其余的直接写在style 标签下即可。 ### 2.旋转 通过旋转可以使元素沿着x y 或者z旋转指定的角度 rotateX() rotateY() rotateZ() ```css transform: rotateZ(45deg) translateY(400px); transform:translateY(100px) rotateX(.25turn); /*旋转180度时*/ transform:rotateY(180deg); /* 设置是否显示元素的背景 backface-visibility: */ backface-visibility:hidden; ``` ### 3.缩放 对元素进行缩放的函数： scaleX() 水平反向缩放 scaleY() 垂直方向缩放 scaleZ()3d 才看的出来 scale3d scale() 垂直和水平双方向 eg.**transform:scale(.5)**; ## 八、flex ### 1.弹性盒 #### flex(弹性盒、伸缩盒) -是Css中的又一种布局手段，它主要用来代替浮动来完成页面的布局 -flex可以使元素具有弹性，让元素可以随页面的大小的改变而改变 -**弹性容器** -要使用弹性盒，必须先将一个元素设置为弹性容器 -我们通过display来设置弹性容器 display:flex 设置为块级弹性容器 display:line-flex 设置行内的弹性容器 -**弹性元素** -弹性元素的直接子元素就是弹性元素(弹性项) -一个元素可以同时是弹性容器和弹性元素 #### 设置弹性容器相关： **flex-direction** 指定容器中弹性元素的排列方式/主轴方向 可选值： row 默认值，弹性元素在容器中水平排列（左向右） -主轴 自左向右 row-reverse 弹性元素在容器中反向水平排列 (右向左) -主轴 自右向左 column 弹性元素方向纵向排列(自上向下) -主轴 自上而下 column-reverse 弹性元素方向反向纵向排列(自下向上) -主轴 自下而上 **主轴：** 弹性元素的排列方向称为主轴 **侧轴** 与主轴垂直方向的称为侧轴 #### 弹性元素的属性： **flex-grow** 指定弹性元素的伸展系数 -就是当父元素有多余空间时，子元素如何伸展 -父元素的剩余空间，会按照比例进行分配 **flex-shrink** 指定弹性元素的收缩系数 -当父元素中的空间不足以容纳所有的子元素时，如和对子元素进行收缩 ### 2.弹性容器的样式 #### flex-warp: 设置弹性元素是否在弹性容器中自动换行 可选值： noowrap 默认值，元素不会自动换行 wrap 元素会沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行 (**辅轴**：自上而下或自左向右，具体看主轴、与其垂直) #### flex-flow: wrap 和 direction 的简写属性 eg.flex-flow:row wrap-reverse; #### justify-content: -如何分配**主轴**上的空白空间（主轴上的元素如何排列） -可选值： flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到每个元素两侧 space-between 空白均匀分布到元素间 space-evevly 空白分布到元素的单侧 #### align-items: -元素在**辅轴**上如何对齐 -元素间的关系 -可选值： stretch 默认值，将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end 沿着辅轴的中边对齐 center 居中对齐 baseline 基线对齐 #### flex-basis : 指定的是元素在主轴上的基础长度 如果主轴是 横向的 则 该值指定的就是元素的宽度 如果主轴是 纵向的 则 该值指定的就是元素的高度 -默认值是 auto ,表示参考元素自身的高度或宽度 -如果传递了一个具体的数值，则以该值为准 **简写:** flex 可以设置弹性元素所有的三个样式，但是有一定的顺序 flex 增长 缩减 基础 flex: 1 1 basis; inital 表示"flex:0 1 auto;" auto 表示"flex:1 1 auto;" none 表示"flex:0 0 auto;" 弹性元素没有弹性 补充：多个同父元素的弹性元素可以用”order：数字 “决定弹性元素的排列顺序。 ## 九、其他 ### 像素： -屏幕是由一个一个发光的小点构成，这一个一个的小点就是像素 -分辨率：eg.1920x1080 说的就是屏幕中小点的数量 -在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素 -物理像素，上述所说的小点点就属于物理像素 -CSS像素，编写网页时，我们所用像素都是CSS像素 ----浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现 ----一个CSS像素最终由几个物理像素显示，由浏览器决定 (默认情况下在pc端，一个CSS像素=一个物理像素) ### 视口(viewport) 视口就是网页中用来显示网页的区域，可以通过查看视口的大小，来观察CSS像素和物理像素的比值。 -默认情况下 1920px (CSS像素) 1920px (物理像素) -此时，CSS像素和物理像素的比是1：1 -放大两倍的情况： 视口宽度 960px (CSS像素) 1920px (物理像素) -此时，css像素和物理像素的比是1：2 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值 移动端默认的视口大小是980px（CSS像素），默认情况下，移动端的像素比就是 980/移动端宽度 (980/750)。如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好的，导致网页中的内容非常非常的小。编写移动页面时，必须要确保有一个比较合理的像素比： 比如： 1个CSS像素 对应 2个物理像素 1个CSS像素 对应 3个物理像素 -可以通过meta标签来设置视口大小 -每一款移动设备设计时，都会有一个像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小 我们称其为**完美视口**。 **将网页的视口设置为完美视口** ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 结论：以后写移动端的页面要把上面的完美视口设置写上 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样的，比如在iphone6中 375就是全屏，而到了plus中375就会缺一块。所以在移动端开发时，就不能用px像素来进行布局了 --**vw** 表示的是视口的宽度(viewport width) -100vw = 一个视口的宽度 \- 1vw =1%视口宽度 vw这个单位永远相当于视口宽度进行计算 移动端设计图的常用宽度—————— 750px 1125px eg.设计图上750px 使用vw作为单位-100vw 创建一个48px X 35px 大小的元素 若100vw = 750px(设计图上的像素) 则0.133333333333vw = 1px 6.4vw = 48px(设计图像素) 4.667vw = 35px **注意：**网页中字体大小最小是12px，不能设置一个比12像素还小的字体。如果我们设置了一个小于12px的字体，则字体自动设置为12 0.1333333vw = 1px 5.33333vw = 40px 1 rem = 1 html 的字体大小 1 rem = 40 px(设计图上的像素) ### 响应式布局 -网页可以根据不同的设备或窗口大小呈现出不同的效果 -使用响应式布局，可以使一个网页适用于所有设备 -响应式布局的关键就是 媒体查询 -通过媒体查询，可以为不同的设备，或设备不同的状态来分别设置样式 ### 使用媒体查询 语法： @media 查询规则（） 媒体类型： **all** 所有设备 **print** 打印设备 **screen** 带屏幕的设备 **speech** 屏幕阅读器 -可以使用连接多个媒体类型，这样它们之间就是一个或的关系 ```css @media print,screen{ body{ background-color: #bfa; } } ``` 可以在媒体类型前添加一个only,表示只有。 only 的使用主要使为了兼容一些老版本浏览器 ```css @media only screen{ body{ background-color: #bfa; } } ``` #### 断点 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化 一般比较常用的断点: 小于768 超小屏幕 max-width 768px 大于768 小屏幕 min-width :768px 大于992 中型屏幕 min-width:992px 大于1200 大屏幕 min-width:1200px only 的位置也可以 写成 not 表示除了后面的那种情况 #### 媒体特性： width 视口的宽度 height 视口高度 //一般网页中不会设置高度 min-width 视口的最小宽度（视口大于指定宽度时生效） max-width 视口的最大宽度 （视口小于指定宽度时生效） 注意：用 and 来连接宽度范围最大和最小值以及 设备类型 ```css @media(max-width:500px){ body{ background-color:#bfa; } } ``` 最后修改：2023 年 11 月 02 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏
1 条评论
作者写得很好