随笔分类 -  HTML+CSS

最新的HTML+CSS
什么是圣杯布局、双飞翼布局？
摘要：圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。 但是圣杯布局和双飞翼布局在实现方式上有一点差别。 圣杯布局的来历是2006年发在a list part上的这篇文章： http://alistapart.com/article/holyg 阅读全文
posted @ 2017-07-15 16:49 无为-前端开发 阅读(829) 评论(0) 推荐(0)
主流浏览器内核
摘要：IE trident 火狐gecko 谷歌苹果webkit Opera：Presto 阅读全文
posted @ 2017-07-15 14:52 无为-前端开发 阅读(173) 评论(0) 推荐(0)
行内元素有哪些?块级元素有哪些?CSS的盒模型?
摘要：块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding 阅读全文
posted @ 2017-07-15 13:04 无为-前端开发 阅读(464) 评论(0) 推荐(0)
display:none与visibility:hidden的区别是什么？
摘要：display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素并且挤占该元素原来的空间。 即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对 阅读全文
posted @ 2017-07-15 13:01 无为-前端开发 阅读(215) 评论(0) 推荐(0)
px和em的区别
摘要：px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。 阅读全文
posted @ 2017-07-15 12:50 无为-前端开发 阅读(279) 评论(0) 推荐(0)
如何垂直居中一个浮动元素？如何垂直居中一个<img>?
摘要：// 方法一：已知元素的高宽 //方法二:未知元素的高宽 如何垂直居中一个<img> 阅读全文
posted @ 2017-07-15 12:44 无为-前端开发 阅读(664) 评论(0) 推荐(0)
rgba()和opacity的透明效果有什么不同？
摘要：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度， 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！） 阅读全文
posted @ 2017-07-15 12:26 无为-前端开发 阅读(1467) 评论(0) 推荐(0)
什么是外边距重叠？重叠的结果是什么？
摘要：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠结果遵循下列计算规则： 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时，折叠结果是 阅读全文
posted @ 2017-07-15 12:24 无为-前端开发 阅读(531) 评论(0) 推荐(0)
行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
摘要：块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height 阅读全文
posted @ 2017-07-15 12:21 无为-前端开发 阅读(4531) 评论(0) 推荐(0)
CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
摘要：最基本的： 设置display属性为none，或者设置visibility属性为hidden 技巧性： 设置宽高为0，设置透明度为0，设置z-index位置在-1000em 阅读全文
posted @ 2017-07-15 11:40 无为-前端开发 阅读(2222) 评论(0) 推荐(0)
前端角度出发做好SEO需要考虑什么？
摘要：了解搜索引擎如何抓取网页和如何索引网页 你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。 Meta标签优化 主要包括主题（Title)，网站描述(Description)，和关 阅读全文
posted @ 2017-07-15 11:38 无为-前端开发 阅读(535) 评论(0) 推荐(0)
在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
摘要：dns缓存，cdn缓存，浏览器缓存，服务器缓存。 阅读全文
posted @ 2017-07-15 11:35 无为-前端开发 阅读(2073) 评论(0) 推荐(0)
网页制作会用到的图片格式有哪些？
摘要：png-8，png-24，jpeg，gif，svg，还有Webp。 Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。 阅读全文
posted @ 2017-07-15 11:33 无为-前端开发 阅读(914) 评论(0) 推荐(0)
src与href的区别。
摘要：src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 <script src =”js.j 阅读全文
posted @ 2017-07-15 11:28 无为-前端开发 阅读(193) 评论(0) 推荐(0)
cookies，sessionStorage 和 localStorage 的区别
摘要：共同点：都是保存在浏览器端，且同源的。 区别： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制 阅读全文
posted @ 2017-07-15 11:25 无为-前端开发 阅读(207) 评论(0) 推荐(0)