html+css整理

tab:&emsp 空格:&nbsp
文本格式化:
1.上标和小标,<sup>和<sub>,如m³  m<sup>3</sup>
 
大屏展现,网页自动缩放
transform:scale(0.46875, 0.703125);
transform-origin :left top 0px
 
 
布局:
建立高级的布局很是耗时间,去网上寻找网站模板,并优化它是最好的办法。
利用float布局,利用有意义的元素进行清理。
子元素要使用绝对定位时,父元素要使用相对定位。才能相对于父元素进行绝对定位。
 
css:
1.背景图片可设置不随滚动条滚动,background-attachment:fixed
2.文本空白处理 white-space
4.外边距合并
指的是,当两个垂直外边距相遇时,它们将造成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
5.特殊的css选择器,伪类伪元素,到w3cschool去查。
 
6.除非已经声明了 !DOCTYPE,不然使用 margin:auto 在 IE8 以及更早的版本中是无效的。
居中:margin:auto,text-align:center
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
7.用backgroud来设置全部背景属性(不用backgroudcolor,image)
8.若是图片是页面的内容则用img,不然用background·
 
 
一次申明:
背景图     background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
列表样式 list-style: square inside url('/i/eg_arrow.gif')
字体     font:italic bold 12px/30px arial,sans-serif;
边框     border:1px solid #98bf21;
轮廓     outline:#00ff00 dotted thick;
css3边框图片
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
 

浏览器兼容性

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现倒是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用本身的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。可是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具备指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
 
当像这样对齐元素时,对 <body> 元素的外边距和内边距进行预约义是一个好主意。这样能够避免在不一样的浏览器中出现可见的差别。
当使用 position 属性时,IE8 以及更早的版本存在一个问题。若是容器元素(在咱们的案例中是 <div class="container">)设置了指定的宽度,而且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增长 17px 的外边距。这彷佛是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明:
相关文章
相关标签/搜索