侧边栏壁纸
博主头像
@小佑前端_

学而不厌 不耻下问

  • 累计撰写 60 篇文章
  • 累计创建 80 个标签
  • 累计收到 11 条评论

css情况默认页面样式

@小佑前端_
2020-10-06 / 0 评论 / 0 点赞 / 235 阅读 / 2,687 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-02,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

090818212296438.png
对于上面的三层,咱们大概都比较熟悉了。下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的。而最有的说的就是浏览器的默认样式。

  不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情。虽然有些许差异,但是绝大部分还是相同的,具体的解读咱们慢慢道来。
以下是博主小佑自行编辑的Css默认清空样式的案例,大家可以自行粘贴使用。

@charset "utf-8";
/*!--小佑_CSS重置和样式初始化(参考Normalize.css) ~ v1.0--*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, button, input, textarea, th, td {
    margin: 0;
    padding: 0
}

body {
    font-size: 12px;
    font-style: normal;
    font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif
}

small {
    font-size: 12px
}

h1 {
    font-size: 18px
}

h2 {
    font-size: 16px
}

h3 {
    font-size: 14px
}

h4, h5, h6 {
    font-size: 100%
}

ul, ol {
    list-style: none
}

a {
    text-decoration: none;
    background-color: transparent
}

a:hover, a:active {
    outline-width: 0;
    text-decoration: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    border: 0;
    height: 1px
}

img {
    border-style: none
}

img:not([src]) {
    display: none
}

svg:not(:root) {
    overflow: hidden
}

html {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%
}

input, textarea, button, a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block
}

/*audio:not([controls]), video:not([controls]) {*/
    /*display: none;*/
    /*height: 0*/
/*}*/

progress {
    vertical-align: baseline
}

mark {
    background-color: #ff0;
    color: #000
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

button, input, select, textarea {
    font-size: 100%;
    outline: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

textarea {
    overflow: auto
}

button, html [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

.clearfix:after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    overflow:hidden;
    visibility:hidden;
    font-size:0;
}
.clearfix{
    *zoom:1
}
0

评论区