html怎样设置表格的行高和列宽_vue的基础知识和内容

HTML标签素单词释义及知识点总结 　　HTML标签素单词释义 　　一.说明 　　该内容为本人自学HTML所记笔记，如有不准确的地方欢迎各位批评指正，希望对需要的人有所帮助，谢谢。 　　二.基本标签 　　块级素：div；p；dl；form；h1～h6；ol；ul行内素：a；b；i；em；img；span(pre是块级素但只能包含文本或行内素) 　　三.css样式和选择器 　　选择器空格 后代选择器 后代所有div>大于号 子素选择器 所有儿子div＋加号 相邻素选择器 紧随ul其后的一个同代div～波浪线 兄弟选择器 紧随ul其后的所有同代div 　　复合选择器交集选择器这个标签是div标签而且class=”gd nav”而且有title属性（空格表示后代的意思）并集选择器逗号隔开的，所有选择器都会执行后面的样式 　　四.css盒模型 　　width 宽度height 高度border 边框复合写法border:宽度 种类 颜色;border-top:宽度 种类 颜色;border-bottom:宽度 种类 颜色;border-left:宽度 种类 颜色;border-right:宽度 种类 颜色; 　　单例写法border-width:border-style: dotted圆点边框, double双边框, dashed虚线边框,solid实线边框border-color:border-top-width:border-bottom-style:border-left-color: 　　padding 内边距margin 外边距margin:10px; margin:10px 20px;margin:10px 20px 30px;margin:10px 20px 30px 40px; 　　怪异盒模型 　　默认盒模型如果你设置一个素的宽为100px，那么这个素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的素宽度中。怪异盒模型如果你将一个素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。 　　五.行内盒模型和文字样式 　　font-size: 字体大小 (20px或1.5em)font-style: 字体样式italic 斜体normal 正常(默认)oblique 倾斜的字体inherit 继承父级的字体样式 　　font-weight: 字体粗细norma l和 boldbolder 和 lighter (相对于父级)“100”到“900”的9个数字序列 　　字体类型line-height: 行高vertical-align：垂直对齐baseline：使素的基线与父素的基线对齐middle：使素的中部与父素的中线对齐top：使素及其后代素的顶部与整行的顶部对齐bottom：使素及其后代素的底部与整行的底部对齐。 　　text-indent: 文本缩进样式 文本首行缩进一个字符 文本首行缩进20px 　　text-align: 文本对齐样式 左对齐 右对齐 居中对齐两端对齐 　　text-decoration: 文本装饰 下划线 上划线 贯穿线 　　六.默认显示类型与转换 　　块级盒模型 行内盒模型 行内块级盒模型 隐藏 　　默认样式的清除方法 　　七.背景样式 　　层级关系 　　内容层>边框层>背景图片层>背景颜色层 color>border-color>background-image>background-colorbackground-color: 背景颜色默认颜色为transparent 透明rgb:取值范围:rgb(0,0,0)->rgb(255,255,255);rgba:透明度a的取值范围为0~1（25,25,25,1）十六进制： #000000~#ffffff(大小写都可,但是要统一)， #aabbcc简写: #abc 　　background-image: 背景图片background-repeat 背景图片平铺初始值为repeat;(默认重复)如果不需要背景图片重复显示：样式值可设置为no-repeat分解为两个值: 写法二: 　　background-size: 背景图片大小数字类样式值：width height； 1.百分比: 基数为父级width和height; 2.像素: 直接数值px; (数值可以写一个或两个,如果只有一个第二个就是默认auto)关键字类样式值：cover: 图片等比缩放直到刚好覆盖背景区域，超出部分不显示 contain: 图片等比缩放,直到有一条边触碰到边 框就停止 　　background-origin: 背景图片显示基点样式content-box;背景图片内容区左上角开始padding-box; 背景图片从内边距左上角开始(默认)border-box; 背景图片相当于边框左上角开始 　　background-clip: 背景图片裁剪域content-box; 只显示内容区部分的背景图片padding-box; 显示内容区和内边距部分的背景图片border-box; 显示内容区、内边距和边框部分的图片 　　background-attachment: 背景图片关联依附fixed;背景相对于视口固定，即使一个素拥有滚动机制，背景也不会随着素的内容滚动。local; 背景相对于素的内容固定，如果一个素拥有滚动机制，背景将会随着素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。scroll; 背景相对于素本身固定， 而不是随着它的内容滚动（对素边框是有效的）。 　　overflow (默认)超出内容正常显示 超出内容隐藏 滚动条的形式展示多余内容 内容未超出,正常显示;内容超出,显示滚动条 　　背景是复合属性 　　背景: 颜色 图片 平铺方式 关联依附方式 基点样式 裁剪域 位置/背景大小 　　省略部分会被默认值替代,position和size之间要用/分割单个素可设置多个背景图片 　　八.圆角样式和渐变色样式 　　border-radius 圆角属性border-radius:20px;border-radius:20px 30px;border-radius:20px 30px 40px;border-radius:20px 30px 40px 50px; 　　border-top-left-radius:50px;椭圆角border-radius:200px/100px;border-radius:200px 150px/100px;border-radius:200px/100px 80px;border-radius:200px 100px/100px 200px; 　　圆角单位百分数:是相对于父级宽和高的百分比 (宽和高不一致的时候就是椭圆角)像素值px 　　linear-gradient 和 radial-gradient 渐变属性线性渐变 background-image:linear-gradient(red 50px,blue 100px,green 200px);background-image:linear-gradient(to left,red,black); 渐变方向background-image:linear-gradient(230deg,red,black); 渐变度数background-image:linear-gradient(rgba(255,234,256,0.6)); 支持rgbabackground-image:repeating-linear-gradient(red 50px,blue 100px); 重复渐变 　　径向渐变 background-image:radial-gradient(); 写法组成:形状,半径,圆心的位置,颜色background-image:radial-gradient(circle 100px,red,blue); 圆形background-image:radial-gradient(ellipse 100px 50px,red,blue); 椭圆background-image:radial-gradient(#cc66ff 50px,#00ffff 100px); 半径background-image:radial-gradient(circle closest-side at 60px 80px,#33ffff,#cc33ff);closest-side 以圆心到最近的一条边的距离为半径 farthest-side 以圆心到最远的一条边的距离为半径 closest-corner 以圆心到最近的一个角的距离为半径 farthest-corner 以圆心到最远的一个角的距离为半径background-image:radial-gradient(circle at 60px 80px,#33ffff,#cc33ff);第一个值x轴 第2个值是Y轴,如果只写一个值 是给x轴的 y轴默认是center 1)像素值px 　　2)百分比:父级宽和高的百分之多少为x轴和y轴定位圆心 3)关键词:x轴 left;center;right y轴 top;center;bottombackground-image:repeating-radial-gradient( ); 重复渐变 　　九.浮动样式详解 　　float:left; 左浮动float:right; 右浮动 　　解决高度塌陷 　　十.定位样式详解 　　position:absolute; 绝对定位是完全脱离文档流(文字也感受不到)设置了定位之后 所有素会变成块级素 支持宽和高没有设置宽度 宽度由内容撑开没有祖先素相对于浏览器可视区域进行偏移配合参照物,一般是配合相对定位(父相子绝)margin:auto;失效层级上升: 定位>文本>浮动>普通块素 (定位之间的层级 是取决于后来居上) 　　position:relative; 相对定位不使素脱离文档流,对于原来的结构没有任何的影响不影响素本身的特性(display)本身占位 真实的位置保留 跑出去的只是影子(灵魂出窍)层级上升: 定位>文本>浮动>普通块素 　　position:fixed; 固定定位相对于浏览器窗口进行定位 素在屏幕滚动时候 不会改变脱离文档流的 本身位置不保留 　　position:static; 静态定位素默认就是静态定位(相当于不设置定位) 不脱离文档流top/left/bottom/right 无效不会提高层级 　　top: 10px; 上到下进行偏移 left:20%; 左到右进行偏移 right:100px; 右到左进行偏移 bottom:50%; 下到上进行偏移 　　层级 z-index:数字; 　　默认层级是0数字大的会覆盖数字小的(整数)可以为负数 就会比普通块素的层级(0)还低层级只对设置了定位的素有用 (相对 绝对 固定)从父现象 父级层级即便小于0,子级层级设置多少也没有用 　　十一.表单素详解 　　属性: action 处理当提交表单的时候向何处(URL)发送表单数据method 规定用于发送数据的http方法get 数据会暴露在地址的地方 不安全 默认post 数据会包含在表单体内然后再发送到服务器,相对于get会安全一点 ,更安全地的方法 等到js再讲 　　name 表单的名字,必须要写,但是name 唯一target 规定action属性提交的页面在何处打开 默认 新窗口 　　控件素 (form标签内) 　　1. input标签 　　接受来自用户的信息 ,为单标签, 输入标签 ,行内块素 text-ident 宽高type 控件类型 　　name 控件的名称,只能英文,方便浏览器识别信息类别value 控件的值,在没有输入的情况下,输入框会出现一个默认的值placeholder 默认的提示信息(占位符),输入框里删除默认值,placeholder提示信息依然阴影显示disabled 规定禁用input素,输入框不能输入required 必须输入的控件,不输入,点提交会提醒autofocus 刷新页面后会光标自动聚焦在该输入框checked 表示单选或多选框默认选中的内容苹果 草莓 香蕉 　　2. 文本域 textarea name 文本框的名字cols 设置列数row 设置行数 　　3.下拉框 select option 来创建菜单 他是一个区域 需要name 数据名字 选项 需要value 数据值 　　​ 一月 二月 三月 四月 ​multiple 规定可以多选size 规定下拉列表可见选项的数目selected 规定下拉框默认展示的选项optgroup 规定下拉框进行分组 与选项是兄弟关系,但不能选 　　表格 table 标签 　　table标签内结构 表标题 一般不在表格的内部 表头 表正文 表正文 (注脚的内容 签名 年月日)tr 素定义表格行th 素定义表头td 素定义表格最小单 <tr> <th></th> <td></td></tr> 　　table样式border-collapse 边框样式 (1)边框合并 collapse 不同的单格边框不同情况下 粗的生效 同样的粗细的情况下 设置了颜色的生效 (2)边框分割 separate (默认) border-spacing 相邻单格边框间的距离（仅用于“边框分离”模式） 第一个是水平间隔，第二个是垂直间隔单格的合并(1)col 列 colspan 列合并 从左到右 (2)row 行 rowspan 行合并 从上到下 　　内联框架 iframe标签 　　属性src 规定在框架中显示文档的urlwidth 宽度height 高度frameborder 规定框架周围有没有边框 ( 0 没有 1 有 )name 规定框架的名称scrolling 规定是否框架中显示滚动条 ( yes 有 ; no 没有 ; auto 根据内容自动显示有无滚动条 ) 　　样式 : 外边距生效 auto无效 支持内边距 支持定位 　　十二.表格素与表格布局详解 　　(一)组合表单中的相关素 　　fieldset 分组 块级素 双标签(区域标签)<form> <fieldset> </fieldset></form>legend 定义域的标题 双标签<form> <fieldset> <legend>您的性别是:</legend> </fieldset></form>​您的性别是:​label 绑定 为input标签定义标注,本身没有任何特殊的效果 ,增加了可用性和可选择的区域 通过input标签id名和label标签for进行绑​ 　　​ ​ 　　伪类给其他素添加样式 鼠标需要放在的素写在hover前面 需要改变的素写在hover后面 只能是兄弟素 或者子素 或者是兄弟的子素(只能是平级或者后级) 去掉:hover之后就是正常的选择器表单的伪类 单选或者多选按钮被选择 焦点的状态 当某个后代素焦点的时候,自身运用样式 　　十三.高级选择器和伪素应用 　　(一)基本选择器 　　标签选择器 (直接写标签名字)类名选择器 id 选择器通配符选择器 组合选择器 后代选择器 子素选择器 相邻兄弟选择器 通用兄弟选择器 　　优先级 ​ !important>行内样式>id>类>标签>通配符>默认>继承 　　选择器是怎么样选择一个素的呢 ​ 从里往外看的（选择器是一个条件 是一个判断的名单） ​ 1.先找到素 往外开始判断 ​ 2.不满足条件就停止 满足条件就设置样式（减少工作量和搜索范围） 　　(二)伪类选择器 　　伪类选择器之状态类 鼠标悬停 处于被聚焦的状态 表单被勾选的状态 a标签一些选择器 ​ 未访问链接 ​ 用户鼠标悬停 ​ 激活链接 鼠标按下去后 ​ 已访问链接(前提是必须有hover和active)伪类选择器之结构类 css3新增结构伪类选择器 　　伪类选择器之属性类 表示属性,即选择有属性的e素 即选择所有带href属性的a标签 　　匹配有attr属性等于”value”的e素 匹配三个属性的e素 匹配有attr属性以”value”结尾的e素 匹配有attr属性以”value”开头的e素 匹配有attr属性包含”value”的e素 　　(三)伪素 　　假的素 不是代码自带的素 通过css写的素属于行内素是单标签标签之前/之后可以给伪素设置样式父级为当前素content激活伪素一个标签只能有一个before和一个after 只有双标签才有伪素,单标签没有 　　伪类与伪素的对比 伪类是一个冒号,伪素是2个冒号 　　十四.动画样式详解 　　(一)过渡 transition 　　素样式变化的过程过渡时间 transition-duration： 默认是0s ,单位：s秒 ms毫秒 1s=1000ms 　　过渡时间写在不同的位置 效果不一样写在盒子里面 过去和回来都有过渡时间、写在hover里 过去有时间 回来没有写在盒子里面1s hover 0s 过去没有时间 回来有 　　过渡时间满足的条件开始状态结束状态可计算的属性 　　bgc width height background-image 都可以 过渡延迟 transition-delay: 过渡之前的等待时间 不算在过渡时间、只要样式发生改变 就会有等待时间 　　可以设置负数 在开始之前已经跑了多少秒过渡属性 transition-property: 规定过渡作用于素哪条样式上面 多个值用逗号隔开all 对所有可能的样式都生效(默认) 　　none 没有过渡属性过渡的速率 transition-timing-function: ease 先慢后快再慢 默认linear 匀速ease-in 匀加速ease-out 匀减速 　　ease-in-out 先快后慢再快 　　自定义运动方式 网址：https://cubic-bezier.com 贝塞尔曲线 cubic-bezier , 横轴时间竖轴路程 越陡速度越快 越平缓速度越慢 cubic-bezier(x1,y1,x2,y2) 1.x1 x2取值范围是0-1 2.y1 y2 可以任意取值 过渡的复合属性 只有时长不可以省略 其他都可以省略 　　(二)动画 animation 　　过渡 transition 开始和结束状态的变化过程 需要手动触发 ​ 动画 animation 能够精确的描述各个时间进程的状态 自己运动需要满足条件 运动轨迹 　　运动时间语法 @keyframes animation-name{ keyframes-selector(关键帧){css-style} keyframes-selector(关键帧){css-style} } 属性 animation-name 自定义动画名称keyframes-selector(关键帧) 关键帧是5个 动画是4段, n段动画 关键帧是n+1 动画时长百分比: 0%-100% 可多个; form(0%) to(100%)只有开始和结束css-style 一个或者多个合法的css属性 　　样式animation-duration: 动画时间animation-delay: 动画延迟(支持负数)和过渡一样animation-timing-function: 动画速率 细节 每2个关键帧之间就有一个运动速率ease 先慢后快再慢 默认linear 匀速ease-in 匀加速ease-out 匀减速ease-in-out 先快后慢再快特殊值 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2) 　　逐帧动画 steps(n) n表示动画分为几个帧一个盒子搞不定 再加一个盒子,各控制一个运动animation-iteration-count: 动画执行次数n 次数 2. infinite 无数次animation-play-state: 动画暂停(结合伪类)paused 暂停我们动画running 运行动画 　　animation-direction: 动画执行方向normal 正常播放 默认reverse 反向播放alternate 大于等于2能看到效果 奇数次是正向 偶数次是反向alternate-reverse 大于等于2能看到效果 奇数次是反向 偶数次是正向 　　animation-fill-mode: 动画结束之后的状态 1. backwards 原始状态-动画-原始状态 2. forwards 原始状态-动画-停在最后一帧 　　动画的复合样式 　　十五.transform变化样式详解 　　应用于 2D 或 3D 转换。 ​ 允许我们对素进行旋转、缩放、移动或倾斜。 ​ 主体:页面的素 ​ 方式:旋转 缩放 移动 或者倾斜 ​ 核心概念:使物体发生形状或者位置的变化位移 设置素以自身初始位置为原点的偏移效果偏移量1:定义素水平方向的偏移量; 可以单独用translateX()来设置偏移量2:定义素垂直方向的偏移量; 可以单独用translateY()来设置 　　旋转 设置素绕着中心的旋转效果 角度值取值(正数是顺时针旋转的 负数的逆时针旋转的) 1.deg 度数 2.rad 弧度 1rad约等于57.3度 3.turn 圈 1turn=360deg缩放 倍数1:定义素水平方向的缩放倍数; 可以单独用scaleX()来设置倍数2:定义素垂直方向的缩放倍数; 可以单独用scaleY()来设置 倍数取值: 　　0~1之间, 素缩小(倍数为0素消失不见) 1 , 素放大 ​ <0, 素倒置( -1~0,倒置缩小;小于-1,倒置放大 )倾斜 角度1:定义素水平方向的倾斜角度; 可以单独用skewX()来设置角度2:定义素垂直方向的倾斜角度; 可以单独用skewY()来设置 　　设置素基点 默认值为 (中心点) 变化原点:水平位置 垂直位置 1. 关键词: 水平方向取值:left;center;right 对应百分值为left=0%;center=50%;right=100% 垂直方向的取值:top;center;bottom 对应百分值为top=0%;center=50%;bottom=100%;像素值 px百分数 % 　　变化样式复合写法 如 顺序的不同会导致完全不一样的结果 　　十六.3D动画，盒阴影及滤镜样式 　　(一)3D动画 　　perspective:1000px; 景深perspective-origin:50% 50%;（默认） 景深的基点transform-style:preserve-3d; 该属性设置在父级素中，它的子级素具有3d效果 　　(二)盒子阴影 box-shadow 　　h-shadow 必需的,水平阴影的位置,允许负值v-shadow 必需的,垂直阴影的位置,允许负值blur 可选,模糊距离spread 可选,阴影的大小color 可选,阴影的颜色inset 可选,从外层的阴影（开始时）改变阴影内侧阴影 　　多个阴影的写法:逗号隔开 　　(三)文字阴影 text-shadow 　　(四) css滤镜 filter: 　　none blur() 模糊度 只接受像素brightness() 明亮度 >1更亮 <1就是更暗 1 没有变化 0是全黑contrast() 对比度 >1更大的对比 <1就是更暗 1 没有变化 0是全黑hue-rotate() 色相旋转 默认0 可取值:90deg -0.25turn 3.142radopacity() 透明度sepia() 图片转为深褐色 0%图像无变化 100%深褐色 　　十七.flexbox弹性盒模型 　　(一)概念 　　伸缩容器:(父级)一个设有display:flex的素 ​ 伸缩项目:(子级)伸缩容器的子素 ​ 主轴:main axis 素排列方向,向上,向下,向左,向右,4个 ​ 主轴起点:main start ​ 主轴终点:main end ​ 占据主轴的空间:main size ​ 交叉轴:cross axis先主轴再有交叉轴即换行方向 共8个 ​ 交叉轴起点:cross start ​ 交叉轴终点:cross end ​ 占据交叉轴的空间:cros size 　　行内素使用弹性布局 display: inline-flex; 　　(二)给父级的样式 　　flex-direction: 素排列方向 1)row 行(默认) 2)row-reverse 与行反向 3)column 列 4)column-reverse 与列反向flex-wrap: 换行方向 1)nowrap 不换行(默认) 2)wrap 换行(第一行在上方) 3)wrap-reverse 反向换行(第一行在下方)flex-flow: 复合属性 建立坐标系 把主轴和交叉轴写在一起 flex-flow：flex-direction(主轴方向) flex-wrap(换行方向);justify-content: 子素在主轴上的对齐方式 1)flex-start 子素将向行起始位置对齐(默认) 2)flex-end 子素将向行结束位置对齐 3)center 子素将向行中间位置对齐 4)space-between 子素两端对齐其余平均地分布在行里 5)space-around 两端保留子素之间间距的一半,其余平均地分布align-items: 子素在交叉轴上的对齐方式（单行） 1)stertch 默认 项目被拉伸以适应整个容器 2)center 项目位于容器的中心 3)flex-start 项目位于容器的开始 4)flex-end 项目位于容器的结束 5)baseline 项目位于容器的基线align-content: 子素在交叉轴上的对齐方式（多行） 1)stertch 默认 项目被拉伸以适应整个容器 2)center 项目位交叉轴的中心 3)flex-start 项目位于交叉轴的开始 4)flex-end 项目位于交叉轴的结束 5)space-between 项目在交叉轴上间隙均分 6)space-around 也是均分法则 项目在交叉轴上间隙均分 2边都有相同的间隙 　　(三)给子级的样式 　　order: 素的排列顺序 用整数值来定义排列顺序,数值小的排在前面,可以为负值(-1 0 1)flex-grow: 拉伸比列 (容器有空余空间才会拉伸) 用整数值来定义拉伸比列,数值小的拉伸越小,不可为负值,默认是0flex-shrink: 压缩比列 (如果子素的总宽度超过了主轴宽度) 用整数值来定义压缩比列,默认值是1,都压缩同样大小, 0是不压缩,不可为负数flex-basis: 分配多余空间之前,项目占据的主轴空间 1)length 像素 不允许为负值 2)百分比 不允许为负值 3)auto 默认值 没有设置宽度的情况下 由内容撑开 4)content 由内容撑开align-self 单个项目于其它项目的对齐方式 可以覆盖align-items 1)auto 默认值 继承父级交叉轴对齐方式 ​ 2)stertch 默认 项目被拉伸以适应整个容器 3)center 项目位于容器的中心 4)flex-start 项目位于容器的开始 ​ 5)flex-end 项目位于容器的结束 ​ 6)baseline 项目位于容器的基线 ​ 7)inital 设置该属性为它的默认值 ​ 8)inherit 继承父级 复合属性flex : 第一个值flex-grow 第二个值flex-shrink 第三个值flex-basis ; 1)默认;其数值为 0 1 auto 2)flex:auto; 其数值为 1 1 auto 3)flex:none; 其数值为0 0 auto 4)flex:inherit; 继承父素 　　详见https://blog.csdn.net/m0_38099607/article/details/72614852?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158469662319724848362178%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158469662319724848362178&biz_id=0&utm_source=distribute.pc_search_result.none-taskhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 　　十八.阿里图标、iframe 　　(一)阿里图标 　　涵盖市面上绝大多数的一些功能性图标（矢量图） 　　(1)下载使用图标 　　进入官网https://www.iconfont.cn/先登陆 方便我们的图标统一管理在图标库里面选择图标 加入购物车在顶部导航栏 选择购物车 项目 然后把项目放进我们的项目的文件夹里面打开下载文件夹的文档观看操作Unicode 是字体在网页端最原始的应用方式font-class 是 Unicode 使用方式的一种变种Symbol 是做了一个 SVG (矢量图)的集合 　　(2)在线使用图标 　　进入官网https://www.iconfont.cn/先登陆 方便我们的图标统一管理在图标库里面选择图标 加入购物车在顶部导航栏 选择购物车 添加至项目打开项目观看操作 　　(二)swiper 框架 　　框架:将一些常用的重复的操作封装起来 使开发效率变高 　　https://www.swiper.com.cn/ 　　操作步骤标题栏’swiper’选择’swiper CDN地址’引入link标签到head标签内 (选择后缀为.min.css 压缩的css文件)引入script文件到body标签内 (选择后缀为.min.js 压缩的js文件)标题栏’中文教程’选择’swiper5 使用方法’引入html的内容到body标签内且script标签前设置css样式初始化Swiper,最好是挨着标签 (组件参见标题栏’API文档’) 　　十九.响应式布局 　　不同的设备有不同的尺寸 ,使用一套代码可能不适用所有的情况 　　(一)响应式 　　一个网页 网页自动识别设备 然后展示对应的样式核心逻辑 可伸缩的内容区块可自由排布的内容区块能够自动隐藏/显示的部分能够自动折叠的导航和菜单能够适应尺寸的图片 　　能够适应比例变化的边距响应式触发点是宽度 核心技术是css技术,基于媒体查询属性@media(查询你的设备 跟进你的设备显示对应的网页)媒体类型 all 所有媒体screen 彩屏设备(居多)print 用于打印机和打印浏览 　　语法 具体语法@media screen and (min-width:200px) and (max-width:600px){ .box{ background-color:#ffcc00; } } 媒体特性 (width:600px)(max-width:600px) 最大值的600 (x<=600)(min-width:600px) 最小值的600 (x>=600)(min-width:200px) and (max-width:600px) (200<=x<=600)(orienation:portrait) 竖屏 　　(orienation:landscape) 横屏如何引入响应式内联样式外部样式引入1）link <link rel=”stylesheet” type=”text/css” href=https://zhuanlan.zhihu.com/p/”1.css” media=”screen and (max-width:600px)”> 2）@import 写在style标签里面的第一排 　　(二)移动端适配 viewport 标签 　　可以结合比例控制大小来完成移动端适配<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”> /* 值之间逗号隔开 */ 　　​ 1)width 控制视口的一个宽度 推荐写特殊值 device-width 表示页面宽度为屏幕的宽度;不推荐写像素值 ​ 2)initial-scale 初始比例 ​ 3)maximum-scale 允许缩放的最大比例,一般为1.0,禁止缩放 因为缩放页面布局会乱 ​ 4)minimum-scale 允许缩放的最小比例,一般为1.0,一般maximum-scale和minimum-scale写一个就可以 ​ 5)user-scalable 是否允许缩放, yes / no 或者 1 / 0 ,一般是no不要写绝对宽度 用百分比来写不要写高度 让子素去撑开父素高度字体大小 用相对大小 em 或者rem 　　(三)其他适配方式 　　vw vh布局 100vw=浏览器的宽度 100vh=浏览器的高度 没有父级的概念 只跟浏览器窗口和百分比有区别, 百分比会受父级的限制rem适配 em可以作为布局单位 但是会继承父级 所以em的值不一样,是结合js来做