03-盒子模型与元素显示类型

最新推荐文章于 2024-08-14 09:51:23 发布

pijrix

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量142

点赞数

分类专栏：前端学习文章标签： css html 前端

本文链接：https://blog.csdn.net/pijrix/article/details/126901179

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

03-盒子模型与元素显示类型

继承性：子元素有默认继承父元素的样式特点，好处：减少我们写的代码。给元素添加了子元素就有了

如果元素有默认样式这个时候继承依然存在，但是优先显示默认的样式

层叠性：表示的是我们的样式可以一层层的叠加覆盖

<style>
    div{
        color: red;
        /* 假设说写了很多行 */
        color: green;
    }

    .box {
        font-size: 100px;
    }
</style>

<!-- 给同一个标签设置不同的样式：会共同的作用在这个标签上 -->
<!-- 在一个选择器中同时设置了相同的样式 写在后面的生效 -->
<div class="box">文字</div>

当我们通过不同的选择器，选中元素的时候，并且给他设置相同的样式。这个时候就会产生冲突，到底使用哪一个样式这个时候就是由优先级决定的

通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式

越是能精确找到标签的优先级就越高

复合选择器，权重叠加计算方法。判断优先级最高的生效

第一级：行内样式的个数

第二级：id选择器的个数

第三级：类选择器的个数

第四级：标签选择器的个数

比较规则：

先比较的是第一级的数字，如果比出来了，后面就都不用看了
如果第一个数字相同的话，去比较第二级别的数字，有大的后面就都不用看了

谷歌浏览器的调试工具

在style中看有没有自己写的选择器，

有
- 是不是有删除线
  - 有
    - 样式被覆盖了
  - 是否有三角形
    - css中有中文输入法
    - 属性名或者单词写错了
没有：一般是选择器写错了
- 选择器的单词写错了
- 选择器的结构写错了

emmet语法：帮我们快速生成HTML语法

.box 帮我们生成一个div标签 class名叫box
标签名 + .类名/#id名、
标签名 * 数字

1. 盒子模型

css当中可以把页面的元素都看成是一个个的盒子

盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（content）、内边距（padding）、边框（border）和外边距（margin），CSS 为这四个部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

1.1 盒子模型-内容区域

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

元素里面的所有子元素和文本内容都是在内容区域里面排列的，默认显示在左上角

hidden：表示隐藏溢出的部分；
visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；
scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；
auto：表示由浏览器决定如何处理溢出部分。

1.2 盒子模型-边框区域

边框是环绕内容区和内边距的边界，你可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

一般的书写方式为 : border: 1px solid red;

边框的三要素：边框的粗细边框的样式边框的颜色

边框线类型：

值	描述
none	默认：无边框。
solid	定义实线
dotted	点状边框
dashed	虚线
double	双线

1.3 盒子模型-内边距区域

内边距是内容区和边框之间的空间，你可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。

取值	示例	含义
一个值	`padding: 10px`	上下左右都设置为10px
两个值	`padding: 10px 20px`	上下设置为10px，左右设置为20px
三个值	`padding: 10px 20px 30px`	上设置为10px，左右设置为20px，下设置为30px
四个值	`padding: 10px 20px 30px 40px`	上设置为10px，右设置为20px，下设置为30px，左设置为40px

1.4 盒子模型-外边距区域

外边距：设置是是边框之外盒子和盒子之间的距离

外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是 CSS 布局中的一种重要手段。您可以使用 margin-top、margin-bottom、margin-left、margin-right 以及它们的简写属性 margin 来设置各个方向上外边距的宽度。

1.5 盒子模型案例

<div class="pro">
    <div class="pro-img">
        <img src="img/1.png" alt="">
    </div>

    <div class="pro-list">
        <p>【shaiya莹】水之密语靓彩</p>  
        <p>【抢新品NO.120】千金净雅专用</p>
        <p>【抢新品NO.120】千金净雅专用</p>
    </div>
</div>

body {
    background-color: rgb(238, 238, 238);
    margin: 0;
}

p {
    margin: 0;
}

.pro {
    width: 280px;
    height: 440px;
    background-color: rgb(255, 255, 255);
    padding: 20px 20px 0;
}

.pro-list p {
    margin-top: 16px;
}

1.6 标准盒模型和怪异盒模型

默认情况下盒子的大小是由内容区域，内边距，边框共同决定的

2. 元素显示类型

我们根据HTML标签的显示特点，将HTML标签做了一个分类

2.1 块元素

网页布局的

独占一行,不与元素共行内容不够一行的会被默认的添加外边距

我们就可以使用外边距要块级盒子水平居中

可以手动设置宽高,默认宽度与与父元素保持一致

可以正常设置内外边距

例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

2.2 行内元素

控制的页面中文本的样式

可以与其他元素共行显示;

不能手动设置宽高,尺寸由内容决定

行内元素上下的盒子模型是失效的只是在视觉上有效不会影响到布局

例 : span label b strong i s u sub sup a

2.3 行内块元素

本质是行内元素，具有块元素的性质

上下的盒子模型是失效的

可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)

display:block; /* 元素以块级形式展示 */
display:inline; /* 元素以行内形式展示 */
display:inline-block; /* 元素以行内形式排列，以块级形式展示 */

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个作业</title>
    <style>
        *{
            margin:0 auto;
            padding:0;
        }
        body{
            background: rgb(235 ,235,235);
        }
        ul{
            margin: 100px auto;
            width: 1500px;
        }
        li{
            display: inline-block;
            height: 225px;
            width: 225px;
            padding-left: 10px;
            background: rgb(255,255,255);

        }
        img{
            height: 100px;
            width: 100px;
        }



    </style>
</head>
<body>
<div id="kuai">
<ul>
    <li>
        <div>
            <a href="https://www.pinduoduo.com/" title="拼多多" target="_blank"> 戳这里打开拼多多</a>
            <p>这是大型砍价平台</p>
            <img src="img/6.png">
        </div>
    </li>
    <li>
        <div>
            <a href="http://www.jd.com" target="_blank"> 戳这里打开京东</a>
            <p>这是大型家电购买平台</p>
            <img src="img/2.png" alt="显示失败">
        </div>
    </li>
    <li>
        <div>
            <a href="http://www.taobao.com" target="_blank"> 戳这里打开淘宝</a>
            <p>这是大型购物平台</p>
            <img src="img/3.png">
        </div>
    </li>
    <li>
        <div>
            <a href="http://www.mgtv.com" target="_blank"> 戳这里打开芒果视频</a>
            <p>这里可以看密室大逃脱</p>
            <img  src="img/4.png">
        </div>
    </li>
    <li>
        <div>
            <a href="http://www.baidu.com" target="_blank"> 戳这里打开百度</a>
            <p>这里可以搜索此条</p>
            <img src="img/5.png">
        </div>
    </li>

</ul>
</div>

</body>
</html>