css笔记

CSS笔记

CSS盒子模型

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

border：设置边框 border:2px solid red;

（border-left：左边框 border-right：右边框 border-top：上边框

border-bottom：下边框）

（none无边框，solid边框为实线，dotted边框为点状即点线，dashed边框为虚线，double边框为双线）

padding ：边框内边距 padding:20pax

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

margin：边框外边距 margin:20px

margin-left：左外边距

margin-right右外边距

margin-top上外边距

margin-bottom下外边距

对数据进行操作，需要把数据放到一个区域里面（div）

布局的漂浮

 float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄