css盒模型的属性基本属性有两个:padding和margin。
padding表示盒子的内边距。与外边距不同,padding不是只能完全透明的,可以设置背景颜色和图片。
在“CSS盒子模型”理论中,所有页面中的元素都可以看成一个盒子,并且占据着一定的页面空间。
一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构,二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子,盒子模型是由content(内容)、padding(内边距)、margin(外边距)和border(边框)这四个属性组成的。此外,在盒子模型中,还有宽度width和高度height两大辅助性属性。
记住,是所有的元素都可以看出一个盒子!
下图为一个CSS盒子模型的内部结构:
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