【html+css】关于页面布局中遇到的问题记录
阅读原文时间:2024年06月12日阅读:1

关于行内元素:

行内元素设置width无效,

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

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

text-align:center的测试:

.text-align{text-align:center;}

jdif

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

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;均可正常显示。

关于表格的布局:

  • …… ……

.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;}

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

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章