css Reset

最新推荐文章于 2022-08-03 00:35:55 发布

转载最新推荐文章于 2022-08-03 00:35:55 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nieying/p/5611678.html

本文介绍CSS Reset的重要性及其实现方式，探讨了不同元素的样式初始化方法，并提供了实用的代码示例。此外，还讨论了一些CSS布局技巧，如table-cell单元格、flex布局的使用场景及其对性能的影响。

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

CSS Reset
reset link引入或者内联reset都必须写在第一位

table 块状
table-cell 单元格

flex 只做小范围的布局否则会影响性能

table-layout：fixed 布局优先 table布局下默认等分

1.最耗资源的，最简单的

* { padding: 0; margin: 0; border: 0; }

2.选择性初始化举例（综合）

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button
form,fieldset,input,textarea,p,blockquote,th,td {   
　　padding: 0;   
　　margin: 0;   
}
/* 酌情修改 */
body {
    background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";
}

/* 短引用的内容可取值：''或"" */
q:before,q:after {content:”;}  

/* 缩写，图片等无边框 */
fieldset,img,abbr,acronym {border: 0 none;}
abbr,acronym {font-variant: normal;}
legend {color:#000;}

/* 清除特殊标记的字体和字号 */
address,caption,cite,code,dfn,em,strong,th,var {   
　　font-weight: normal;   
　　font-style: normal;   
}

/* 上下标 */
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}

/* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/
table {   
　　border-collapse: collapse;   
　　border-spacing: 0;   
}   

/* 表格标题及内容居左显示 */
caption,th {text-align: left;}
input,img,select {vertical-align:middle;}

/* 清除列表样式 */
ol,ul {list-style: none;}  

/* 输入控件字体 */
input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
}

/* 标题元素样式清除 */ 
h1,h2,h3,h4,h5,h6 {   
　　font-weight: normal;   
　　font-size: 100%;   
}   

/* 链接样式，颜色可酌情修改 */
del,ins,a {text-decoration:none;}
a:link {color:#009;}
a:visited {color:#800080;}
a:hover,a:active,a:focus {color:#c00; text-decoration:underline;} 

/* 鼠标样式 */
input[type="submit"] {cursor: pointer;}
button {cursor: pointer;}
input::-moz-focus-inner { border: 0; padding: 0;}

.clear {clear:both;}

转载于:https://www.cnblogs.com/nieying/p/5611678.html