用css做网页布局时,难免跟html标签打交道,要想保证代码的精简性,了解各种标签的默认属性,更有利于我们作出合理的布局样式,现在来简单说明一些常见html标签的默认样式。
①首先是body(因为head标签不在文档中显示,因此我们不做考虑):
body {
display: block;
margin: 8px;
}
这也解释了一般情况下,我们设置的元素与浏览器上、左都有默认距离的问题,由上可以看出,是因为body有默认8px的margin值,其实有很多标签都会有默认的margin值,在布局时尤其要注意他们带来的影响。
②p标签,这是个常用的标签,我们都知道它有上下默认间距,原因是:
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
③ul、ol 和 li标签,之所以放在一块说明,是因为ul和ol标签使用起来区别不大,而li标签作为子标签,是紧跟ul和ol标签作嵌套使用的(提示:li标签即使单独使用能达到效果没什么毛病也不建议单独使用,务必使用组合嵌套形式):
ul {
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;
}
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
从它们的默认样式很容易看出来它们具有的属性,其中ul和ol标签默认样式差别不大
ul:list-style-type: disc;
ol:list-style-type: decimal;
这就说明很大程度上它们可以互换而不影响布局,list-style-type属性还有很多属性值,可以自己修改查看。
④strong和b标签、 em和i标签、 big和small标签,它们都是字体单一样式的设置标签,inline标签:
strong, b {
font-weight: bold;
}
i, em {
font-style: italic;
}
big {
font-size: larger;
}
small {
font-size: smaller;
}
b标签和i标签现已被淘汰,换成语义更清晰的strong标签和em标签。
⑤input标签,比较常用,比较重要,所以它的默认样式也比别的标签多:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 11px system-ui;
}
input {
-webkit-writing-mode: horizontal-tb;
}
没编辑在一起的原因是,后两个属性集是和别的标签一块设置的,以此区分记忆便于以后整理综合。其实对于input标签我们只须了解一些基本常常会改动的属性即可。
⑥h1 -- h6 标签:
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h3 {
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h4 {
display: block;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h5 {
display: block;
font-size: 0.83em;
-webkit-margin-before: 1.67em;
-webkit-margin-after: 1.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h6 {
display: block;
font-size: 0.67em;
-webkit-margin-before: 2.33em;
-webkit-margin-after: 2.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
可以看出标题标签只在字体大小和前后间距上有差距,不作过多说明,我们平时常用到的只有前三个。
⑦div、span标签的默认样式很简单,我们需要考虑的就只有display属性,inline属性我觉得更像是默认属性中得默认属性,因此span标签不作说明:
div {
display: block;
}
结语:其实还有许多常用标签,此刻就不多总结,感兴趣的可以通过浏览器或者上网搜索标签默认属性,希望这些对你会有所帮助!