CSS浏览器样式重置最终版
时间：2023-03-30 22:13:32
CSS
前言有些浏览器的默认样式有时真的很难看；虽然有现成的UI框架，但是有时候写一个小东西，并不想用那么庞大的UI框架。本文介绍了如何解决一些样式问题，最后会给出一个完整的重置样式表；如果遇到其他样式问题，请在评论区提出建议，我会持续更新样式问题解决浏览器默认给body加上8px的边距，一般我写这个8px的边距会去掉body{margin:0;}并且想做一个全屏显示的页面，只有一页，但是发现设置div{height:100%;}无效，其实是整个html，body那么高，需要设置html和body的高度html，body{height:100%;}是另一种让窗口全屏的方法，使用定位来做。element{display:absolute;顶部：0；底部：0；左：0；右：0；}文本处理的几种样式说明（white-spaceword-breakoverflowtext-overflow）在写代码的时候，我们经常希望一个容器中的文本显示在一行中，除非有换行，那么我们可以这样玩这。element{white-space:nowrap;}常见的例子是overflowplusellipsis.ellipsis{white-space:nowrap;溢出：隐藏；text-overflow:ellipsis;}背景文字是换行符rn，但是前端是br换行符，这时候可以设置div的white-space.element{white-space:pre-wrap;}部分文本容器需要设置溢出滚动和文本截断div,li{overflow-x:auto;word-break:break-all;}浏览器元素大小计算问题，box-sizing有content-box|border-box|inherit三种方式，content-box表示设置内容的大小，border-box表示设置border和padding大小content-box会在添加innerpadding时扩展元素，border-box会在添加innerpadding时缩小内容区域的大小。我通常喜欢使用border-box*,*:之前，*：之后{box-sizing:border-box;-moz-box-sizing：边框框；/*Firefox*/-webkit-box-sizing:border-box;/*Safari*/}浮动问题，当内部元素浮动时，外部元素的高度会丢失。这时候可以设置下层外层元素来获取高度。浮动元素浮动元素无序列表和有序列表的列表样式；在大多数情况下，我们会使用有序列表作为导航菜单。这时候会有小点或者数字，可以把它去掉，需要的时候再设置回去，需要把ul,ol{margin:0;padding:并排的两个div做的按钮去掉0;}，当你设置display:inline-block时，会有一个空隙；原因是因为你加了回车或者空格导致的，解决方法是把这两个div包裹在另一个div中，并设置父元素div的font-size:0，最后设置的字体子元素恢复原值div1
div2 iframe5pixelproblemwheninsidea在div中设置一个iframe，并将iframe的宽高设置为100%（div的宽高是固定的），你会发现div有一个滚动条；查资料说是iframe编译出来的html代码中的两个head声明，5px造成的高度差会高于包裹的div，导致出现滚动条。解决办法是设置iframeblock在iframe{display:block;}textarea右下角显示倒三角形，有时候感觉很难看，其实它的初衷是让textarea改变大小；去掉的方法是设置不可调大小textarea{resize:none;}input,textarea,select选中的时候，有一个丑陋的外边框，这个看个人情况去掉textarea,input,select{outline:0;}a链接的默认样式，鼠标停留的样式，访问过的样式（记录的是访问过的href）不太好看，可以设置的比较漂亮；默认黑色，保持蓝色Colora{color:#333;text-decoration:none;}a:hover{color:#0080ff;}表格相关样式优化table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}如果默认字体不改，会丑body{font-family:arial;}html5元素块显示article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section{display:block;}修改默认占位符的颜色::-webkit-input-placeholder{color:#999;}::-moz-placeholder{color:#999;}::-moz-placeholder{color:#999;}:-ms-input-placeholder{color:#ccc;}修改滚动条样式，默认滚动条有点丑::-webkit-scrollbar{width:7px;高度：7px；background-color:#F5F5F5;}::-webkit-scrollbar-thumb{background-color:#999;}::-webkit-scrollbar-track{background-color:#F5F5F5;}使用前后快速清除浮动。clearfix:after{可见性：隐藏；显示：块；字体-尺寸：0；内容：””;明确：两者；height:0;}*html.clearfix{zoom:1;}/*IE6*/*:first-child+html.clearfix{zoom:1;}/*IE7*/一些常用的样式技巧在方形弹出框里up框，我想在右上角添加一个删除按钮，这里可以设置父元素的定位为相对定位，子元素为绝对定位，然后设置子元素的位置即可得到解决.parent{position:reletive;}.child{position:absolute;top:2px;right:2px;}文字垂直居中，可以设置行高与容器高度一致，使文字居中vertically.element{height:50px;line-height:50px;}使用CSS3变换使任何元素垂直居中。verticalcenter{position:relative;顶部：50%；-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}全样式文件body{margin:0;font-family:arial;}html,body{height:100%;}*,*:before,*:after{box-sizing:边框框；-moz-box-sizing：边框框；/*Firefox*/-webkit-box-sizing:border-box;/*Safari*/}div,li{overflow-x:auto;word-break:break-all;}ul,ol{list-style-type:none;保证金：0；填充：0;}iframe{display:block;}textarea{resize:none;}textarea,input,select{outline:0;}a{color:#333;text-decoration:none;}a:hover{color:#0080ff;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section{display:block;}::-webkit-input-placeholder{color:#999;}::-moz-placeholder{color:#999;}::-moz-placeholder{color:#999;}:-ms-input-placeholder{color:#ccc;}::-webkit-scrollbar{width:7px;高度：7px；背景颜色：#F5F5F5;}::-webkit-scrollbar-thumb{背景颜色：#999;}::-webkit-scrollbar-track{背景颜色：#F5F5F5;}.clearfix:after{可见性：隐藏;显示：块；字体大小：0；内容：””;明确：两者；height:0;}*html.clearfix{zoom:1;}/*IE6*/*:first-child+html.clearfix{zoom:1;}/*IE7*/
