随笔分类 -  CSS

style，currentStyle，getComputedStyle的区别和用法
摘要：先说说层叠样式表的三种形式(三种的叫法不一，按照各自的习惯)： 一。内联样式：在HTML标签用style属性设置。如： 1 <p >这是内联样式</p> 二。嵌入样式：通过<head>标签内通过<style>标签设置。如： 三。外部样式：通过<link>标签设置。如： 推荐使用第三种方式。 下面该三 阅读全文
posted @ 2016-04-05 09:50 爱好和平的阿道夫 阅读(659) 评论(0) 推荐(0)
各种居中方式小记
摘要：1.单行内容的居中.middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;}2.父元素未设置高度，内容居中.middle-demo-2{padding-top: 24px;padding-bottom: 24px;}3.子元素有固定高... 阅读全文
posted @ 2015-11-08 20:24 爱好和平的阿道夫 阅读(176) 评论(0) 推荐(0)
如何让 height:100%; 起作用
摘要：当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距... 阅读全文
posted @ 2015-05-01 21:54 爱好和平的阿道夫 阅读(371) 评论(0) 推荐(0)
详解CSS中clear属性both、left、right值的含义
摘要：前几天一朋友在群里问clear:left的意思，我以为是简单的清除浮动问题，就让他百度“清除浮动”，导致中间有点小误会。后来我按照他写的DEMO，发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册，和写了几个DEMO，经过群里其他人指导，总结如下，希望对其他人能有点帮助。 clear的值有四个 none：允许两边都可以有浮动对象； both：... 阅读全文
posted @ 2014-12-29 23:31 爱好和平的阿道夫 阅读(1672) 评论(0) 推荐(0)
CSS文档流
摘要：文档流 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。 内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 浮动元素不占任何正常文档流空... 阅读全文
posted @ 2014-12-29 23:19 爱好和平的阿道夫 阅读(215) 评论(0) 推荐(0)
CSS实现垂直居中的5种方法
摘要：利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解... 阅读全文
posted @ 2014-12-29 22:28 爱好和平的阿道夫 阅读(626) 评论(0) 推荐(0)
CSS浮动属性Float介绍
摘要：什么是CSS Float? float 是 css 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视... 阅读全文
posted @ 2014-11-26 15:07 爱好和平的阿道夫 阅读(410) 评论(0) 推荐(0)
css定位之z-index问题分析
摘要：新手先去看看 CSS z-index 属性 CSS z-index 属性的使用方法和层级树的概念 -------------------------------------------------------------------------------------------------- 关于z-index，目前遇到的一些问题 某些浏览器下元素层级遮盖存在bug; ... 阅读全文
posted @ 2014-11-23 16:20 爱好和平的阿道夫 阅读(314) 评论(0) 推荐(0)
height:100%和height:auto的区别
摘要：一直不明白height:100%和height:auto的区别，最近在制作前端页面时都用了height:100%;overflow:hidden; ，可是有些浏览器出现莫名的奇妙的问题，但换成height:auto就好了，百度过这个问题，却一直没有细看。 今天又浮现了同样的问题，百度细看和群里的朋友指点，终于明白其中的道理，记录一下。 height:auto，是指根据块内内容自动调节高度。 ... 阅读全文
posted @ 2014-11-13 14:37 爱好和平的阿道夫 阅读(229) 评论(0) 推荐(0)
CSS 使用推荐
摘要：中文字体css编码转换 微软雅黑 \5FAE\8F6F\96C5\9ED1 或 Microsoft YaHei 黑体 \9ED1\4F53 新宋体 \65b0\5b8b\4f53 宋体 \5b8b\4f53 使用示例： body,th,td,button,input,select,textarea{font-family:\5F... 阅读全文
posted @ 2014-11-06 23:01 爱好和平的阿道夫 阅读(390) 评论(0) 推荐(0)
CSS hack 汇总
摘要：1, IE条件注释法，微软官方推荐的hack方式。 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 只在IE下生效 这段文字只在IE浏览器上显示 只在IE6下生效 这段文字只在IE6浏览器上显示 只在IE6以上版本生效 这段文字只在IE6以上版本IE浏览器上显示 只在IE7上不生效 这段文... 阅读全文
posted @ 2014-10-30 16:47 爱好和平的阿道夫 阅读(231) 评论(0) 推荐(0)
更简洁的 CSS 清理浮动方式
摘要：清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？本文介绍了一种相当简洁的清理浮动的方式，一起来看。 阅读全文
posted @ 2014-10-28 16:56 爱好和平的阿道夫 阅读(173) 评论(0) 推荐(0)