CSS代码重置浏览器默认样式

最新推荐文章于 2022-12-02 15:30:30 发布

原创最新推荐文章于 2022-12-02 15:30:30 发布 · 458 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #reset #style

移动WEB 同时被 3 个专栏收录

7 篇文章

订阅专栏

CSS3

6 篇文章

订阅专栏

HTML5

4 篇文章

订阅专栏

本文提供了一段HTML和CSS代码示例，包括边界框模型、触摸交互控制、列表样式去除、内外边距清零以及针对不同屏幕宽度的自适应字体大小调整。此外，介绍了响应式设计原则，确保网页在多种设备上都能获得良好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家可根据自己的项目开发情况自行修改一下代码：

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

-webkit-touch-callout: none;

list-style: none;

margin: 0px;

padding: 0px;

}

html,body {

font-size: 20px;

height:100%;

font-family: sans-serif;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

@media only screen and (min-width: 320px) {

html {

font-size: 19px !important;

}

@media only screen and (min-width: 400px) {

html {

font-size: 21.33333333px !important;

}

@media only screen and (min-width: 414px) {

html {

font-size: 22.08px !important;

}

@media only screen and (min-width: 480px) {

html {

font-size: 25.6px !important;

}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

display: block;

}

audio,

canvas,

progress,

video {

display: inline-block;

vertical-align: baseline;

}

a {

background-color: transparent;

}

a:active,a:hover {

outline: 0;

}

abbr[title] {

border-bottom: 1px dotted;

}

img {

border: 0;

}

svg:not(:root) {

overflow: hidden;

}

figure {

margin: 1em 40px;

}

code,kbd,pre,samp {

font-family: monospace, monospace;

font-size: 1em;

}

button,

input,

optgroup,

select,

textarea {

font: inherit;

color: inherit;

outline: none;

}

button {

overflow: visible;

}

button,select {

text-transform: none;

}

button,

html input[type="button"],

input[type="reset"],

input[type="submit"] {

-webkit-appearance: button;

cursor: pointer;

}

button[disabled],

html input[disabled] {

cursor: default;

}

button::-moz-focus-inner,

input::-moz-focus-inner {

padding: 0;

border: 0;

}

input {

line-height: normal;

}

input[type="checkbox"],

input[type="radio"] {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 0;

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

height: auto;

}

input[type="search"] {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

-webkit-appearance: textfield;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

-webkit-appearance: none;

}

/* placeholder color custom */

::-moz-input-placeholder { line-height: 100%;}

::-webkit-input-placeholder { line-height: 100%; }

:-ms-input-placeholder { line-height: 100%;}

table {

border-spacing: 0;

border-collapse: collapse;

}