随笔分类 -  [33]DIV CSS

• CSS盒模型和定位的类型
  摘要：此文根据Steven Bradley的《How Well Do You Understand CSS Positioning?》所译，整个译文带有我自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。当人们刚接触布局的时候都比较倾向于使用定位的方式。因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说，有一些东西会绊倒新手，所以在它成为你的惯用技巧前你需要掌握它们。一旦你更深入地了解了它是怎么运作的，你就能够做出一些更棒的事情来。CSS盒模型和定位的类型为了搞清楚定位首先你得了解CSS盒模 阅读全文
  posted @ 2013-10-12 23:40 HackerVirus 阅读(416) 评论(0) 推荐(0)
• CSS sprites减少HTTP请求
  摘要：使用CSS sprites减少HTTP请求sprites是鬼怪，小妖精，调皮鬼的意思，初听这个高端洋气的名字我被震慑住了，一步步掀开其面纱后发觉很简单的东西，作用却很大神马是CSS 小妖精CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。使用过jQuery UI的同学可定见过这种图片很多页面常用的小图标，但是我们看看每个小图标的源码的时候会发现，这些小图标的src是同一个文件，都是这张大图为什么要使用CSS小妖精姑且先 阅读全文
  posted @ 2013-10-09 23:29 HackerVirus 阅读(202) 评论(0) 推荐(0)
• web前端学习笔记(CSS变化宽度布局)
  摘要：web前端学习笔记(CSS变化宽度布局)一、“1-2-1”单列变宽布局： 对于变宽度的布局，首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化。这两种都是很常用的布局方式。然而对于等比方式而言，相对比较简单，和我上一篇博客中1-2-1的布局方式非常类似，因此这里只是介绍一列固定另一列变宽的case。 在实际的应用中，只有单列宽度变化，而其它保持固定的布局可能会更加实用。一般在存在多个列的页面中，通常比较宽的一个列是用来放置内容的，而窄列放置链接、... 阅读全文
  posted @ 2013-09-30 09:59 HackerVirus 阅读(241) 评论(0) 推荐(0)
• web前端学习笔记(CSS固定宽度布局)
  摘要：web前端学习笔记(CSS固定宽度布局)一、单列布局： 这是最简单的一种布局方式，之所以给出该示例，还是为了保证本篇博客的完整性。固定宽度布局 Page Header 这是一行文本，这里作为样例，显示在布局框中。 这是一行文本，这里作为样例，显示在布局框中。 Page Content 这是一行文本，这里作为样例，显示在布局框中。 这是一行文本，这里作为样例，显示在布局框中。 Page Footer 这是一行文本，这里作为样例，显示在布局框中。 从CSS代码可以看到，3个div的... 阅读全文
  posted @ 2013-09-29 14:23 HackerVirus 阅读(242) 评论(0) 推荐(0)
• CSS选择器从右向左的匹配规则
  摘要：CSS选择器从右向左的匹配规则下面这个栗子，CSS选择器它是如何工作的？.mod-nav h3 span {font-size: 16px;}如果不知道匹配规则，可能的理解是从左向右匹配:先找到.mod-nav，然后逐级匹配h3、span，在这个过程中如果遍历到叶子节点都没有匹配就需要回溯，继续寻找下一个分支。但事实上，CSS选择器的读取顺序是从右向左。还是上面的选择器，它的读取顺序变成：先找到所有的span，沿着span的父元素查找h3，中途找到了符合匹配规则的节点就加入结果集；如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程（如果有多个最右节点为spa 阅读全文
  posted @ 2013-09-26 23:09 HackerVirus 阅读(1462) 评论(0) 推荐(0)
• web前端学习笔记
  摘要：web前端学习笔记(CSS盒子的定位)相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 使用relative，即相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top和bottom来指定。以下为后面实验的基准代码。position属性 Box-1 这是一个很简单的标准流方式的两层的盒子，页面的效果如下图：实验一：一个子块的情况 下面的C... 阅读全文
  posted @ 2013-09-23 11:23 HackerVirus 阅读(185) 评论(0) 推荐(1)
• CSS盒子的浮动
  摘要：web前端学习笔记(CSS盒子的浮动)在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现就会有所不同。 CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不在伸展，而是根据盒子里面的内容的宽度来确定。准备基础代码 浮动的性质比较复杂，这里先制作一个基础的页面，代码如下。后面一系列的实验将基于下面的代码为基础，并根据不同的知识点添加不同的新代码。 ... 阅读全文
  posted @ 2013-09-18 11:25 HackerVirus 阅读(539) 评论(0) 推荐(0)
• css兼容性问题的整理
  摘要：css兼容性问题的整理1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定line-height。确保所有文字都有默认的line-height值。2.ff下容器高度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。3.横向上的内容撑破容器问题。如果float容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故 阅读全文
  posted @ 2013-09-16 10:07 HackerVirus 阅读(207) 评论(0) 推荐(0)
• float的深入剖析
  摘要：float的深入剖析float是什么？float即为浮动，在html中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：文档流：在html中文档流即为元素从上至下排列的顺序。脱离文档流：元素从正常的排列顺序被抽离。最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。float造成的影响对其父元素的影响对于其父元素来说，元素浮动之后，它所占的空间会消失在当前文档中，所以它也无法撑开其父元素，效果如下图所示。 1 //CSS 2 #wrapper {.. 阅读全文
  posted @ 2013-09-15 21:59 HackerVirus 阅读(241) 评论(0) 推荐(0)
• ”Metro UI之磁贴（二）
  摘要：也来“玩”Metro UI之磁贴（二）继昨天的“也来“玩”Metro UI之磁贴（一）”之后，还不过瘾，今天继续“玩”吧——今天把单选的功能加进来，还有磁贴的内容，还加了发光效果（CSS3，IE9+浏览器），当然，还是纯CSS，真的要感谢“现代”浏览器~~，废话少说，先上图，然后代码……效果图：鼠标经过时显示内容：代码来了:)： 1 2 3 4 5 6 Metro UI之磁贴（Tile） 7 142 143 144 145 Metro UI之磁贴（Tile） IE9+146 147 多选（input... 阅读全文
  posted @ 2013-09-12 22:53 HackerVirus 阅读(263) 评论(0) 推荐(0)
• html中table的画法及table和div的区别
  摘要：html中table的画法及table和div的区别最近项目中，根据客户的要求需要在页面上展示各种报表什么的，各种表格的都会出现。这里也将table的画法，做一下总结。办法虽笨但很实用。这也是从高人那里学来的，总之是屡试不爽啊。就以下面的表格为例。 若想画上面的表格，首先得确定是几行几列的。怎么确定？ 总之，不管三七二十一，出现横线的地方画一红横线，出现竖线的地方画一竖线分割，如上图所示，已基本确定是一个5行11列的表格。表格基本框架已确定，接下来就是用table标签来实现上面的表格了。简单介绍一下table中常用的属性。定义和用法 标签定义 HTML 表格。 简单的 HTML 表格由 ta. 阅读全文
  posted @ 2013-09-12 22:42 HackerVirus 阅读(490) 评论(0) 推荐(0)
• DOM处理
  摘要：DOM处理这几天整理了一下思路，本来觉得DOM部分会有很多东西，但是忽然发现频繁使用的其实并不太多classclass处理部分主要有四个hasClass：检查元素是否包含某个classaddClass：为元素添加一个classremoveClass：为元素删除一个classtoggleClass:切换元素的class， 如果只传入一个class，则切换这个class的有无；如果传入两个class，则元素删除当前class，替换为另一个hasClass : function(element, className) { var re = new RegExp("\\b" + . 阅读全文
  posted @ 2013-09-09 11:03 HackerVirus 阅读(248) 评论(0) 推荐(0)
• 简明CSS属性：定位
  摘要：简明CSS属性：定位第一话 定位 （Positioning） 关键词：position/z-index/top/bottom/right/left/clipPOSITION该属性用来决定元素在页面上的位置。用法：position：static(默认) | fixed | relative | absolutestatic遵守正常的文档流，不设置top,bottom,left,right值。fixed脱离正常的文档流，完全以浏览器窗口为参照物，不随鼠标的滚动而滚动。设定tblr值。relative相对于什么呢？是相对于该元素原本在文档流中的位置进行偏移。也就是说，如果按文档流其本来应该在A处，. 阅读全文
  posted @ 2013-09-08 21:59 HackerVirus 阅读(151) 评论(0) 推荐(0)
• IE6的那些css常见bug（汇总）
  摘要：IE6的那些css常见bug（汇总）我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建。这几天 我做了这个决定 把我的博客建起来 每周发一些看到的，听到了一些前端知识或者前沿技术。 另外说一句，我是一个前端小白 所以高手就忽略我吧 免得说我班门弄斧 我只是想写点或记录点东西 可能还会帮助一些比我更加新的新手 共同成长 ^_^！ 好了，废话不说了，众所周知，IE6…………（对不起 先让我恶心下....） 随着高级浏览器的风靡 不仅是前端开发人员 就连他的父母“大微软”也恨不得他早点灭亡 但这并不是ie6的责任 这是时代发展的必然结果 我相... 阅读全文
  posted @ 2013-09-03 09:49 HackerVirus 阅读(162) 评论(0) 推荐(0)
• 函数式 CSS (FCSS)
  摘要：函数式 CSS (FCSS)在Wealthfront我们是一个函数式编程的超级粉丝。强调不变性和函数式风格意味着更少的“意外”(surprises)，因为副作用是有限的或不存在的。我们能将独立的组件迅速构建出大型系统，通过组合的方式组合组件。函数式编程原则直接应用在大多数语言中，即使他们不是被定义为函数式。同样适用非函数式的css。让我们看下我们最喜欢的(和最讨厌的)一些特性在样式语言中。一切都是全局作用域。一切都是可变的。优先级的计算，基于一些有趣的规则。因此让我们讨论下我们能做什么。Wealthfront的 CSS(实际是 SCSS)风格指南概述一些经验法则，让我们在CSS中获得函数式编程 阅读全文
  posted @ 2013-09-02 18:15 HackerVirus 阅读(1107) 评论(0) 推荐(0)
• CSS hack前传——背景图片全屏
  摘要：CSS hack前传——背景图片全屏CSS hack前传——背景图片全屏在之前的博客CSS hack中我有提到，一个问题的解决让我对CSS 寒窗苦的态度从不屑一顾，到认真研究了实验一下，事情是这样的，最近产品发布，向来狂妄的我被一个bug纠缠住了，甚至丧气的表示我做不出来，说来也惭愧，难住我的并不是造火箭这样的难题，只是个背景图片。。。前世今生最近为产品做了一个扁平化的新Theme，看起来很美观，公司的艺术家看后表示需要一张有深意的背景图片，发给我了放上去后一看艺术家就是艺术家，果真和Theme很搭而且让网站高端了很多（自我感脚），兴冲冲的就发布了上去，主要代码大概是这样的 ... 阅读全文
  posted @ 2013-08-31 23:19 HackerVirus 阅读(254) 评论(0) 推荐(0)
• csshack技术
  摘要：我最近想好好整理下csshack技术，但是结果很沮丧，下面我将我最初写的笔记和大家分享下。 我在单位整理的研究笔记： 不同的浏览器对某些CSS代码解析会存在一定的差异，因此就会导致不同浏览器下给用户展示的页面效果不一样，碰到这样的情况就需要开发人员通过针对不同的浏览器对应写出不同的CSS代码，从而达到兼容不同浏览器的目的，不会让页面因为浏览器的不同而产生有差异的显示，这种技术有个专门的名称就是CSS Hack。 在中国，这种差异主要是体现在主流浏览器上，我们只要解决了主流浏览器之间的CSS差异就可以了。目前流行的主流浏览器有Internet Explorer,Google Chrome,... 阅读全文
  posted @ 2013-08-31 11:20 HackerVirus 阅读(188) 评论(0) 推荐(0)
• CSS hack
  摘要：CSS hack之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。什么是CSS hack由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。CSS 内部hack正经的CSS是这么写的 T... 阅读全文
  posted @ 2013-08-31 10:29 HackerVirus 阅读(156) 评论(0) 推荐(0)
• css实现两端对齐的3种方法
  摘要：【原】css实现两端对齐的3种方法说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-align:justify，这是今天要讲的其中一种方式，另外还有两种更精彩的实现方式，请往下看~下图是需要实现的demo，取了宽度分别为320px、480px、640px下的截图，也就 阅读全文
  posted @ 2013-08-30 16:12 HackerVirus 阅读(411) 评论(0) 推荐(0)
• 可拖动的DIV
  摘要：可拖动的DIV在做WEB UI设计的时候，拖动某个HTML元素已经成为一种不能忽视的用户界面模式，比较典型的应用例子就是Dialog，一个元素是怎么实现拖动的呢？其实原理非常简单，要想实现首先得了解几个基本知识。Tips绝对定位：只有把元素的position属性设置为absolute并且或者fixed才可以实现拖动，默认情况下元素会按文档流中的位置自行决定其出现在页面上的位置，是不能移动的，而绝对定位的元素可以使元素脱离文档流，相对于其定位的父元素或者屏幕定位，可以利用这点儿，通过改变元素与已定位父元素的位移来实现元素拖动。关于定位知识具体可以看看CSS布局 ——从display，positi 阅读全文
  posted @ 2013-08-30 09:42 HackerVirus 阅读(207) 评论(0) 推荐(0)

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3