网页中外边距的属性有哪些呢？

来源：蜘蛛抓取(WebSpider) 时间：2022-05-17 15:05 标签： css内边距和外边距的属性

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

改版的时候更方便 只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

6、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

7、为什么利用多个域名来存储网站资源会更有效？

节约主域名的连接数，优化页面响应速度

8、请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

10、简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

59、超链接访问过后hover样式就不出现的问题是什么？如何解决？

62、请用Css写一个简单的幻灯片效果页面

　　答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如

  • 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

HTML5的离线储存怎么使用，工作原理能不能解释一下？

  • 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
  • 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
    • 页面头部像下面一样加入一个manifest的属性；

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

  • 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下，浏览器就直接使用离线存储的资源。
  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
  • cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
    • localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
    • sessionStorage 数据在当前浏览器窗口关闭后自动删除
    • cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
  • 搜索引擎的检索程序无法解读这种页面，不利于SEO
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

Label的作用是什么？是怎么用的？

  • label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

HTML5的form如何关闭自动完成功能？

如何实现浏览器内多个标签页之间的通信? (阿里)

  • 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

  • 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

网页验证码是干嘛的，是为了解决什么安全问题

  • 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
  • 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响
  • strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
  • i内容展示为斜体，em表示强调的文本

页面导入样式时，使用 link 和 @import 有什么区别？

  • 页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载

介绍一下你对浏览器内核的理解？

  • 渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机
  • JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互
  • 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

HTML5有哪些新特性？

HTML5移除了那些元素？

如何处理HTML5新标签的浏览器兼容问题？

  • DOCTYPE声明、新增的结构元素、功能元素

HTML5的离线储存工作原理能不能解释一下，怎么使用？

  • HTML5的离线储存原理：
    • 用户在线时，保存更新用户机器上的缓存文件；当用户离线时，可以正常访离线储存问站点或应用内容
  • HTML5的离线储存使用：

浏览器是怎么对HTML5的离线储存资源进行管理和加载的？

  • 如果是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储
  • 如果已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作。如果文件改变了，那么就会重新下载文件中的资源并进行离线存储
  • 离线的情况下，浏览器就直接使用离线存储的资源。

iframe 有那些优点和缺点？

    • 用来加载速度较慢的内容（如广告）
    • 可以使脚本可以并行下载
    • 无法被一些搜索引擎索识别
    • 会产生很多页面，不容易管理

label 的作用是什么？怎么使用的？

  • label标签来定义表单控件的关系：
    • 当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上

如何实现浏览器内多个标签页之间的通信？

  • 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放
  • 当用户浏览其他页面，暂停网站首页幻灯自动播放
  • 完成登陆后，无刷新自动同步其他页面的登录状态

可以引入其他的html到当前的html中显示

主要是利用iframe的属性进行样式的调节

pre与code标签（一起使用）

针对网页的程序代码的显示效果

给flash和一些插件进行渲染操作的标签

ruby与rt（一起使用）

添加网址标题栏的小图标

dns解析处理，加快网站访问速度

href 链接的地址 target 可以改变链接打开方式，默认值为：_self（当前页面打开）,可以改成blank,则跳转时打开新页面

也可以如下实现，改变所有链接跳转方式，都为新页面跳转

gif: 支持动画，只有全透明和不透明两种模式，只有256种颜色。

jpg: 采用有损压缩算法，体积较小，不支持透明，不支持动画。

png: 采用无损压缩算法，体积相对较小，支持背景透明，不支持动画。（比较常用）

svg: 只会记录图像的形状和颜色。(不太适合用于保存照片，适合保存图形)

src 引入图片的地址

title 鼠标划上时的提示信息 alt 若图片加载失败后的提示信息

colspan:单元格所占列数（列合并）

rowspan:单元格所占行数（行合并）

尽量不省略tbody标签

size 初始显示的选项

CSS重置（去除默认样式）

很多元素标签都自带边距和符号或边框等默认样式，我们可以用下面的CSS给它去除掉

图片与容器底部有一些空隙

图片是内联块元素，内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐

选择器权重：选择器选择的范围，越小越精确，优先级就越高

"..." 中填入地址路径

布局相关的样式不能被继承（默认不能继承，但可以通过设置相关继承属性 inherit 值）

浮动影响的都是后面的元素

当父元素，因为子元素浮动效果，无法包含子元素时，可采用以下办法解决：

固定宽高： 不推荐；不适合做自适应的效果

父元素浮动：不推荐，父容器也会影响到后面的元素

设置空标签： 不推荐，会多添加一个标签

after伪类: 推荐，是空标签的加强版，目前各大公司的做法 clear: left/right/both; ( 只会操作块标签，对内联标签不起作用 )

margin:auto; （让父元素自动设置边距，左右边距相等，即达到居中效果，水平方向有效）

盒子模型塌陷：当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。

margin---简写顺序成顺时针环绕型，上右下左

注：布局一般用块标签，修饰文本用内联标签

要想定位，先给这个元素一个坐标（可以给负数），再设置定位方式。

position: absolute; (绝对定位) 使内联元素支持宽高 （让内联具备块特性；使块元素默认宽根据内容决定（让块具备内联的特性）

position: relative; (相对定位即被参考的对象) 如果没有定位偏移量，对元素本身没有任何影响；不使元素脱离文档流；不影响其他元素布局；left、top、right、bottom是相对于当前元素自身进行偏移的

设置了定位的元素，会依次从最近的外层开始，查找设置了定位方式的元素，直到找到，即以它为参考位置来定位，若一直未找到，则最终会以浏览器窗口为参考系来进行定位。

eg: C元素设定了定位，则会先查找B是否设定了定位方式，若有则以B为参考系，若没有设置，则继续向外查找A,同理；最后都没有，则以浏览器窗口为参考系。

表示光标指到按钮上时变成小手的形状，默认为default(箭头)

也可以实现自定义手势：准备图片： .cur 、.ico

overflow: auto; 显示滚动条（内容溢出容器时才显示）

CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

可以减少图片的质量，网页的图片加载速度快；减少图片的请求的次数，加快网页的打开

伪类选择器 注：必须跟在一个选择器元素后面

:nth-child(n) 是根据自然顺序来编号的，即选择按顺序排列的第n个元素，与类型无关

这里选择的是li下的第1,4,6个超链接a元素

根据不同后缀名来选择元素

表示后缀为.pptx的图片，从精灵图中（小图标都在一列中，通过改变背景的y位置来选出图标）选择出相应图标

^ 属性的开头 $ 属性的结尾

hover 当子元素被hover的时候，父元素也同样被hover了（父元素要有hover）

多行文本框可以设定：resize: 表示重设大小 none 表示文本框大小不可调整 horizontal 表示水平方向可调整 vertical 表示垂直方向可调整

outline: none 可以取消输入时输入框的外圈效果

opacity: 0(透明)~1(不透明) 透明度，且占空间，若父元素设置了，子元素也会改变 注：transparent为颜色设置，所以不占空间

z-index 设置了这个，则大者居上原则（本来是后者居上原则和定位居上原则）

深层次静态页面组件及效果

阴影的效果添加(text-shadow:文字阴影) box-shadow：left(改变水平方向的值) top(改变垂直方向的值) 模糊值(改变阴影模糊程度) 扩大值(阴影扩大的值) 影子颜色 阴影方向（内/外）

只能添加给块元素，复合写法执行时有顺序的，从后往前，且translate会受到rotate、scale、skew的影响

transform缩放和旋转(旋转使用左手法则)

注：渐变的0度是在页面左下边，正值会按顺时针旋转，负值按逆时针旋转

多重阴影（多添加几个阴影效果即可）

box-shadow：left(改变水平方向的值) top(改变垂直方向的值) 模糊值(改变阴影模糊程度) 扩大值(阴影扩大的值) 影子颜色 阴影方向（内/外）

viewport 手机浏览器的窗口大小 content 窗口和手机设备的大小一致 网页缩放为原来的多少倍，根据js来设定

大多采用rem配置，等比例缩放

flex-grow 父元素剩余空间的瓜分比例

列举echarts常用的配置项，说明含义

柱形图默认参数 bar 折线图默认参数 line

介绍一下你们公司的开发流程（自己理解，形成自己的东西） 

答: （这是最基础的流程，自己理解，形成自己的东西）
 2、先分配确定开发人员,然后产品会召集相关开发人员一起开一个项目分析会
 3、接着就项目立项了,项目立项会形成一个prd,确定开发周期
 4、然后就进入开发阶段了,在开发一段时间会进行前后端联调
 5、功能完成后会先进行冒烟测试,检查是否有阻塞缺陷
 6、开发全部结束就进入测试阶段
 7、测试通过就可以上线了,上线之后会有一个回归测试，检查有没有影响以前的功能，保证全流程没有问题

在地址栏输入网址，到数据返回的过程是什么？

1、支持缓存，只有依赖数据发生改变，才会重新进行计算 2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化 3、如果computed需要对数据修改，需要写get和set两个方法，当数据变化时，调用set方法。 4、computed擅长处理的场景：一个数据受多个数据影响，例如购物车计算总价 1、不支持缓存，数据变，直接会触发相应的操作； 2、watch支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 3、immediate：组件加载立即触发回调函数执行 4、deep:true的意思就是深入监听，任何修改obj里面任何一个属性都会触发这个监听器里的 handler方法来处理逻辑 5、watch擅长处理的场景：一个数据影响多个数据，例如搜索框

我要回帖

更多关于 css内边距和外边距的属性 的文章

 

随机推荐