什么是css盒子模式(框模型)

html-css024

什么是css盒子模式(框模型),第1张

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

网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),

CSS盒子模式都具备这些属性。

这些属性可以把它转移到日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

每个盒子都有:边界、边框、填充、内容四个属性;

每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;里的抗震辅料厚度,而边框有大小和颜色之分,又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。

1、内联式css样式,直接写在现有的HTML标签中

<p style="color:red">这里文字是红色。</p><p style="color:redfont-size:12px">这里文字是红色。</p>

2、嵌入式css样式,写在当前的文件中

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"><title>嵌入式css样式</title><style type="text/css">span{   color:blue}</style></head><body>

    <p>小明<span>上课</span>不注意<span>听老师</span>讲课,<span>以至于</span>期末考试成绩很差!</p></body></html>