When you do not set any style for html elements, what is displayed on the browser (for example: element...) Why is this? Because the browser comes with a default style, when the html element is not styled, the browser will display it according to its default style. However, the browser default style is the lowest level. Once the style is set elsewhere, the browser default style will be overwritten. Note that the default styles of different browsers are different in some places. For example, when we write CSS, we will first set * {margin:0; padding:0;}. Why is this? It's because of browser compatibility issues. Simply, set them all to 0, so that all browsers will be unified. Below, we post the code for the default style: element's font size will be twice as large as the
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/li { display: list-item }/*默认以列表显示*/head { display: none }/*默认不显示*/table { display: table }/*默认为表格显示*/tr { display: table-row }/*默认为表格行显示*/thead { display: table-header-group }/*默认为表格头部分组显示*/tbody { display: table-row-group }/*默认为表格行分组显示*/tfoot { display: table-footer-group }/*默认为表格底部分组显示*/col { display: table-column }/*默认为表格列显示*/colgroup { display: table-column-group }/*默认为表格列分组显示*/td, th { display: table-cell; }/*默认为单元格显示*/caption { display: table-caption }/*默认为表格标题显示*/th { font-weight: bolder; text-align: center }/*默认为表格标题显示，呈现加粗居中状态*/caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/body { margin: 8px; line-height: 1.12 }h1 { font-size: 2em; margin: .67em 0 }h2 { font-size: 1.5em; margin: .75em 0 }h3 { font-size: 1.17em; margin: .83em 0 }h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }h5 { font-size: .83em; margin: 1.5em 0 }h6 { font-size: .75em; margin: 1.67em 0 }h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }blockquote { margin-left: 40px; margin-right: 40px }i, cite, em,var, address { font-style: italic }pre, tt, code, kbd, samp { font-family: monospace }pre { white-space: pre }button, textarea, input, object, select { display:inline-block; }big { font-size: 1.17em }small, sub, sup { font-size: .83em }sub { vertical-align: sub }/*定义sub元素默认为下标显示*/sup { vertical-align: super }/*定义sub元素默认为上标显示*/table { border-spacing: 2px; }thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/ol, ul, dir, menu, dd { margin-left: 40px }ol { list-style-type: decimal }ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }u, ins { text-decoration: underline }br:before { content: "A" }/*定义换行元素的伪对象内容样式*/:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/center { text-align: center }abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }:link, :visited { text-decoration: underline }:focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/@media print { /*定义标题和列表默认的打印样式*/ h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid }}
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/ Why by default, p, h1, ul, and div are all displayed in block, which is defined here . So, stop saying that divs are inherently block?? This sentence should be replaced by: The browser's default style stipulates that divs are block! Whether it is a block element or an inline element is determined by the default style, not by the browser's kernel.
Elements that are not set to block will default to inline elements.
li { display: list-item }/*默认以列表显示*/When we use display, the commonly used values are generally: inline/ block/inline-block, list-item is not used. So what exactly does the list-item here do? We might as well try it ourselves:
See, the effect in ul-li appears. If you add a margin-left, will it be the same as ul-li? ?
So, why does ul-li display like that by default? ??List-item is the "culprit".
table { display: table }/*默认为表格显示*/Give an example:
In the picture above, the first div is block by default, and its width fills the entire page. The second div has display:table set, and its width depends on the content. This is "encapsulation".
td, th { display: table-cell; }/*默认为单元格显示*/Remember that I just learned html Sometimes, I don’t know how to use div css for multi-column layout, so I use table for multi-column layout. Now, you can use table-cell to create a multi-column layout just like using a table, and the effect will be exactly the same as that produced by the table.
button, textarea, input, object, select { display:inline-block; } can be centered by the parent container, can set height, width and margin, no It will occupy a straight row like a table or div...?? This is inline-block. (For details, please see the performance of setting this style element.)