CSS样式：传承与清除，一文读懂父子继承关系

一、CSS样式的继承性

首先记住一个重点就是CSS样式能往下传给子元素。比如说，咱们在一个叫container的div里放了个p标签，还给它加了一堆样式。明白么？这就意味着，只要container下面有其他p标签，它们都会自动用到刚才设置的那套样式哟~就是这样滴~

再来聊聊怎么清除浏览器默认样式。

二、清除浏览器默认样式

小伙子，告诉你个事儿，你知道浏览器会在咱们的HTML里乱添装饰吗？像链接这种东西，它本来就是带下划线和蓝色字的，看起来挺不顺眼的。所以，咱们得留心那个浏览器，别让它乱给我们加上样式了。

1.清除所有HTML元素的默认样式

想要网页变得漂亮吗？来这句CSS代码！

css

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

    
这是段落文本


    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.container p {
    font-size:16px;
    color:#333;
    line-height:1.5;
}

看，这个代码是把所有边角、内部间距都调到零，同时字体大小设成百分比100%，就跟复制父元素的这些设置一样！

2.清除超链接下划线

兄弟，觉得超链接的下划线和蓝色底色太扎眼了？试试这个CSS代码！

a{

    text-decoration: none;

    color:#333;

没错儿！把text-decoration:none;放上，下划线立马消失；再加上color:#333;，文字颜色随便换，黑的白的随你挑哟。

3.清除列表项默认样式

听过 ul 和 ol ？就是那种带边框和特殊符号的列表项。要弄掉这些，只需这样做：

ul, ol {

    list-style: none;


对，只需要把list-style调成none，就能去掉ul和ol的默认编号了！

4.清除表单元素默认样式

表格真的有点难搞！里头那么多默认设置，内边距啦、边框啦都让人心烦意乱，加个外边框阴影更是乱上加乱。那就试试看咱下面这个简单的CSS操作呗：

输入框，文本区，选择栏和按钮，注意看。

    outline: none;

没错就是这样！给我们的 input、textarea、select 和 button 四个小天使们设成无边框、无填充、无粗细，搞定咯！这样一来就没人能够看到他们外层的线条和阴影了喔~

*{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}

5.清除图片链接边框

注意，有些图里的那个叫“border”的小东西，可能会让你的网页变丑。想去掉吗？赶紧在这找到它

img {

没错没错！border:0;就能让图片链接不再展示边框了。

6.清除浮动带来的影响

接着聊聊浮动这回事儿！有时候网页看起来乱糟糟的，所以咱们来研究下怎么搞定这个麻烦：

.clearfix::after {

    content:”;

    display: block;

    clear: both;

你听过那种叫做 clearfix 的神器？能解决父类盒子压着子漂浮元素移动的问题，让它们整整齐齐排好队列。

a{
    text-decoration:none;
    color:#333;
}

7.兼容性处理

记住，兼容性可不能小看。有些旧款浏览器对新特性和选择器可能不太接受。所以，得给它们加点“关心”代码，保证所有人都能顺利使用网页~

-webkit-/*属性名*/:;

-moz-/*属性名*/:;

-o-/*属性名*/:;

-ms-/*属性名*/:;

			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/vue2/2024/03/12407.html，转载请注明出处~~~