三个div上中下布局如何让两个div上下排列( 七 )

标签要闭合标签字母小写标签不允许随意嵌套对于CSS和JS来说：尽量使用外链CSS样式表和JS脚本。同时结构，表现和行为分为三块，符合规范。此外，还得提高页面渲染速度，提高用户体验。尽量少用行内样式，保证结构和表现分离。标签的id和class等的属性命名要做到见文知意，标签越少，加载越快，用户体验就会越高。同时代码方面也会更易于维护，便于改版。不需要变动内容，便可一同打印版本而不需要复制内容，提高网站易用性。问几个问题Q1: 当position跟display、overflow、float这些特性相互叠加后会出现什么情况？display：规定元素应该生成的框的类型（子元素的排序方式）position：规定元素的定位类型float：定义元素在哪个方向浮动其中， position:absolute / fixed 优先级最高，当position设置为absolute或者fixed时， float失效， display需要调整， float / absolute定位的元素，只能是块元素或表单（block / table）Q2：display:none 与 visibility:hidden 的区别是什么？display:none 隐藏对应的元素，在文档布局中不再分配空间（导致重排）visibility:hidden 隐藏对应的元素，在档布局中保留原来的空间（导致重绘）前者会使元素及其后代全部隐藏；后者具有继承性，子代会保持 hidden 的状态，但也可以单独设置为 visibility: visible 进行显示。Q3：border:none;与border:0;有什么区别？性能差异：
{border：0;}: 把border设置为0像素，虽然在页面上看不到，但是按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用内存值；{border：none；}被理解为border-style:none 。boder:0;比border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高；兼容性差异：
{border:none;}当border为“none”时似乎对IE6/7无效边框依然存在当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏。Q4：px | em| REM 有什么区别?PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。EMem的值并不是固定的， em会继承父级元素的字体大小。（浏览器body中1em=16px）
body选择器中声明Font-size=62.5%；将你的原来的px数值除以10 ，然后换上em作为单位；重新计算那些被放大的字体的em数值。避免字体大小的重复声明。REM（css3新增）使用rem相对的只是HTML根元素。集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。EX（不推荐）
ex 是一个相对长度单位， 1ex 被定义为一种给定字体的小写字母 “x” 的高度。因此，这个值会随字体的不同而变化。然而，很多浏览器都没有内置 ex 高度值，只是简单的取 em 的值，再取其一半作为 ex 的值。所以，一般不推荐使用 ex 这个长度单位。选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem ，如果要考虑兼容性，那就使用px,或者两者同时使用。Q5：视口单位 vw、vh、vmin、vmaxvw 视口宽度的1/100 。vh 视口高度的1/100 。vmin vw 和 vh 中的最小值。vmax vw 和 vh 中的最大值。Q6：RGBA() 与 opacity 在透明效果上有什么区别？opacity 作用于元素，以及元素内的所有内容的透明度rgba() 只作用于元素的颜色或者背景色（设置rgba透明的元素的子元素不会继承透明效果）Q7：png、jpg、 jpeg、 bmp、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？png便携式网络图片（Portable Network Graphics）,是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。大多数地方都可以用。jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。bmp的优点：高质量图片；缺点：体积太大；适用场景：windows桌面壁纸；webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3 ，大小比png小了45% 。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。Q8：隐藏或者透明元素的方法？opacity: 0; //1透明度为 0 ，整体都看不见了；visibility: hidden; //2这个和上边类似；display: none; //3消失，不占用位置；background-color: rgba(0,0,0,0.2); //4只是背景色透明Q9：css sprites是什么？如何使用？CSS sprites（雪碧）的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非标签。Q10：什么是渐进增强和优雅降级？渐进增强

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

三个div上中下布局 如何让两个div上下排列( 七 )

三个div上中下布局如何让两个div上下排列( 七 )