首页 > 代码库 > 【html+css】关于页面布局中遇到的问题记录

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

2024-08-25 05:21:42   219人阅读

关于行内元素：

行内元素设置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="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;}

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

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


联系
我们