2023年6月20日发(作者：)
HTML与CSS知识点总结1、常⽤浏览器 浏览器内核（渲染引擎）：负责读取⽹页内容、整理讯息，计算⽹页的显⽰⽅式并显⽰页⾯。浏览器IEFirefoxSafariChrome/Opera内核TridentGeckoWebkitBlink备注IE、猎豹安全、360、百度浏览器⽕狐浏览器内核苹果浏览器内核chrome/opera浏览器内核。Blink其实是Webkit的分⽀注：国内浏览器⼀般采⽤Webkit/Blink内核，如UC、QQ等2、Web标准主要构成 结构Structure、表现Presentation、⾏为Behavior标准结构表现⾏为说明结构⽤于对⽹页元素进⾏整理和分类，HTML表现⽤于设置⽹页原⾊的板式、颜⾊、⼤⼩等外观样式，CSS⾏为是指⽹页模型的定义及交互的编写，javascript3、CSS的三⼤特性 层叠性、继承性、优先级3.1 层叠性3.2 继承性 ⼦标签继承⽗标签的某些样式（⼦承⽗业） 可以继承（text- , font- , line- 这些元素开头的可以继承 ，及color3.3 优先级4、盒⼦模型盒⼦模型由：内容、边框、内边距、外边距组成4.1 外边距合并 （使⽤margin定义块元素的垂直外边距时，可能出现外边距合并）嵌套块元素垂直外边距的塌陷（对于两个嵌套关系【⽗⼦关系 】的块元素，⽗元素上有外边距同时⼦元素也有上边距，此时⽗元素会塌陷较⼤的外边距值。解决⽅法：为⽗元素定义边框为⽗元素定义内边距为⽗元素添加 overflow:hidden浮动、固定、绝对定位的盒⼦不会有塌陷问题5、浮动 Float5.1 为什么需要浮动？ 在很多布局效果中，标准流⽆法完成，⽽浮动可以改变元素标签默认的排列⽅式。浮动最典型的应⽤：让多个块级元素⼀⾏内排列显⽰⽹页布局的准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动5.2 浮动的特性1. 脱离标准普通流的控制（浮）移动到指定位置（动），称脱俗2. 浮动的盒⼦不再保留原先的位置3. 如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列注：浮动的元素是相互贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐）4. 浮动元素具有⾏内块特性1. 如果块级盒⼦没有设置宽度、默认宽度和⽗级⼀样宽，但是添加浮动后，它的⼤⼩根据内容来决定。2. 浮动的盒⼦没有间隙，紧挨在⼀起3. ⾏内元素同理5.3 浮动布局注意点 1、 浮动元素经常和标准流搭配使⽤ 策略：先⽤标准流的⽗元素排列上下位置，之后内部⼦元素采取浮动排列左右位置 2、⼀个元素浮动了，理论上其余兄弟 元素也要浮动（浮动的盒⼦只会影响浮动后⾯的标准流，不会影响前⾯的标准流）5.4 清除浮动⽗盒⼦有⾼度不需要清除浮动；清除浮动后，⽗级会根据浮动的⼦盒⼦⾃动 检测⾼度，⽗级有了⾼度，则不会⼀项项下⾯的标准流了。1、清除浮动的⽅法：额外标签法在最后⼀个浮动的⼦元素后⾯添加⼀个额外的标签，添加清除浮动样式⽗级添加overflow属性给⽗级添加overflow属性，将其属性值设置为hidden、auto或scroll 【缺点：⽆法显⽰溢出部分 】⽗级添加after伪元素.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}.clearfix { /*IE6、7专有*/ *zoom: 1;}⽗级添加双伪元素.clearfix:before,.clearfix:after { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1;}6、PS切图6.1 常见的图⽚格式jpg 图像格式：对⾊彩的信息保真较好，常⽤于 产品类的图⽚gif 图像格式 ：最多存储256⾊，通常⽤来显⽰简单图形及字体，实际经常⽤于⼀些图⽚⼩动画效果，也可⽀持背景透明png 图像格式：存储形式丰富，能够保持透明背景psd 图像格式 ：Photoshop的专⽤格式，对于前端⼈员来说 ，最⼤的优点是：可以直接从上⾯复制⽂字，获得图⽚，还可测量⼤⼩与距离。7、定位定位：将盒⼦定在⼀个位置，顾为，按照定位的⽅式 移动盒⼦定位 =定位模式+边偏移1、定位模式值staticrelativeabsolutefixed语义静态定位 （默认定位⽅式，⽆定位 意思）相对定位绝对定位固定定位2、边偏移就是定位的盒⼦移动到最终位置，有top、bottom、left、right 4个属性1.1 相对定位 relative 特点：它是相对于 ⾃⼰原来的位置来移动的（移动位置的时候参照点是⾃⼰原来的位置）原来在标准流的位置继续占有，后⾯的盒⼦ 仍以标准流的⽅式对待它（不脱标，继续保持 原来的位置）1.2 绝对定位 absolute特点：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document⽂档）如果祖先元素有定位（相对、绝对、固定定位），则以最近⼀级有定位祖先元素为参考点移动位置绝对定位不再占有原来的位置（拖标）1.3 固定定位 fixed 指元素固定于浏览器可视区的位置 【浏览器页⾯滚动时元素的位置不会改变】特点：1. 以浏览器的科室窗⼝为参照点移动元素1. 跟⽗元素没有任何关系2. 不随着滚动条滚动2. 不占有原先的位置（拖标）⼩技巧：固定在版⼼右侧位置1. 让固定定位的盒⼦ left：50%，⾛到浏览器可视区的⼀半位置2. 让固定定位的盒⼦margin-left版⼼宽度的⼀半距离，多⾛版⼼宽度的⼀半1.4 粘性定位（了解) sticky 相对定位和固定定位的混合特点：以浏览器的可视窗⼝为参照点移动元素（固定 定位特点）占有原先的位置 （相对定位特点）必须添加top、left、right、bottom其中⼀个才有效【跟页⾯混动搭配使⽤，兼容性叉，IE不⽀持】总结：定位模式staticrelativeabsolutefixed是否脱节否否【占有位置】是【不占有位置】是【不占有位置】移动位置不能使⽤边偏移相对于⾃⾝位置移动带有定位的⽗级浏览器可视区是否常⽤很少常⽤常⽤常⽤sticky定位模式否【占有位置】是否脱节浏览器可视区移动位置当前阶段少是否常⽤3、定位叠放次序 z-index控制盒⼦的前后次序 ，数值越⼤ ，盒⼦越靠上（默认 auto）数字后不加单位，只有定位的盒⼦才有z-index属性4、定位拓展：4.1 绝对定位 盒⼦居中 加了绝对定位的盒⼦不能通过margin：0 auto实现⽔平居中left：50%；让盒⼦的左侧移动到⽗级元素的⽔平中⼼位置。margin-lelt：100px; 让盒⼦向左移动⾃⾝宽度的⼀半。4.2 定位特殊性⾏内元素添加绝对或者固定定位，可以直接设置⾼度和宽度块级元素添加绝对或者固定定位，如果不给宽度或者⾼度，默认⼤⼩是内容的⼤⼩4.3 拖标的盒⼦不会触发外边距塌陷 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题4.4 绝对定位（固定定位）会完全压住盒⼦（包括内容）浮动元素不同，只会压住他下⾯标准流的盒⼦，但是不会压住下⾯标准流⾥⾯的⽂字（图⽚）⽽绝对定位（固定定位）会压住下⾯标准流的所有内容8、⽹页布局总结1. 标准流可以让盒⼦上下排列或者左右排列，垂直的块级盒⼦显⽰就⽤标准布局2. 浮动可以让多个块级元素⼀⾏显⽰或者左右对齐盒⼦，多个块级盒⼦⽔平显⽰就⽤浮动布局3. 定位可以让多个盒⼦前后叠压来显⽰，如果元素⾃由在某个盒⼦内移动就⽤定位布局9、元素的显⽰与隐藏1. display显⽰隐藏 【不再占有原来的位置】2. visibility显⽰隐藏 【占有原来的位置】visible：可见 ； hidden：隐藏3. overflow溢出隐藏visible： 不剪切内容也不添加滚动条hidden：不显⽰超过对象尺⼨的内容，超出的部分隐藏掉scroll：不管超出内容否，总显⽰滚动条auto：超出⾃动显⽰滚动条，不超出不显⽰滚动条【 如果有定位的盒⼦，请慎⽤ overflow:hidden，会隐藏多与部分】10、精灵图10.1 为什么需要精灵图？为了有效减少服务器接收和发送请求的次数，提⾼页⾯的加载速度10.2 精灵图的使⽤1. 主要针对于⼩的背景图⽚使⽤2. 辅助于背景位置实现 background-position3. ⼀般都是负值11、字体图标 优点：轻量、灵活、兼容总结：遇到⼀些结构和样式⽐较简单的⼩图标，使⽤字体图标遇到⼀些结构和样式复杂⼀点的⼩图⽚，使⽤精灵图12、常⽤属性应⽤12.1 vertical-align 1、使⽤场景：经常⽤于设置图⽚或者表单（⾏内块元素）和⽂字垂直对齐【只针对⾏内元素或者⾏内块元素】 2、属性值：baseline【默认，基线 】、top、middle、bottom 3、解决图⽚底部默认空⽩缝隙问题 因为⾏内块元素和⽂字是基线对齐 解决： 1、给图⽚添加 vertical-align ：middle|top|bottom 2、将图⽚转为块级元素 display：block；12.2 溢出⽂字省略号显⽰单⾏⽂本溢出/* 1、先强制⼀⾏内显⽰⽂本*/white-space: nowrap;/* 2、超出部分溢出*/overflow: hidden;/* 3、⽂字⽤省略号替代超出部分*/text-overflow: ellipsis;多⾏⽂本溢出overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒⼦模型显⽰*/display: -webkit-box;/*限制在⼀个块元素显⽰的⽂本的⾏数*/-webkit-line-clamp: 2;/*设置或检索伸缩盒对象的⼦元素的排列⽅式*/-webkit-box-orient: vertical;12.3 margin负值应⽤13、HTML5 新特性13.1 video 与 audiovideo: MP4、WebM、Ogg ;audio: MP3、Wav、Ogg13.2 input 类型13.3 表单属性14、CSS3 新特性14.1 属性选择器 【权重：10】14.2 结构伪类选择器 【权重：10】nth-child(n): 选择某个⽗元素的⼀个或多个特定的元素n 可以是数字、关键字、公式如果是数字，从1开始关键字：even 偶数；odd奇数如果是公式，从0开始nth-child(n) 与 nth-of-type(n)的区别： div:nth-child(1)：先看nth-child(1) , 之后回去看前⾯的div【对⽗元素⾥⾯的所有孩⼦排列选择，先找到第n个孩⼦，然后看是否与 E 匹配】 div:nth-of-type(1)：先看div指定的元素，之后回去看：nth-of-type(1) 第⼏个孩⼦【对⽗元素⾥⾯指定⼦元素进⾏ 排列选择，先去匹配E，然后再根据 E 找第n个孩⼦】14.3 伪元素选择器选择符::before::after简介在元素内部的前⾯插⼊内容在元素内部的后⾯插⼊内容 注意：两者都属于⾏内元素新创建的这个元素在⽂档树中找不到，所以称伪元素必须有content属性权重为115、⾏内元素、⾏内块元素、块元素转换时可分别对应 inline、inline-block、block⾏内元素特征：设置宽⾼⽆效对margin仅设置左右⽅向有效，上下⽆效；padding设置上下左右都有效，会撑⼤空间不会⾃动进⾏换⾏如：span、a、img、input、select、textarea、button、em、label⾏内块元素：不⾃动换⾏能够识别宽⾼默认排列⽅式为从左到右如：img、input、select、textarea、button块级元素：能识别宽⾼margin和padding的上下左右均对其有效⾃动换⾏多个块状元素标签写在⼀起，默认排列⽅式为从上到下如：div、h1~h6、p、ul、ol、table、form16、Web服务器【⽹站服务器】服务器（主机）是提供计算服务的设备，也是⼀台计算机以上⽂字均为⾃⼰在学习时的总结 ，如有错误，或表述不对的地⽅，请多包涵，ps：可以在评论区交流哟！
2023年6月20日发(作者：)
HTML与CSS知识点总结1、常⽤浏览器 浏览器内核（渲染引擎）：负责读取⽹页内容、整理讯息，计算⽹页的显⽰⽅式并显⽰页⾯。浏览器IEFirefoxSafariChrome/Opera内核TridentGeckoWebkitBlink备注IE、猎豹安全、360、百度浏览器⽕狐浏览器内核苹果浏览器内核chrome/opera浏览器内核。Blink其实是Webkit的分⽀注：国内浏览器⼀般采⽤Webkit/Blink内核，如UC、QQ等2、Web标准主要构成 结构Structure、表现Presentation、⾏为Behavior标准结构表现⾏为说明结构⽤于对⽹页元素进⾏整理和分类，HTML表现⽤于设置⽹页原⾊的板式、颜⾊、⼤⼩等外观样式，CSS⾏为是指⽹页模型的定义及交互的编写，javascript3、CSS的三⼤特性 层叠性、继承性、优先级3.1 层叠性3.2 继承性 ⼦标签继承⽗标签的某些样式（⼦承⽗业） 可以继承（text- , font- , line- 这些元素开头的可以继承 ，及color3.3 优先级4、盒⼦模型盒⼦模型由：内容、边框、内边距、外边距组成4.1 外边距合并 （使⽤margin定义块元素的垂直外边距时，可能出现外边距合并）嵌套块元素垂直外边距的塌陷（对于两个嵌套关系【⽗⼦关系 】的块元素，⽗元素上有外边距同时⼦元素也有上边距，此时⽗元素会塌陷较⼤的外边距值。解决⽅法：为⽗元素定义边框为⽗元素定义内边距为⽗元素添加 overflow:hidden浮动、固定、绝对定位的盒⼦不会有塌陷问题5、浮动 Float5.1 为什么需要浮动？ 在很多布局效果中，标准流⽆法完成，⽽浮动可以改变元素标签默认的排列⽅式。浮动最典型的应⽤：让多个块级元素⼀⾏内排列显⽰⽹页布局的准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动5.2 浮动的特性1. 脱离标准普通流的控制（浮）移动到指定位置（动），称脱俗2. 浮动的盒⼦不再保留原先的位置3. 如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列注：浮动的元素是相互贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐）4. 浮动元素具有⾏内块特性1. 如果块级盒⼦没有设置宽度、默认宽度和⽗级⼀样宽，但是添加浮动后，它的⼤⼩根据内容来决定。2. 浮动的盒⼦没有间隙，紧挨在⼀起3. ⾏内元素同理5.3 浮动布局注意点 1、 浮动元素经常和标准流搭配使⽤ 策略：先⽤标准流的⽗元素排列上下位置，之后内部⼦元素采取浮动排列左右位置 2、⼀个元素浮动了，理论上其余兄弟 元素也要浮动（浮动的盒⼦只会影响浮动后⾯的标准流，不会影响前⾯的标准流）5.4 清除浮动⽗盒⼦有⾼度不需要清除浮动；清除浮动后，⽗级会根据浮动的⼦盒⼦⾃动 检测⾼度，⽗级有了⾼度，则不会⼀项项下⾯的标准流了。1、清除浮动的⽅法：额外标签法在最后⼀个浮动的⼦元素后⾯添加⼀个额外的标签，添加清除浮动样式⽗级添加overflow属性给⽗级添加overflow属性，将其属性值设置为hidden、auto或scroll 【缺点：⽆法显⽰溢出部分 】⽗级添加after伪元素.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden;}.clearfix { /*IE6、7专有*/ *zoom: 1;}⽗级添加双伪元素.clearfix:before,.clearfix:after { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1;}6、PS切图6.1 常见的图⽚格式jpg 图像格式：对⾊彩的信息保真较好，常⽤于 产品类的图⽚gif 图像格式 ：最多存储256⾊，通常⽤来显⽰简单图形及字体，实际经常⽤于⼀些图⽚⼩动画效果，也可⽀持背景透明png 图像格式：存储形式丰富，能够保持透明背景psd 图像格式 ：Photoshop的专⽤格式，对于前端⼈员来说 ，最⼤的优点是：可以直接从上⾯复制⽂字，获得图⽚，还可测量⼤⼩与距离。7、定位定位：将盒⼦定在⼀个位置，顾为，按照定位的⽅式 移动盒⼦定位 =定位模式+边偏移1、定位模式值staticrelativeabsolutefixed语义静态定位 （默认定位⽅式，⽆定位 意思）相对定位绝对定位固定定位2、边偏移就是定位的盒⼦移动到最终位置，有top、bottom、left、right 4个属性1.1 相对定位 relative 特点：它是相对于 ⾃⼰原来的位置来移动的（移动位置的时候参照点是⾃⼰原来的位置）原来在标准流的位置继续占有，后⾯的盒⼦ 仍以标准流的⽅式对待它（不脱标，继续保持 原来的位置）1.2 绝对定位 absolute特点：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document⽂档）如果祖先元素有定位（相对、绝对、固定定位），则以最近⼀级有定位祖先元素为参考点移动位置绝对定位不再占有原来的位置（拖标）1.3 固定定位 fixed 指元素固定于浏览器可视区的位置 【浏览器页⾯滚动时元素的位置不会改变】特点：1. 以浏览器的科室窗⼝为参照点移动元素1. 跟⽗元素没有任何关系2. 不随着滚动条滚动2. 不占有原先的位置（拖标）⼩技巧：固定在版⼼右侧位置1. 让固定定位的盒⼦ left：50%，⾛到浏览器可视区的⼀半位置2. 让固定定位的盒⼦margin-left版⼼宽度的⼀半距离，多⾛版⼼宽度的⼀半1.4 粘性定位（了解) sticky 相对定位和固定定位的混合特点：以浏览器的可视窗⼝为参照点移动元素（固定 定位特点）占有原先的位置 （相对定位特点）必须添加top、left、right、bottom其中⼀个才有效【跟页⾯混动搭配使⽤，兼容性叉，IE不⽀持】总结：定位模式staticrelativeabsolutefixed是否脱节否否【占有位置】是【不占有位置】是【不占有位置】移动位置不能使⽤边偏移相对于⾃⾝位置移动带有定位的⽗级浏览器可视区是否常⽤很少常⽤常⽤常⽤sticky定位模式否【占有位置】是否脱节浏览器可视区移动位置当前阶段少是否常⽤3、定位叠放次序 z-index控制盒⼦的前后次序 ，数值越⼤ ，盒⼦越靠上（默认 auto）数字后不加单位，只有定位的盒⼦才有z-index属性4、定位拓展：4.1 绝对定位 盒⼦居中 加了绝对定位的盒⼦不能通过margin：0 auto实现⽔平居中left：50%；让盒⼦的左侧移动到⽗级元素的⽔平中⼼位置。margin-lelt：100px; 让盒⼦向左移动⾃⾝宽度的⼀半。4.2 定位特殊性⾏内元素添加绝对或者固定定位，可以直接设置⾼度和宽度块级元素添加绝对或者固定定位，如果不给宽度或者⾼度，默认⼤⼩是内容的⼤⼩4.3 拖标的盒⼦不会触发外边距塌陷 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题4.4 绝对定位（固定定位）会完全压住盒⼦（包括内容）浮动元素不同，只会压住他下⾯标准流的盒⼦，但是不会压住下⾯标准流⾥⾯的⽂字（图⽚）⽽绝对定位（固定定位）会压住下⾯标准流的所有内容8、⽹页布局总结1. 标准流可以让盒⼦上下排列或者左右排列，垂直的块级盒⼦显⽰就⽤标准布局2. 浮动可以让多个块级元素⼀⾏显⽰或者左右对齐盒⼦，多个块级盒⼦⽔平显⽰就⽤浮动布局3. 定位可以让多个盒⼦前后叠压来显⽰，如果元素⾃由在某个盒⼦内移动就⽤定位布局9、元素的显⽰与隐藏1. display显⽰隐藏 【不再占有原来的位置】2. visibility显⽰隐藏 【占有原来的位置】visible：可见 ； hidden：隐藏3. overflow溢出隐藏visible： 不剪切内容也不添加滚动条hidden：不显⽰超过对象尺⼨的内容，超出的部分隐藏掉scroll：不管超出内容否，总显⽰滚动条auto：超出⾃动显⽰滚动条，不超出不显⽰滚动条【 如果有定位的盒⼦，请慎⽤ overflow:hidden，会隐藏多与部分】10、精灵图10.1 为什么需要精灵图？为了有效减少服务器接收和发送请求的次数，提⾼页⾯的加载速度10.2 精灵图的使⽤1. 主要针对于⼩的背景图⽚使⽤2. 辅助于背景位置实现 background-position3. ⼀般都是负值11、字体图标 优点：轻量、灵活、兼容总结：遇到⼀些结构和样式⽐较简单的⼩图标，使⽤字体图标遇到⼀些结构和样式复杂⼀点的⼩图⽚，使⽤精灵图12、常⽤属性应⽤12.1 vertical-align 1、使⽤场景：经常⽤于设置图⽚或者表单（⾏内块元素）和⽂字垂直对齐【只针对⾏内元素或者⾏内块元素】 2、属性值：baseline【默认，基线 】、top、middle、bottom 3、解决图⽚底部默认空⽩缝隙问题 因为⾏内块元素和⽂字是基线对齐 解决： 1、给图⽚添加 vertical-align ：middle|top|bottom 2、将图⽚转为块级元素 display：block；12.2 溢出⽂字省略号显⽰单⾏⽂本溢出/* 1、先强制⼀⾏内显⽰⽂本*/white-space: nowrap;/* 2、超出部分溢出*/overflow: hidden;/* 3、⽂字⽤省略号替代超出部分*/text-overflow: ellipsis;多⾏⽂本溢出overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒⼦模型显⽰*/display: -webkit-box;/*限制在⼀个块元素显⽰的⽂本的⾏数*/-webkit-line-clamp: 2;/*设置或检索伸缩盒对象的⼦元素的排列⽅式*/-webkit-box-orient: vertical;12.3 margin负值应⽤13、HTML5 新特性13.1 video 与 audiovideo: MP4、WebM、Ogg ;audio: MP3、Wav、Ogg13.2 input 类型13.3 表单属性14、CSS3 新特性14.1 属性选择器 【权重：10】14.2 结构伪类选择器 【权重：10】nth-child(n): 选择某个⽗元素的⼀个或多个特定的元素n 可以是数字、关键字、公式如果是数字，从1开始关键字：even 偶数；odd奇数如果是公式，从0开始nth-child(n) 与 nth-of-type(n)的区别： div:nth-child(1)：先看nth-child(1) , 之后回去看前⾯的div【对⽗元素⾥⾯的所有孩⼦排列选择，先找到第n个孩⼦，然后看是否与 E 匹配】 div:nth-of-type(1)：先看div指定的元素，之后回去看：nth-of-type(1) 第⼏个孩⼦【对⽗元素⾥⾯指定⼦元素进⾏ 排列选择，先去匹配E，然后再根据 E 找第n个孩⼦】14.3 伪元素选择器选择符::before::after简介在元素内部的前⾯插⼊内容在元素内部的后⾯插⼊内容 注意：两者都属于⾏内元素新创建的这个元素在⽂档树中找不到，所以称伪元素必须有content属性权重为115、⾏内元素、⾏内块元素、块元素转换时可分别对应 inline、inline-block、block⾏内元素特征：设置宽⾼⽆效对margin仅设置左右⽅向有效，上下⽆效；padding设置上下左右都有效，会撑⼤空间不会⾃动进⾏换⾏如：span、a、img、input、select、textarea、button、em、label⾏内块元素：不⾃动换⾏能够识别宽⾼默认排列⽅式为从左到右如：img、input、select、textarea、button块级元素：能识别宽⾼margin和padding的上下左右均对其有效⾃动换⾏多个块状元素标签写在⼀起，默认排列⽅式为从上到下如：div、h1~h6、p、ul、ol、table、form16、Web服务器【⽹站服务器】服务器（主机）是提供计算服务的设备，也是⼀台计算机以上⽂字均为⾃⼰在学习时的总结 ，如有错误，或表述不对的地⽅，请多包涵，ps：可以在评论区交流哟！
发布评论