今天自己写css样式时,其中用到了<ul>标签,设置了一系列效果后运行,发现位置与设置有出入。chrome上打开检查项,发现<ul>标签的styles底部多了以下一段:

ul, menu, dir {

display: block;

list-style-type: disc;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 40px;

} 
旁边显示来源是:user agent stylesheet
 
检查了html及css后,发现并无特别设置,html头中也做了标准设定。百度了”user agent stylesheet“之后,发现是浏览器针对不同html元素,会有相应的css默认设置。
解决的方法:
1、比较简单的一种方法:在css文件开头设置通配符样式,比如*{margin:0px;padding:0px;},覆盖掉浏览器的默认设置;
2、复杂一点的方法:了解通用的几种浏览器的默认设置,再单独写一个css文件,将需要修正的样式都写在里面,以后做项目时可以共用。

CSS之浏览器默认样式设置的更多相关文章

  1. CSS系列——浏览器默认样式

    了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...

  2. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  3. css遇到的那些坑——浏览器默认样式设置

    今天自己写css样式,其中用到了<ul>标签,设置了一系列效果后运行,发现位置与设置有出入.chrome上打开检查项,发现<ul>标签的styles底部多了以下一段: ul,  ...

  4. CSS之浏览器默认样式问题

    今天自己写css样式时,其中用到了<ul>标签,设置了一系列效果后运行,发现位置与设置有出入.chrome上打开检查项,发现<ul>标签的styles底部多了以下一段: ul, ...

  5. reset.css(重置浏览器默认样式)

    @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1 ...

  6. css知多少(4)——解读浏览器默认样式

    上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大 ...

  7. css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存

    今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...

  8. css知多少(4)——解读浏览器默认样式(转)

    css知多少(4)——解读浏览器默认样式   上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面 ...

  9. CSS 浏览器默认样式

    不要再说div天生就是block——这句话应该换成:浏览器默认样式天生规定了div是block——所以才导致了div是block!是默认样式规定的,不是浏览器的内核规定的. 没有设置block的元素, ...

随机推荐

  1. Mapreduce TopK

      思想比较简单,就是每个通过map来获取当前的数据块中的的topk个数据,然后将他们以相同的key值放到reduce中,最后通过reduce来对这n*k个数据排序并获得topk个数据.具体的就是建立 ...

  2. [vue最新实战] gank客户端(vue2 + vue-router2 + vuex +webpace + es6)新手福利,干货多多

    vue-meizi 本项目是基于vue2最新实战项目,是适合新手进阶的绝佳教程.代码简单易懂,注释多多.实现了移动端使用最多的 无限滚动,图片加载,左右滑动,等待.先发布预览版本,后面更多更全的功能和 ...

  3. CentOS6.5安装python redis模块

    1.下载安装包https://pypi.python.org/packages/source/r/redis/redis-2.10.3.tar.gz 2.解压tar -zxf redis-2.10.3 ...

  4. MMA

    在32位的系统上,线性地址空间可达到4GB,这4GB一般按照3:1的比例进行分配,也就是说用户进程享有前3GB线性地址空间,而内核独享最后1GB线性地址空间.由于虚拟内存的引入,每个进程都可拥有3GB ...

  5. Motion-Based Multiple Object Tracking

    kalman filter tracking... %% Motion-Based Multiple Object Tracking % This example shows how to perfo ...

  6. ZOJ 1012 Mainframe

    题目大意:有一台主机,有m个cpu和n的内存,有l个任务,每个任务需消耗一定的cpu和内存,给出任务的开始时间和截止时间,完成任务可获得一定的金钱,同时提前完成有奖金,延后完成要扣钱.计算到某个时间所 ...

  7. iOS 沙盒

    1. 概念 某个应用程序的非代码文件存放空间. 2. 文件结构 每个沙盒有三个文件夹: Documents: 存放文件 Library: 存放默认设置或状态信息.Library/caches: 缓存文 ...

  8. PHP中file_exists与is_file、is_dir的区别,以及执行效率的比较

    判断文件是否存在,有2个常用的PHP函数:is_file 和 file_exists, 判断文件夹是否存在,有2个常用PHP函数:is_dir 和 file_exists, 即 file_exists ...

  9. Angularjs在线api文档

    http://docs.ngnice.com/api            文档 http://www.ngnice.com/showcase/#/home/home                  ...

  10. inline「一」:从 image 底部白边初识 line-height

    本文首发于个人博客 http://www.lijundong.com/image-and-line-height/ 今天在做一个静态页面时,图片底部出现一条 3px 高度的白边,既不是 margin ...