码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-12-04 20:28:26      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:font   top   image   清除   htm   内联   class   check   浮动   

关于行内元素:

行内元素设置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】关于页面布局中遇到的问题记录

标签:font   top   image   清除   htm   内联   class   check   浮动   

原文地址:http://www.cnblogs.com/fry-img/p/6131425.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!