布局部分(二)_不使用border实现1px的-CSDN博客

本文链接：https://blog.csdn.net/qq_42451776/article/details/118325319

文章目录

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

 <div style="height:1px;overflow:hidden;background:red"></div>

title 与 h1 的区别？

title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。

的 title 和 alt 有什么区别？

title 通常当鼠标滑动到元素上的时候显示 alt 是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

Canvas 和 SVG 有什么区别？

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。

渐进增强和优雅降级的定义

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

attribute 和 property 的区别是什么？

attribute 是 dom 元素在文档中作为 html 标签拥有的属性；
property 就是 dom 元素在 js 中作为对象拥有的属性。
对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。

常用的 meta 标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

<!DOCTYPE html> H5 标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版 本和 Chrome
 <meta name=”description” content=”不超过 150 个字符”/> 页面描述 
 <meta name=”keywords” content=””/> 页面关键词者
 <meta name=”author” content=”name, email@gmail.com”/> 网页作 
 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取
 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport 
<meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin
<meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 
 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
 <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
 <meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色
<meta name=”renderer” content=”webkit”> 启用 360 浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免 IE 使用兼容模式
 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码
<meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些 老的不识别 viewport 的浏览器，比如黑莓 
 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器
 <meta name=”screen-orientation” content=”portrait”> uc 强制竖屏 
 <meta name=”x5-orientation” content=”portrait”> QQ 强制竖屏 
<meta name=”full-screen” content=”yes”> UC 强制全屏
  <meta name=”x5-fullscreen” content=”true”> QQ 强制全屏 
 <meta name=”browsermode” content=”application”> UC 应用模式 
  <meta name=”x5-page-mode” content=”app”> QQ 应用模式 
 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存
<meta http-equiv=”pragma” content=”no-cache”> 
<meta http-equiv=”cache-control” content=”no-cache”> 
<meta http-equiv=”expires” content=”0″>

主流浏览器内核私有属性 css 前缀？

mozilla 内核（firefox,flock 等） -moz webkit 内核（safari,chrome 等） -webkit opera 内核（opera 浏览器） -o trident 内核（ie 浏览器） -ms

前端性能优化？

前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。我认为可以从这些方面来进行优化。
第一个方面是页面的内容方面 （1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。（2）通过 DNS 缓存等机制来减少 DNS 的查询次数。（3）通过设置缓存策略，对常用不变的资源进行缓存。（4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。（5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。
第二个方面是服务器方面 （1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。（2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。（3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie 第三个方面是 CSS 和 JavaScript 方面（1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。（2）避免使用 @import 标签。（3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。（4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相关知识点：（1）有两种盒子模型：IE 盒模型（border-box）、W3C 标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分IE 盒模型和 W3C 标准盒模型的区别：（1）W3C 标准盒模型：属性 width，height 只包含内容 content，不包含 border 和 padding
（2）IE 盒模型：属性 width，height 包含 content、border 和 padding，指的是 content +padding+border。在 ie8+浏览器中使用哪个盒模型可以由 box-sizing（CSS 新增的属性）控制，默认值为 content-box，即标准盒模型；如果将 box-sizing 设为 border-box 则用的是 IE 盒模型。如果在 ie6，7，8 中 DOCTYPE 缺失会将盒子模型解释为 IE 盒子模型。若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C 盒模型。

CSS 选择符有哪些？

（1）id 选择器（#myid）（2）类选择器（.myclassname）（3）标签选择器（div,h1,p）（4）后代选择器（h1 p）（5）相邻后代选择器（子）选择器（ul>li）（6）兄弟选择器（li~a）（7）相邻兄弟选择器（li+a）（8）属性选择器（a[rel=“external”]）（9）伪类选择器（a:hover,li:nth-child）（10）伪元素选择器（::before、::after）（11）通配符选择器（*）

::before 和:after 中双冒号和单冒号有什么区别？

单冒号（:）用于 CSS3 伪类，双冒号（::）用于 CSS3 伪元素。

CSS 中哪些属性可以继承？

有继承性的属性：（1）字体系列属性 font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust （2）文本系列属性 text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、 text-transform、direction、color （3）表格布局属性 caption-sideborder-collapseempty-cells （4）列表属性 list-style-type、list-style-image、list-style-position、list-style （5）光标属性 cursor （6）元素可见性 visibility （7）还有一些不常用的；speak，page，设置嵌套引用的引号类型 quotes 等属性注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承它的值，inherit 关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

CSS3 有哪些新特性？

新增各种 CSS 选择器（:not(.input)：所有 class 不是“input”的节点）圆角（border-radius:8px）多列布局（multi-columnlayout）阴影和反射（Shadow\Reflect）文字特效（text-shadow）文字渲染（Text-decoration）线性渐变（gradient）旋转（transform）缩放，定位，倾斜，动画，多背景

用纯 CSS 创建一个三角形

 <style>
        .box {
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent red transparent;
        }
    </style>

li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

间隔设为默认 letter-spacing:normal。

初始化样式

 body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        blockquote,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        pre,
        form,
        fieldset,
        legend,
        button,
        input,
        textarea,
        th,
        td {
            margin: 0;
            padding: 0;
        }

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/1.5tahoma, arial, \5b8b\4f53;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
        }

        address,
        cite,
        dfn,
        em,
        var {
            font-style: normal;
        }

        code,
        kbd,
        pre,
        samp {
            font-family: couriernew, courier, monospace;
        }

        small {
            font-size: 12px;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        sup {
            vertical-align: text-top;
        }

        sub {
            vertical-align: text-bottom;
        }

        legend {
            color: #000;
        }

        fieldset,
        img {
            border: 0;
        }

        button,
        input,
        select,
        textarea {
            font-size: 100%;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

width:auto 和 width:100%的区别

一般而言 width:100%会使元素 box 的宽度等于父元素的 contentbox 的宽度，最终宽度可能会大于父节点宽度。 width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间。

简单介绍使用图片 base64 编码的优点和缺点。

base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的 url 属性。使用 base64 的优点是：（1）减少一个图片的 HTTP 请求使用 base64 的缺点是：（1）根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。（2）使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件，比如 HTML 或者 CSS，这相比域直接缓存图片的效果要差很多。
（3）兼容性的问题，ie8 以前的浏览器不支持。一般一些网站的小图标可以使用 base64 图片来引入。

BFC 规范

相关知识点：块格式化上下文（BlockFormattingContext，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。通俗来讲 •BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。 如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
创建 BFC （1）根元素或包含根元素的元素（2）浮动元素 float＝left|right 或 inherit（≠none）（3）绝对定位元素 position＝absolute 或 fixed （4）display＝inline-block|flex|inline-flex|table-cell 或 table-caption
（5）overflow＝hidden|auto 或 scroll(≠visible)