当前位置：首页 > news >正文

CSS盒模型-怪异盒模型笔记-思维导图-案例等

news 2025/8/2 7:50:36

文章目录

- - - 一、盒模型（重点）
    - 二、怪异盒模型
    - 三、块级元素和行内元素区别汇总
    - 四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏
    - 五、思维导图
    - 六、笔记资料

一、盒模型（重点）

所有HTML元素可以看作盒子。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

我们把 padding 和 margin 统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。

盒模型由5个属性组合而成。

CSS盒模型

用处：决定盒子的尺寸问题（盒子的所占空间或高矮胖瘦）。

width 宽度

元素{width:400px;
}
//假设不写宽度会怎么用
1. 块级元素默认是100%的宽，即父盒子有多宽，它就有多宽
2. 行内元素默认就是内容的宽，即内容有多宽，它就有多宽默认是不支持width属性，即无法设置

height 高度

元素{height:400px;
}
//假设不写高度会怎么用
1. 块级元素默认是没有高度
2. 行内元素默认就是内容的高，即内容有多高，它就有多高默认是不支持height属性，即无法设置

padding 内间距（重点）

内间距会影响盒子的宽高，即让它变大。

大部分元素默认都没有填充（内间距）。

内间距：指的是盒子的内容与边框的间距（4个边都有内间距）

1.块级有效2.行内有效内间距有4种写法：
1.取一个值
padding:20px;
/上右下左都是20px/2.2个值
padding:20px 10px;上下  右左3.3个值
padding:10px 15px 20px;上   左右   下4.4个值
padding:10px 5px 15px 20px;	上   右    下  左----padding是复合写法----可以拆分为单独的写法
注意：如果拆分了，则只能写一个值。
padding-top:10px;
padding-right:10px;
padding-bottom:5px;
padding-left:15px;

边框

边框默认是没有的,一个盒子可以有4条边框

边框也会影响盒子的总宽和总高

border:边框粗细  边框风格  边框颜色;
border:1px solid  red;
边框风格：实线（solid）、虚线（dashed）、点（dotted）、双实线（double）border:1px solid  red; 	表示4中边框都是一样的；
如果要让每个边框都不一样：学了边框后，水平线标签就可以不用了
border-方向词:边框粗细  边框风格  边框颜色外间距有4种写法：
同内间距

外间距

盒子与盒子之间的间距即为外间距

不会影响到盒子的尺寸。

取值同内间距

大部分元素默认都没有margin
```
1.块级有效2.行内左右有效，上下无效
```

盒模型的计算公式(重要)

总宽= width+左右padding+左右border;
总高= height+上下padding+上下border;

哪些元素默认有外间距、内间距

1. 有外间距的元素
h1~h6,p,body
2. 有内间距的元素
ul,ol等为了不影响自己写代码，一般会将默认的这些外间距和内间距统一设置为0
也就是默认的外间距、内间距会干扰自己算盒模型

二、怪异盒模型

改变了盒模型的计算尺寸的方式。

   公式：总宽=width总高=height如果添加了padding和border，则会自动扣除，收缩-----默认是正常的盒模型，如果要启用怪异盒模型，则需要写一行代码----选择器{box-sizing:content-box(默认值)|border-box(启用了怪异和模型);}

怪异盒模型的好处：

不需要理会复杂的盒模型的方式了
现代浏览器和移动端可以大胆放心的使用，而且是主流的方式

三、块级元素和行内元素区别汇总

行内元素同一行水平排列。
块级元素各占据一行，垂直方向排列。
块级元素可以包含行内元素和块级元素。行内元素不建议包含块级元素，除非转为块级
行内元素与块级元素属性的不同，主要是盒模型属性上。
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效

四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏

功能：可以通过 display 属性修改元素框的显示方式

取值：

none:不显示元素(隐藏)，相当于消失不见
block : 让元素像块级一样显示使用场合：将行内元素改变成块级元素
inline(默认):此元素会被显示为内联元素，可以对块状元素进行设置，让它变成行内元素
inline-block : 让元素显示的为行内块，本身是行内元素：一行内能够显示多个。具备块级元素特点：允许改宽和高

可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。

举例：

<!--HTML结构-->
<div><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a>
</div>
<!--CSS-->
<style type="text/css">a{border: 1px solid red;width: 100px;height: 35px;/*转为行内块级*/display: inline-block;margin: 10px;text-align: center;padding-top: 13px;}
</style>