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

html-css013

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

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

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

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

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

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

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

布局属性(Layout properties) border 边框属性 该CSS属性用来设定边框宽度,风格和颜色。 border-bottom 下边框属性 该CSS属性用来设定下边框宽度,风格和颜色。 border-bottom-color 下边框颜色属性 该CSS属性用来设定下边框的颜色。 border-bottom-style 下边框风格属性 该CSS属性用来设定下边框的风格。 border-bottom-width 下边框宽度属性 该CSS属性用来设定下边框的宽度。 border-collapse 边框合并属性 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框。 border-color 边框颜色属性 该CSS属性用来设定边框的颜色。 border-left 左边框属性 该CSS属性用来设定左边框宽度,风格和颜色。 border-left-color 左边框颜色属性 该CSS属性用来设定左边框的颜色。 border-left-style 左边框风格属性 该CSS属性用来设定左边框的风格。 border-left-width 左边框宽度属性 该CSS属性用来设定左边框的宽度。 border-right 右边框属性 该CSS属性用来设定右边框宽度,风格和颜色。 border-right-color 右边框颜色属性 该CSS属性用来设定右边框的颜色。 border-right-style 右边框风格属性 该CSS属性用来设定右边框的风格。 border-right-width 右边框宽度属性 该CSS属性用来设定右边框的宽度。 border-style 边框风格属性 该CSS属性用来设定边框的风格。 border-top 上边框属性 该CSS属性用来设定上边框宽度,风格和颜色。 border-top-color 上边框颜色属性 该CSS属性用来设定上边框的颜色。 border-top-style 上边框风格属性 该CSS属性用来设定上边框的风格。 border-top-width 上边框宽度属性 该CSS属性用来设定上边框的宽度。 border-width 边框宽度属性 该CSS属性用来设定边框的宽度。 margin 边距属性 该CSS属性用来设定边距的宽度。 margin-bottom 下边距属性 该CSS属性用来设定下边距的宽度。 margin-left 左边距属性 该CSS属性用来设定左边距的宽度。 margin-right 右边距属性 该CSS属性用来设定右边距的宽度。 margin-top 上边距属性 该CSS属性用来设定下边距的宽度。 padding 间隙属性 该CSS属性用来设定间隙的宽度。 padding-bottom 下间隙属性 该CSS属性用来设定下间隙的宽度。 padding-left 左间隙属性 该CSS属性用来设定左间隙的宽度。 padding-right 右间隙属性 该CSS属性用来设定右间隙的宽度。 padding-top 上间隙属性 该CSS属性用来设定上间隙的宽度。 //除了以上属性外还有很多css布局属性,如: CSS字体属性(font) CSS常用文本属性 CSS背景属性 CSS边框属性(border) CSS边距属性(margin) CSS间隙属性(padding) CSS盒子模式(Box Model) CSS列表属性(list-style) CSS伪类(pseudo-class) 这里就不一一介绍了,请到相关网站学习吧

1、首先新建一个html文件,命名为test.html。

2、在test.html文件内,使用div标签一个模块,在div内,再使用div标签创建两个内部模块,下面将让两个内部div并排显示。

3、在test.html文件内,分别给每一个div设置class属性,分别为wdiv,fldiv,frdiv。

4、在css标签内,设置class为wdiv的div样式,定义其宽度为500px,高度为400px,背景颜色为灰色。

5、在css标签内,再分别设置class为fldiv和frdiv的样式,定义它们的宽度为240px,高度为350px,同时,使用float属性分别设置一个div浮动向左,另一个浮动向右,从而实现并排显示。

6、最后在浏览器打开test.html文件,查看实现的效果,就完成了。