随笔分类 -  html/css

自适应布局
摘要:浮动一列绝对定位,一列用margin撑开空间margin负值:主体用一层包裹,浮动,内层用margin留出空间;其他列浮动,使用margin调整到空出的位置 1 3 4 5 6 7 layout 8 9 10 65 66 67 一列绝对定位,一列margin撑开距离68 69 left position:absolute70 main margin为左右两边宽度71 72 73 分别浮动 74 75 float:left76 ... 阅读全文

posted @ 2013-08-10 21:51 Iori_z 阅读(122) 评论(0) 推荐(0)

float和position
摘要:float元素被浮动后,浏览器实际上将它渲染到一个专门为float元素准备的plane中了。也就是说它从普通文档流中脱离了出来虽然已经从普通文档流中脱离出来了,但是它还任然会影响普通文档流中的其他元素的布局。这是因为其他元素要围绕着它,就像对一张图片浮动后,其他文字要围绕着它一样。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染移动后可以用margin定位,top/left无效会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素(默认以最小宽度高度显示),就算我们显示地设置display:inline或者display:block,也仍 阅读全文

posted @ 2013-08-08 23:17 Iori_z 阅读(172) 评论(0) 推荐(0)

关于margin和padding
摘要:取值百分数是相对于父元素的 width 计算的如果缺少左外边距的值,则使用右外边距的值;如果缺少下外边距的值,则使用上外边距的值。如果缺少右外边距的值,则使用上外边距的值。margin垂直外边距合并当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并一个盒子如果没有上补白(padding-top)和上边框(border-top), 阅读全文

posted @ 2013-08-07 10:41 Iori_z 阅读(168) 评论(0) 推荐(0)

居中对齐
摘要:已知宽度 margin:0 auto 1 // css 2 .warp{ 3 width:720px; 4 margin: 0 auto; 5 } 6 8 //html 9 10 center11 负的margin left:50%; margin:width/2 1 //css 2 .warp2{ 3 position: relative; 4 left:50%; 5 width:720px; 6 margin-left... 阅读全文

posted @ 2013-08-05 23:40 Iori_z 阅读(204) 评论(0) 推荐(0)

页面元素的一些距离
摘要:screen:1 screen.width //屏幕的宽度2 screen.availWidth //屏幕可用宽度(除去任务栏等)clientTop:获取 offsetTop 属性和客户区域的实际顶端之间的距离(实际就是元素对应的border属性的宽度), 不知道为啥在firefox下对body求clientTop为0.clientWidth:the width of the object including padding, but not including margin, border, or scroll bar.offsetTop:自身border外边缘相对于父元素或者浏... 阅读全文

posted @ 2013-08-03 15:48 Iori_z 阅读(363) 评论(0) 推荐(0)

导航