DoubleLi

qq: 517712484 wx: ldbgliet

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  4737 随笔 :: 2 文章 :: 541 评论 :: 1614万 阅读
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

随笔分类 -  Css

摘要:important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 阅读全文
posted @ 2012-07-30 10:32 DoubleLi 阅读(247) 评论(0) 推荐(1) 编辑

摘要:(scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。)这是一个很复杂的问题,让我们想像一下:document.documentElement.scrollWidthdocument.documentElement.offsetWidthdocument.documentElement.clientWidthdocument.body.scrollWidthdocument.body.offsetWidthdocument.body.clientWidth有 6 个属性要测,这 6 个属性要放在4 种情况中:没有指定 DOCTYPE,网页内容没有超 阅读全文
posted @ 2012-04-27 10:18 DoubleLi 阅读(7976) 评论(0) 推荐(1) 编辑

摘要:假设 obj 为某个 HTML 控件。offsetTop、offsetLeftobj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。具体算法请参见 offsetTop、offsetLeft 算法。obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。offsetWidth、offsetHeightobj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。 阅读全文
posted @ 2012-04-27 10:05 DoubleLi 阅读(567) 评论(0) 推荐(0) 编辑

摘要:假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。我 阅读全文
posted @ 2012-04-27 10:04 DoubleLi 阅读(296) 评论(0) 推荐(0) 编辑

摘要:如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算, 还用offsetLeft比较方便。 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。 3. style.left的值需要事先定义,否则取到的值为空。而且必须要定义在html里,我做过试验,如果 阅读全文
posted @ 2012-04-27 09:54 DoubleLi 阅读(954) 评论(0) 推荐(0) 编辑

摘要:上面是一个网页,由于窗口大限的限制,没有完全显示出来,没有显示出来的,用阴影标注了。上阴影就是 scrollTop;上阴影 + 白的 + 下阴影就是 scrollHeight。scrollTop 是“卷”起来的高度值,示例:<div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p"> <div style="width:100px;height:300px;background-color:#FFFF00;&quo 阅读全文
posted @ 2012-04-27 09:40 DoubleLi 阅读(1045) 评论(0) 推荐(0) 编辑

摘要:点评:CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,简单点来说,前者是左浮动(往左侧向前边的非浮动元素飘,全是飘得元素的话,就按照流式来浮动从左到右,放不下则换行),后者是右浮(往右飘)动。但仅仅是如此吗?-No! 要注意以下几点: 1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以)。 2、 浮动元素后边的非浮动元素显示问题。 3、 多个浮动方向一致的元素使用流式排列,此时要注意浮动元素的高度。 4、子元素全为浮动元素的元素高度自适应问题。 以下详细分析四个问题。 一 阅读全文
posted @ 2012-04-26 10:32 DoubleLi 阅读(769) 评论(0) 推荐(0) 编辑

摘要:CSS 有关Position = absolute (绝对定位 是相对于谁而言)css中有绝对定位法,以前一直搞不懂绝对定位是相对于谁而言的绝对定位。现在搞清楚了,不是相对于父元素,也不是相对于BODY。而是相对于所属元素树中,相邻最近的那个显示标识了position属性的元素。比如<divid="a"style="position:relative"><divid="b"><divid="c"style="position:absolute"></di 阅读全文
posted @ 2012-03-30 10:38 DoubleLi 阅读(576) 评论(0) 推荐(0) 编辑

摘要:正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!其实,要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的,只需弄懂一个简单的问题就可以了,即100%的基数是谁,就是这个100%是相对于谁的width、height来说是100%?div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级d 阅读全文
posted @ 2012-03-13 17:38 DoubleLi 阅读(426) 评论(0) 推荐(0) 编辑

摘要:CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。position的四个属性值:relativeabsolutefixedstatic下面分别讲述这四个属性。<div id="parent"> <div id="sub1">sub 阅读全文
posted @ 2012-03-13 13:59 DoubleLi 阅读(193) 评论(0) 推荐(0) 编辑

摘要:一、 前言 盒子(一个块)是CSS布局中最基础的东西,如果你没完全搞清楚盒子是怎么回事,那么你在布局中将会很纠结,今天把它搞明白吧。文章中有误的地方,麻烦您指正。二、 什么是CSS盒子呢? 现在很多的书籍和教程都在说“DIV+CSS”,首先,我不太喜欢这个名字,原因很简单,难道写页面只用到DIV吗?为什么不说HTML+CSS呢,这样不是更好?所以,任何事情都不能走极端,(DIV用多了也不好)。好了,这里不再讨论这个名字有多么不好了,上面所说的DIV就是最典型的Box,让我们从最basic的东西开始讲起吧。 1. 盒子由哪些东西组成呢? 一个盒子由margin(外边距)、border(边框)、p 阅读全文
posted @ 2011-11-18 10:40 DoubleLi 阅读(2327) 评论(0) 推荐(0) 编辑

摘要:一、 前言:浮动和定位的原理一定要深刻掌握!(其实每个原理都要深刻掌握!)如果你只是知道有float与position这些属性和他们的值,但是不清楚他们的值到底是怎么回事,那么你在写CSS的时候将会非常的苦恼,由刚开始的热血沸腾的想让盒子飞变成了让自己飞!因为盒子已经不知道飞到哪里去了,时间长了之后就可能会到九宵云外,盒子也找不回来了,您也可能崩溃了……二、 浮动(Float)问题:我们先来说说浮动问题,浮动是为了定位(这里的定位不是position).1. 浮动对邻居有何影响?我们先来做一下准备工作下面是HTML中的内容:<div class="son son1"& 阅读全文
posted @ 2011-11-18 09:49 DoubleLi 阅读(5438) 评论(1) 推荐(0) 编辑

摘要:1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的:font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif但也可以把它们全部写到一行上去:font:bolditalicsmall-caps1em/1.5emverdana,sans-serif真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight,fon 阅读全文
posted @ 2011-10-09 13:19 DoubleLi 阅读(163) 评论(0) 推荐(0) 编辑

摘要:CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个i 阅读全文
posted @ 2011-10-09 13:18 DoubleLi 阅读(188) 评论(0) 推荐(0) 编辑

摘要:1.在CSS样式表中并不能直接对表格元素的border元素进行设定,那么要想实现像Excel表格样式的表格怎么办呢?只能对表格和单元格分别加边框来实现,具体的是:对表格显示上边框和左边框,而让每个单元格显示下边框和右边框,这样一组合起来就达到了<table border="1">中的border一样的效果,具体的代码如下:TABLE.showTable //设置表格边框 { border-top:rgb(0,128,192) 1px solid; border-left:rgb(0,128,192) 1px solid; }TABLE.showTable td 阅读全文
posted @ 2011-09-28 23:29 DoubleLi 阅读(2879) 评论(0) 推荐(0) 编辑

摘要:一、表格中单元格之间分隔线的隐藏方法 第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖线都没了这个表格去掉了单元格之间的纵向分隔线和横向分隔线 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和 阅读全文
posted @ 2011-09-28 23:27 DoubleLi 阅读(3515) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示