CSS盒模型

html-css012

CSS盒模型,第1张

CSS盒模型：将页面所有元素表示为一个个矩形的盒子，CSS决定这些盒子的大小，位置以及属性。

<h1>...<h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<header>、<main>、<footer>、<aside>、<nav>、<section>、<table>、<pre>

<a>、<span>、<em>、<strong>、<img>、<input>、<label>、<textarea>、<select>、<button>、<code>

1. 写法：display: inline-block

2. 特性：

3. inline-block缝隙 css常见样式二

4. display的值

②：浮动元素和绝对定位元素的外边距不会折叠。

PS:

PS：通过设置margin让元素居中

1.3.1 设置边框的值

1.3.2 边框常用属性

实现效果：

参考：

https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-6-10-45-8.pdf

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

转自 菜鸟教程

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

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

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

下面的图片说明了盒子模型(Box Model)：

转自 链接

盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

2.标准盒模型下盒子的大小 = content + border + padding + margin

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

2.怪异盒模型下盒子的大小=width（content + border + padding） + margin

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。