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

最新推荐文章于 2024-10-02 15:35:50 发布

前端三评

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量760

点赞数 23

分类专栏： CSS HTML5+CSS3 文章标签： css 笔记前端盒模型

本文链接：https://blog.csdn.net/imqdcn/article/details/142661823

版权

CSS 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

HTML5+CSS3

4 篇文章 0 订阅

订阅专栏

文章目录

一、盒模型（重点）

所有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>