随笔分类 -  css

1 2 3 下一页
CSS隐藏元素 display visibility opacity的区别
摘要：{ display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } { position: relative 阅读全文
posted @ 2016-05-19 16:44 AutismTune 阅读(336) 评论(0) 推荐(0)
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
摘要：说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有 valign特性的元素才 阅读全文
posted @ 2016-05-16 17:33 AutismTune 阅读(554) 评论(0) 推荐(0)
浅谈块元素绝对定位的margin属性
摘要：对于div的绝对定位一直以为margin属性是无效的，只是通过top，left，bottom，right定位，然而今天的却发现不是这样的，于是对其做了些实验： 使用的HTML原始测试文件： Html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra 阅读全文
posted @ 2016-04-22 09:57 AutismTune 阅读(2353) 评论(0) 推荐(0)
css中的hack
摘要：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，比如.kwstu{width:300px;_width:200px;}，一般浏 览器会先给元素使用 阅读全文
posted @ 2016-03-24 19:28 AutismTune 阅读(213) 评论(0) 推荐(0)
深入理解选择器权重
摘要：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符” 那 么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的css图书中采 用了10进制的简单相加计算方式 阅读全文
posted @ 2016-03-24 19:23 AutismTune 阅读(808) 评论(0) 推荐(1)
FOUC
摘要：如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.原因大致为： 1，使用import 阅读全文
posted @ 2016-03-24 19:20 AutismTune 阅读(254) 评论(0) 推荐(0)
CSS框模型：一切皆为框 — 从行框说起
摘要：css 行框 各部分详解 上图代表了框模型中的行框。line-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为 阅读全文
posted @ 2016-03-18 18:57 AutismTune 阅读(3434) 评论(1) 推荐(1)
block，inline和inline-block概念和区别
摘要：总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一 阅读全文
posted @ 2016-03-18 13:47 AutismTune 阅读(178) 评论(0) 推荐(0)
负值之美：负margin在页面布局中的应用
摘要：一、左右列固定，中间列自适应布局 此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。 HTML： <div class="main"> <div class="main_body">Main</div> </div 阅读全文
posted @ 2016-03-10 14:13 AutismTune 阅读(297) 评论(0) 推荐(0)
负margin
摘要：自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。（It’s like an online taboo 阅读全文
posted @ 2016-03-10 13:51 AutismTune 阅读(175) 评论(0) 推荐(0)
由浅入深漫谈margin属性
摘要：margin 在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。 一、margin的基本特性 margin 属性包括 margin-top, margin-right, margin-bottom, margin-left, margin，可以用 阅读全文
posted @ 2016-03-10 09:25 AutismTune 阅读(225) 评论(0) 推荐(0)
双飞翼布局和圣杯布局的对比
摘要：在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？ 在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。 DOM结构：main内层增加了一个 阅读全文
posted @ 2016-03-06 21:20 AutismTune 阅读(195) 评论(0) 推荐(0)
圣杯布局的实现过程
摘要：圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇文章会讲到。 圣杯布局：用到浮动、负边距、相对定位，不添加额外标签 DOM结构： <div class="header">Header< 阅读全文
posted @ 2016-03-06 21:19 AutismTune 阅读(419) 评论(0) 推荐(0)
CSS实现垂直居中的5种方法
摘要：利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短 阅读全文
posted @ 2016-03-06 20:18 AutismTune 阅读(213) 评论(0) 推荐(0)
CSS制作水平垂直居中对齐 多种方式各有千秋
摘要：作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收 集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对 于我这样 阅读全文
posted @ 2016-03-04 21:40 AutismTune 阅读(486) 评论(0) 推荐(0)
CSS清浮动处理（Clear与BFC）
摘要：在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <tit 阅读全文
posted @ 2016-03-04 10:28 AutismTune 阅读(236) 评论(0) 推荐(0)
IE的haslayout
摘要：haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元 素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性 阅读全文
posted @ 2016-03-04 09:53 AutismTune 阅读(164) 评论(0) 推荐(0)
伪类与伪元素
摘要：伪类： 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化 的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它 是基于文档 阅读全文
posted @ 2016-03-04 09:34 AutismTune 阅读(196) 评论(0) 推荐(0)
CSS外边距margin上下元素重叠
摘要：两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。但是边界的重叠也有例外情况： 1、水平边距永远不会重合。 阅读全文
posted @ 2016-03-02 09:58 AutismTune 阅读(4531) 评论(0) 推荐(0)
CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
摘要：建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑，要用logo图片来代替h1，这时需要隐藏h1内的这段文字，但又不能对搜索引擎不友好，否则就失去了定义h1标签的意义。 在CSS中如何以图代字，找了一下CSS隐藏文字的方法，有以下几条： 1、display:none; 这个大家普遍说法是，搜索引 阅读全文
posted @ 2016-02-28 11:25 AutismTune 阅读(8346) 评论(0) 推荐(1)

1 2 3 下一页