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

最新推荐文章于 2023-12-22 10:10:53 发布

坎坷的程序员

最新推荐文章于 2023-12-22 10:10:53 发布

阅读量148

点赞数 1

分类专栏：学历历程文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_49527298/article/details/120173790

版权

学历历程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇文章主要是关于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;
下面解释参数的设置

坎坷的程序员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html与css的进阶：继承性，选择器权重，css reset，布局技巧

这篇文章主要是关于HTML与css特点介绍子元素继承父元素的样式<!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, initi.
复制链接

扫一扫