HTML/CSS - 随笔分类 - {前端开发}

[转] 彻底搞懂word-break、word-wrap、white-space

摘要：white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是用了n次都经常搞混，必须系统整理一下，今天我们就把这三个属性彻底搞清楚！测试代码 (文末有本文中所有例子的代码)下面是本文中用于测试三个样式属性展现情况阅读全文

posted @ 2019-06-12 13:28 {前端开发} 阅读(3038) 评论(0) 推荐(3) 编辑

[转] meta标签的作用及整理

摘要：meta的标签的使用是我在前端学习中曾经困惑过一段时间的问题。一方面不是很了解meta标签的用途，另一方面是对于meta标签里的属性和值不是懂，也不知道从哪里冒出来的，所以这篇文章专门整理下meta标签，一个必用且关键的标签。什么是meta标签？引自下W3school的定义说明一下。元数据（m 阅读全文

posted @ 2018-04-01 09:35 {前端开发} 阅读(365) 评论(0) 推荐(0) 编辑

重绘与回流——影响浏览器加载速度

摘要：对于重绘和回流的概念不是很清晰，查看了许多博文，在这里说一下自己的理解！！欢迎同学们与我交流。 1、重绘概念 2、回流的概念 3、如何减少重绘和回流重绘和回流也是为什么要减少dom操作的原因之一，在本博客文章《dom tree和render tree》中会有详解。阅读全文

posted @ 2016-12-11 14:37 {前端开发} 阅读(317) 评论(0) 推荐(0) 编辑

翻译：让网络更快一些——最小化浏览器中的回流(reflow)

摘要：关于reflowreflow(英音：[ri:’fləu] 美音：[ri’flo])在词典中的解释是回流，逆流。而在web应用中，翻译为回流有些牵强。我个人觉得，理解为回炉（重新塑形），似乎更加形象一点。举个例子，页面上节点是以树的形式展现的。假如我使用JavaScript砍掉一个节点，这棵树为了不脱... 阅读全文

posted @ 2015-11-23 11:54 {前端开发} 阅读(495) 评论(0) 推荐(0) 编辑

常用元素默认margin和padding值问题探讨

摘要：关于默认元素在不同浏览器中的margin值是多少的问题，今天做了一个探讨复制代码代码如下:// body的margin值firefox 20.0 ----------------------- body的margin为: margin:8px 8px 8px 8px;Internet Explore... 阅读全文

posted @ 2015-03-30 23:02 {前端开发} 阅读(1183) 评论(1) 推荐(0) 编辑

CSS清浮动处理（Clear与BFC）

摘要：在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 2 3 4 5 Clear float 6 23 24 25 26 27 ... 阅读全文

posted @ 2015-01-16 15:09 {前端开发} 阅读(264) 评论(0) 推荐(0) 编辑

IE的layout属性详解

摘要：要想更好的理解 css，尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE下的显示错误，就是源于 haslayout。什么是 haslayout ？haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。... 阅读全文

posted @ 2014-06-03 23:27 {前端开发} 阅读(364) 评论(0) 推荐(0) 编辑

css expression

摘要：概述 css expression(css表达式)又称Dynamicproperties(动态属性)是早期微软DHTML的产物，以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用，从IE5开始得到支持，后因标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对... 阅读全文

posted @ 2014-06-03 17:26 {前端开发} 阅读(484) 评论(0) 推荐(0) 编辑

IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

摘要：首先我们来看一个代码：复制代码代码如下: Absolute (layer2) Normal Text Content (layer3) 这个代码的效果如下：在FF和IE8下都没有任何问题的，但是在IE6和IE7下有人如下两个bug：a, 绝对定义(position:absolute)的相邻元素mar... 阅读全文

posted @ 2014-06-01 16:04 {前端开发} 阅读(316) 评论(0) 推荐(0) 编辑

使用X-UA-Compatible来设置IE8/IE9兼容模式

摘要：文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性，如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编... 阅读全文

posted @ 2014-04-28 22:56 {前端开发} 阅读(415) 评论(0) 推荐(0) 编辑

条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>

摘要：除IE外都可识别所有的IE可识别仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别仅IE8可识别仅IE9可识别项目范例说明![if !IE]The NOT ope... 阅读全文

posted @ 2014-04-28 22:30 {前端开发} 阅读(410) 评论(0) 推荐(0) 编辑

IE6/IE7下：inline-block解决方案

摘要：IE6/IE7下对display:inline-block的支持性不好。1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；对象呈递为内联对象，但是对象... 阅读全文

posted @ 2014-04-18 11:00 {前端开发} 阅读(198) 评论(0) 推荐(0) 编辑

使用div模拟出frameset效果

摘要：div仿框架布局顶部内容(iframe上scrolling="yes" style="overflow:visible;"防止IE6出现iframe横向滚动条) 底部内容阅读全文

posted @ 2014-01-20 16:45 {前端开发} 阅读(568) 评论(0) 推荐(0) 编辑

IE去掉链接虚线框的几个方法

摘要：虚线框简直就是个多余的东西，上一篇教大家怎么去除Firefox中链接和按钮虚线框，今天叫大家去掉去除IE中链接的虚线框。方法一：利用javascript的onfocus事件，实现如下：Html代码设计蜂巢如果引入了jQuery框架则可以利用它的事件绑定机制：Js代码$('a').bind('focus', function(){ if(this.blur){ //如果支持 this.blur this.blur(); } });方法二：利用css样式，实现如下：Css代码 a{ blr: expression(this.onFocus... 阅读全文

posted @ 2013-10-07 19:11 {前端开发} 阅读(428) 评论(0) 推荐(0) 编辑

我是如何对网站CSS进行架构的

摘要：一、写在前面的都是自己积累形成的一些东西，可能带有明显的个人印记。不是专业内容，不是权威指南，只是展示一点自己的观点，借此希望能与各位优秀的同行交流看法，见解。以得到进步与提高。二、我所知的一些过往的做法关于如何处理网站的CSS，各个网站做法都不一样，这随着网站的性质及大小不同，公司前人留下的规范不同，以及CSS工程师的眼界不同而有所不同。由于我从业经历有限，所知甚浅，只能说些肤浅业余的内容，不准确之处欢迎指出。就CSS文件而言，有的网站分为header.css, body.css, footer.css，不做评价；有的分为reset.css, main.css, content.css，不做阅读全文

posted @ 2013-09-29 10:41 {前端开发} 阅读(484) 评论(0) 推荐(0) 编辑

RGBA颜色与兼容性的半透明背景色

摘要：所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。关于rgba的基础知识介绍，您可以参见这里：CSS3 RGBA colors使用参考指南我们平时用的较多的是16进制颜色，例如黑色#000000;白色#FFFFFF，这些是16进制表示的颜色，如果使用RGB颜色表示就是rgb(0, 0, 0)与rgb(255,255,255)，其实本质上是一样的，只是一个是16进制表示的，一个是二进制表示的(RGB颜色)。而RGBA颜色归为CSS 阅读全文

posted @ 2013-09-04 15:47 {前端开发} 阅读(1282) 评论(0) 推荐(0) 编辑

CSS border三角、圆角图形生成技术简介

摘要：一、前言利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，故本文再次简单叙述一下，另外，本文还将展示可能并不为众人所知的CSS border圆角生成技术。好了，裹脚布的话就不说了，直接进入正题。二、CSS border生成三角技术简介效果抢鲜下图为使用CSS的border属性实现的三角效果：.test{width:0; height:0; border-width:20px 10px; border- 阅读全文

posted @ 2013-08-23 17:56 {前端开发} 阅读(426) 评论(0) 推荐(0) 编辑

纯CSS实现各类气球泡泡对话框效果

摘要：一、关于纯CSS实现气泡对话框首先，来张大图：上边这张黄黄的，大大的，圆圆的，有个小尾巴，文字内容有些YY的图片，就是使用纯CSS实现的气泡对话框效果，一点图片都没有哦。看到这里，你是不是跟我一样，有些惊叹CSS的潜力呢。关于这张图片，暂时先放到一边，下面我要讲一些与主旨相关的比较重要的，同时又很实用的一些技术。我们首先看下面这一张图片（截自人人网）：可能颜色有点淡，在左上角有个90度的尖角，于是整个形成了一个气泡对话框。现在考考你，如果你来实现这个效果，你会怎么做？//zxx:假设你已经思考了一会儿｡◕‿◕｡我想，如果您没有看本文标题，可能就想到的是做个90度等腰三角形小图片；就算您知道可以阅读全文

posted @ 2013-08-13 15:57 {前端开发} 阅读(1381) 评论(0) 推荐(0) 编辑

CSS工具之CSS重置(CSS Reset)

摘要：css代码：/* v1.0 | 20080212 */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, 阅读全文

posted @ 2013-08-12 14:13 {前端开发} 阅读(330) 评论(0) 推荐(0) 编辑

checkbox复选框的一些深入研究与理解

摘要：一、一开始的唠叨最近忙于开发，自淫于项目的一步步完工，心浮躁了。舍近而求远，兵家之大忌。我是不是应该着眼于眼前的东西，好好的静下心来，超过一般人的沉静与沉浸，研究最基本的东西呢？这番思考，让我找到了一些方向。对于checkbox，从我开始接触HTML开始，陆陆续续也研究过好多次，然而多是零星的知识点的累加，或是掌握了些表象的东西，是否深入核心，是否深入其本质，是否有了完善的总结，是否融入自己的世界观，都没有，而我今天要做的工作就是把过去的那些积累好好的精心的整理出来，加上自己的思考，加上自己的理解，展示出来。提前的说明：本文checkbox的讲解不针对Safari浏览器，或仅是一带而过，Saf 阅读全文

posted @ 2013-08-12 11:52 {前端开发} 阅读(1248) 评论(0) 推荐(0) 编辑

前端开发

随笔分类 - HTML/CSS

公告