CSS样式与盒子模型详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43374578/article/details/125807551

一、元素显示模式

元素(标签)以什么方式进行显示，比如div自己占一行，一行放多个span

1. 块元素

独占一行
高度，宽度，外边距以及内边距可调
宽度默认是容器(父级宽度)的100%
是一个容器及盒子，里面可以放行内或块元素
文字类的元素内不能使用块级元素，比如p标签和h标签不能放其他块级元素

<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>

2. 行内元素/内联元素

相邻行内元素在一行上，一行可以显示多个
高，宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

<a>
<strong>  <b>
<em> <li>
<del>
<s> <ins>
<u>
<span>: 最典型的行内元素

3. 行内块元素

和相邻行内元素在一行上，但是会有空白缝隙，一行可以显示多个
默认宽度就是它本身内容的宽度
高度，行高，外边距以及内边距都可以控制

# 同事具有块元素和行内元素的特点
<img/>
<input/>
<td>

4. 显示模式的转换

特殊情况下，我们需要元素模式的转换：一个模式的元素需要另外一种模式的特性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            width: 200px;
            height: 50px;
            background-color: green;
            /*把行内元素a转换为块级元素*/
            display: block;
        }

        div {
            width: 200px;
            height: 50px;
            background-color: red;
            /*把块级元素转换为行内元素*/
            display: inline;

        }

        /*转换为行内块元素：  display: inline-block;*/
    </style>
</head>
<body>

<a href="#">Nike乔丹</a>

<div>我是块级元素</div>
</body>
</html>

5. 单行文字垂直居中

css没有提供文字垂直居中的代码
解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中 line-height

行高的上空隙和下空隙把文字挤到中间了
1. 如果行高小于盒子高度，文字会偏上
2. 如果行高大于盒子高度，文字会偏下

在这里插入图片描述

二、CSS属性

1. 背景图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 2000px;
            height: 2000px;

            /*1. 分开写法*/
            background-color: black; /*背景颜色：默认为透明：transparent*/
            background-image: url("1.png");/*背景图片： none｜url(---)*/
            background-repeat: no-repeat;  /*背景平铺, 默认平铺： no-repeat, repeat-x, repeat-y */
            /*图片位置： 1. 如果用方位名词
                          1.1 则前后顺序无关： background-position: right top
                          1.2 如果只写一个，则另外一个默认居中center
                       2. 如果用精确数字，则按照x y
                          2.1 按照x和y来进行精确单位顺序
                          2.2 如果只制定一个数值，则认为是x，另一个默认垂直居中
                       3. 混合单位： 第一个值是x，第二个是y
             */
            background-position: 50px 20px;

            /*背景固定： 背景图像是否固定或者随页面的其余部分滚动
              fixed, scroll */
            background-attachment: scroll;

            /*2. 复合写法： 顺序不影响*/
            /*background: black url("1.png"), no-repeat, fixed, 50px 20px;*/
        }
    </style>
</head>
<body>

<div>

</div>
</body>
</html>

2. CSS特性

2.1 层叠性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1. 层叠性
              1.1 就近原则覆盖
              1.2 只会覆盖重叠样式*/
        div {
            height: 50px;
            width: 50px;
            background-color: red;
        }

        div {
            background-color: black;
        }
    </style>
</head>
<body>

<div>

</div>

2.2 继承性

子标签会继承父标签样式
只是某些样式，比如文本颜色和字号， text- font- line- color属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1.5: 行高的一种继承方式*/
        body {
            font: 12px/1.5 "Microsoft YaHei UI";
        }

        /*子元素继承了父元素 body的行高1.5:  14px * 1.5 */
        div {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div>
    Hello
</div>
</body>

2.3 优先级

a. 基础选择器

同一个元素，指定了多个选择器，就会存在优先级的问题

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div {
            color: red !important;
        }

        .erick {
             color: aqua;
        }
    </style>
</head>
<body>

<div class="erick">
    Hello
</div>
</body>
</html>

在这里插入图片描述

b. 复合选择器 – 权重叠加

复合选择器，会将基本选择器的权重进行叠加

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            color: red;
        }

        /*复合选择器： 会对各个部分的基本选择器进行叠加，从而优先级更高
                    1. 叠加：可以叠加，但是不会进位*/
        ul li {
            color: green;
        }
    </style>
</head>
<body>

<ul>
    <li>nihao</li>
    <li>nihao</li>
</ul>
</body>
</html>

三、盒子模型

先准备好相关的网页元素，网页元素基本都是盒子box
利用css设置好盒子样式，然后摆放到相应位置
给盒子里面填充内容

# 盒子模型
- css盒子模型本质是一个盒子，封装周围的html元素
- 包括：边框，外边距，内边距，实际内容

1. 边框border

 div {
     width: 500px;
     height: 500px;

     /*复合写法：  border：1px solid red 没有顺序*/
     /*边框宽度*/
     border-width: 10px;
     /*边框样式: solid, */
     border-style: dashed;
     /*边框颜色：*/
     border-color: #ff6c37;

     /*可以单独为边框的某个方向进行设置*/
     border-top: 3px solid black;
 }

细线表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 500px;
            height: 250px;
        }

        table,

        td, th {
            border: 1px solid red;
            /*合并相邻边框*/
            border-collapse: collapse;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

<table>
    <thead>
    <tr>
        <th>name</th>
        <th>address</th>
        <th>age</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>lucy</td>
        <td>shanxi</td>
        <td>20</td>
    </tr>

    <tr>
        <td>jack</td>
        <td>shanghai</td>
        <td>40</td>
    </tr>

    </tbody>
</table>
</body>
</html>

边框会影响盒子的实际大小
测量时候，要注意实际盒子大小和边框大小

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            /*边框： 会增大盒子大小，实际为盒子大小加边框大小*/
            border: 200px green solid;
        }
    </style>
</head>

<body>

<div>
</div>

</body>

2. 内边距

盒子内容和盒子边的距离
内边距会影响盒子的大小，实际盒子的大小=盒子大小+内边距
一般为了保证做出来的效果图和样本一样，通过减小盒子的大小，加上内边距，加上外边框，从而等于效果图中的盒子大小

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            border: 20px green solid;

            /*盒子里面内容和盒子边框之间的距离： 可以设置四个方向不同的距离*/
            padding-left: 20px;
        }
    </style>
</head>

<body>

<div>
    你好
</div>

</body>