css企业开发经验、习惯，盒子模型，层模型_absolute子盒子被外面的覆盖-CSDN博客

本文链接：https://blog.csdn.net/Nawkham/article/details/104995759

css企业开发经验、习惯，盒子模型，层模型

复习

<html>
<head>
    <meta charset="utf-8">
    <title>lesson5</title>
    <link rel="stylesheet" type="text/css" href="css/lesson5.css">
</head>
<body>
    <div></div>
    
</body>
</html>

div{
   
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-width: 10px;
    border-style: dotted;
    border-color: chartreuse;
    /* border是一个复合属性，后面的设置会覆盖前面的 */
}

用div标签画三角形

div{
   
    width: 0px;
    height: 0px;
    border: 100px solid black;
    border-left:100px solid hotpink;
    border-right:100px solid transparent;
    border-top:100px solid transparent;
    border-bottom:100px solid brown;
}

知识点总结

相对单位和绝对单位
伪类选择器
一般在开发中html只负责结构,css只负责样式。自带css代码的html标签时不能用的。

知识点详解

单位
- 绝对单位
- 相对单位
  - px: 像素。一个像素只能展示一个颜色。屏幕的分辨率: 每英寸所能容纳的垂直像素点数。
  - em: 1em = 1 font-size = 16px(默认)。font-size属性是可以修改的。

    <div>3月9日下午，省司法厅召开深化监所管理和队伍建设大整顿动员部署电视电话会议。，认真贯彻落实司法部开展深化监狱管理和队伍建设大整顿电视电话会议精神，并就我省监狱戒毒系统开展大整顿活动进行动员部署。厅党委书记、厅长刘志诚同志作动员讲话</div>

div{
   
    border: 1px solid black;
    /* 对齐方式: left, center, right */
    text-align: left;
    /* 容器的高度 */
    height: 200px;
    /* 单行文本所占的高度 */
    line-height: 20px;
    /* 单行文本垂直居中的方法: 单行文本高度 = 容器高度，不适用于多行文本*/
    /* 首行缩进 */
    /* 知识点1: 单位 */
    font-size: 20px;
    text-indent: 2em;
    /* 1.2倍行高 */
    line-height: 1.2em;
}

一般在开发中html只负责结构,css只负责样式。像del这样自带css代码的html标签时不能用的。

    <del>原价50元</del>
    <span>原价50元</span>

span{
   
    text-decoration: line-through;
}
del{
   
    text-decoration: none;
}

    <a href="www.baidu.com">www.baidu.com</a>
    <span>www.baidu.com</span>

将span修饰成仿a标签的样式

span{
   
    /* text-decoration: underline, overline, line-through */
    text-decoration: underline;
    color: rgb(0, 0, 238);
    /* 光标cursor: pointer, help, e-resize, w-resize, copy, move  */
    cursor: pointer;
}

伪类选择器

    <a href="http://www.baidu.com">www.baidu.com</a>

/* 伪类选择器 */
a:hover{
   
    background-color: salmon;
}
/* [href]:hover{
    background-color: skyblue;
} */

    <a href="http://www.baidu.com">www.baidu.com</a>
    <a href="http://www.taobao.com">www.taobao.com</a>
    <a href="http://www.jd.com">www.jd.com</a>

/* 标签选择器, 权重:1 */
a{
   
    text-decoration: none;
}
/* 伪类选择器，权重:10 */
a:hover{
   
    text-decoration: underline;
    background-color: salmon;
    color:#fff;
    font-size:16px;
    font-weight: bold;
    font-family: arial;
    border-radius: 10px;
}

因为行间样式style的权重是1000，而伪类选择器的权重是10，所以第一个a标签不管有没有鼠标悬停，都是没有下划线的。

    <!-- style 行间样式, 权重1000
    伪类选择器，权重:10  -->
    <a style="text-decoration: none;" href="http://www.baidu.com">www.baidu.com</a>
    <a href="http://www.taobao.com">www.taobao.com</a>
    <a href="http://www.jd.com">www.jd.com</a>

/* style 行间样式, 权重1000 */
/* 伪类选择器，权重:10 */
a:hover{
   
    text-decoration: underline;
    background-color: salmon;
    color:#fff;
    font-size