-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0px;-webkit-margin-end:0px;

本文对比了CSS3中使用-webkit-margin属性设置段落边距的方法与CSS2中margin属性的区别。详细解释了如何通过这两种方式来定义段落的上下左右边距。

display:block;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;


这是CSS3.0的对于文章段P容器的定义方法语句!

display:block;这个样式,只定义了P容器为一个块;

后面四句是CSS3.0中的样式定义方法;


-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

分别定义P的上边距和下边距的数值是1倍字体的高度,如16px的字,那么边距就为10px;


-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

这两句则定义P的左右边距都为0px;


P{

display:block;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

}

相当于CSS2.0中的

P{

display:block;

margin-top:1em;

margin-bottom:1em;

margin-right:0px;

margin-left:0px;

}


旁边显示来源是:user agent stylesheet

检查了html以及css后,发现并无特别设置,百度之后发现是浏览器针对不同html元素,会有相应的css默认设置。

解决办法:

1.比较简单的一种办法:在css文件开头设置通配符样式,比如:{margin:0;padding:0;},覆盖掉浏览器的默认设置;

2.复杂一点的方法:了解通用的几种浏览器的默认设置,再单独写一个css文件,将需要修正的样式都写在里面,以后做项目时可以共用。



/*! * weui.js v1.1.0 (https://github.com/weui/weui-wxss) * Copyright 2016, wechat ui team * MIT license */ page { line-height: 1.6; font-family: -apple-system-font, "Helvetica Neue", sans-serif; } icon { vertical-align: middle; } .weui-cells { position: relative; margin-top: 1.17647059em; background-color: #FFFFFF; line-height: 1.41176471; font-size: 17px; } .weui-cells:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells:after { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; border-bottom: 1rpx solid #D9D9D9; color: #D9D9D9; } .weui-cells__title { margin-top: .77em; margin-bottom: .3em; padding-left: 15px; padding-right: 15px; color: #999999; font-size: 14px; } .weui-cells_after-title { margin-top: 0; } .weui-cells__tips { margin-top: .3em; color: #999999; padding-left: 15px; padding-right: 15px; font-size: 14px; } .weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-cell:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1rpx solid #D9D9D9; color: #D9D9D9; left: 15px; } .weui-cell:first-child:before { display: none; } .weui-cell_active { background-color: #ECECEC; } .weui-cell_primary { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .weui-cell__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .weui-cell__ft { text-align: right; color: #999999; } .weui-cell_access { color: inherit; } .weui-cell__ft_in-access { padding-right: 13px; position: relative; } .weui-cell__ft_in-access:after { content: " "; display: inline-block; height: 6px; width: 6px; bord
03-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值