【html+css】关于页面布局中遇到的问题记录

关于行内元素：

行内元素设置width无效，

height无效(可以设置line-height)，

margin上下无效，padding上下无效，margin和padding可设置左右。

 

text-align:center的测试：

.text-align{text-align:center;}
<div class="text-align">
<p>jdif</p>
<img src="data:images/pic1.jpg">
</div>

经测试，在各浏览器中都可居中显示

 

text-align：center;与margin:0 auto;的区别

text-align是实现选择器内元素居中

margin选择器是作用对象

 

      使用margin：0 auto；来居中显示需要注意一点在于作用于块级元素

      因此图片标签img，类于内联对象，要先转为块级元素，display：block；

 

注意：text-align只作用于行内内容（除了ie的ie7及混杂模式）

           段落p是由于继承了父级text-align：center，并非自己居中显示了。

           需要设置display：inline-block；均可正常显示。

 

关于表格的布局：

<div class="bmy_table_main">
      <ul>
            <li>
                   <label>公司名称：</label>
                   <input type="text" name="company" class="js-check" err="公司名称">
             </li>
                        ……     ……
      </ul>
 </div>

.bmy_table_main ul{padding-top:202px;}
.bmy_table_main ul li{text-align:center;height:30px;line-height:30px;padding-bottom:16px;}
.bmy_table_main li label{display:inline-block;width:90px;color:#000;font-size:18px;text-align:right;font-family:"微软雅黑";}
.bmy_table_main li input{border:1px solid #919191;height:26px;padding:4px;width:400px;}

常见的浮动清除：

.clearfix:after { content:""; display: table; clear:both; visibility:hidden;}/*闭合浮动*/
.clearfix {*zoom:1;}

这个注意：要将清除浮动写在浮动的父级元素上面。