企业开发经验之盒子模型和层模型

    1.如何让单行文本垂直居中?height和line-height的值相同,文本就会居中,
首行缩进:text-indent: 2em;  代表首行缩进2个字的空格  1em=1* 16px。
文字的行高是1.2倍宽高:line-height:1.2em。
    2.图片是行内块元素,只要是inline属性都具有文本特性,不愿染是与非  怎料事与愿违。只要在HTML中写里两句,它们之间都会有空格。因此图片它们也会产生空格,像下图那样。
怎么解决以上问题,
<img src="img/1.jpg" alt=""><img src="img/2.jpg" alt="">  可以在页面中把它们的空格删掉。但开发时没有这么写习惯。也可以设置margin-left: -6px; ,使它们往左靠拢。当使用负的像素时,在压缩代码时会出现点问题,这时可以根据情况改margin-left的值。
  3.框架开发性固定语法:先定义功能后选配功能。当要写几个差不多样式的div。可以使用下面的开发方法
.size1{
width: 100px;
height: 100px;
}
.size2{
width: 200px;
height: 200px;
}
.green{
background: green;
}
.red{
background: red;
}

 <div class="green size1"></div>

<div class="red size2"></div>
  4.初始化标签
      写网页时需要用到多个ul和li,但不需要它们自定义的样式。这时可以在最上面写属性。如下

 ul li{

    list-style: none;
}
可以把页面中所有的ul li的样式去掉。当需要它们的样式时,再使用层级选择器写。
   5.当里面嵌套一层div时。里面的内容想要设置居中。
<div class="box">
  <div class="pox"></div>
</div>
 
.box{
  width: 100px;
  height: 100px;
  background: gold;
}
.pox{
  width: 100px;
  height: 100px;
  background: fuchsia;
}
 
 
 
 
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/combating/p/10804194.html