html 和css 效果–整理集合篇

一、如何使用图片作为背景图片，图片适应div大小

background: url("../stu_wengu.png") center center no-repeat;
background-size: cover;

/*实现在整个页面中的完全显示效果*/
body{
background-image:url("");
background-size:color;/*自适应*/
background-repeat:no-repeat;
background-attachment:fixed;
}

二、子div设置-top这样父div也下移

<pre class="brush:css;gutter:true;”>这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或
者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
解决方法： 
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 
2、为父元素添加overflow：hidden；样式即可（完美） 
3、为父元素或者子元素声明浮动（float：left；可用） 
4、为父元素添加border（border:1px solid transparent可用） 
5、为父元素或者子元素声明绝对定位

三、外层div已经设置了text-align:;，为什么内层div还没有居中

display:block;元素 用属性margin: 0 auto;搞定左右居中
display:inline-block;元素 用属性text-align: center;搞定左右居中

四、字体参数：

：普通字体。相当于 400。声明此值将取消之前的任何设置

粗体：粗体。相当于700。也相当于b对象的作用

：IE5+ 加粗

：IE5+瘦身

: IE5+100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

详细的加粗基础知识请参考CSS手册中的font-。

HTML 常规粗体标签

过去html直接加粗对象的标签如下：

或者两者都具有相同的效果。

12个HTML和CSS必知重点难题链接地址：