html 和css 中 遇到的问题

一、如何用一张图片做背景图,并且图片自适应div的大小

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

二、子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;搞定左右居中

  

猜你喜欢

转载自www.cnblogs.com/mqflive81/p/10140797.html