html与css的进阶：继承性，选择器权重，css reset，布局技巧

2024-02-06 23:18:46

这篇文章主要是关于HTML与css特点介绍

1.子元素继承父元素的样式
 2.选择器的权重
 3.css reset
4.border进阶
 5.布局技巧

子元素继承父元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="first">
        <div class="second">a</div>//字体样式继承了父元素的
    </div>
</body>
</html>
<style>
    .first{
        color: red;
        font-size: 20px;
    }
</style>

选择器的权重

选择器	权重
通配符：*	0
伪元素： ::before	1
元素选择器：p	1
class选择器 : .class	10
伪类：:first-child	10
属性选择器：[需要选择的属性名]	10
id选择器：#id	100
行内样式：直接写在元素身上	1000

要是想硬是改变元素的样式，可以添加 :样式 !important

css reset

每个元素都会有一些默认样式，那如何去除这些默认样式

*{
padding:0;
margin:0
}
//这种方法去除了padding和margin的默认样式，显然不太好

可以使用Eric Meyer发布的重置样式表，它可以去除常见的HTML元素的默认样式，也是国内外最流行的重置样式表

border进阶：

border：none：浏览器解析时不会对它进行渲染

border:0:将border定义为0像素，浏览器解析时会对它进行渲染

布局技巧

外边距叠加

下边距和上边距重叠了

外边距叠加的情况

同级元素
当一个元素出现在另一个元素的上面，下边距和上边距就会重叠，如上图所示
父子元素
一样也会发生重叠，两个上边距发生重叠
外边距叠加的用处
负margin技术

margin: 0 3px -3px 0;底部对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="../html/病毒.png" alt="">病毒
    </div>
</body>
</html>
<style>
    img{
        margin: 0 3px -3px 0;
    }
</style>

一边是自动，一边固定

  <div style="width: 100px;height: 100px;background-color: saddlebrown; float: left;"></div>
        <div style="width: 100px;height: 100px;background-color: teal;"></div>

如下图所示，一边宽度100%,然后设置一个往后挤的margin_right,第二个设置宽度等于第一个div的margin_right

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
      <div  style="width: 100px;height: 100px;border: 1px solid red; position: relative;">
           <div id="r" style="width: 50px; height: 50px; background-color: red;"></div>
    </div>
     
    
</body>
</html>
<style>
    #r{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
margin-top: -25px;
    }
</style>

垂直居中：父元素relative，子元素absolute， top: 50%;left: 50%;margin-left:-25px; margin-top: -25px;
下面解释参数的设置

码农公寓

布局技巧

相关文章