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

Posted 2021-11-26 combating

    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" ><img src="img/2.jpg" >  可以在页面中把它们的空格删掉。但开发时没有这么写习惯。也可以设置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;

}