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设置margin-top使得父div也跟着向下移动

这个问题发生的原因是根据规范，一个盒子如果没有上补白(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:center;，里面的div为啥还是不居中

display:block;元素 用属性margin: 0 auto;搞定左右居中

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

四、font-weight参数：

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+　特粗体
lighter : IE5+　细体
number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
详细基础加粗知识请进CSS手册中的font-weight手册。

Html常规加粗标签
以前html直接对对象加粗的标签如下：
<b></b>或<strong></strong>两者效果相同。

12个HTML和CSS必须知道的重点难点问题链接地址：https://blog.csdn.net/zhuoganliwanjin/article/details/80366287