初探CSS盒子模型

盒子模型

一.初探CSS盒子模型

1)盒子原理

内容(content)+内边距(padding)+边框(border)+外边距(margin)
这些属性在我们日常生活中的箱子上也是一样的

二.CSS样式

1)CSS规则

CSS规则由两个部分构成 选择器,以及一条或多条声明
每条声明由一个属性和一个属性值组成,属性是你希望设置的样式

提示:

1. 用花括号包围声明
2. 属性和属性值之间用冒号分割开
3. 属性值后面用分号结尾

2)行内样式­style属性

style属性的作用就是改变HTML元素的样式
简单的css样式(属性)

1. width 宽度 以象素为单位px
2. height 高度 以象素为单位px
3. background 背景
   

三.盒子模型的内边距

元素的内边距在边框和内容区之间,它的属性就是 padding属性
padding属性定义元素的内边距,它的属性值可以为长度,百分比,但不允
许使用负值;百分比是相对于父级宽度来计算的

1)单内边距属性

1. padding-­top 上内边距
2. padding­-right 右内边距
3. padding­-bottom 下内边距
4. padding­-left 左内边距

2)同时控制四个方向的内边距

1. padding:0px 0px 0px 0px; 上 右 下 左
2. padding:0px 0px 0px; 上 左/右 下
3. padding:0px 0px; 上/下 左/右
4. padding:0px; 上/右/下/左

四.盒子模型的边框

元素的边框(border)就是围绕元素内容和内边距的一条或多条线

1. 样式必须写,其它两个值默认1px 黑色
2. 宽度
3. 样式

1)border属性值:

border属性值:1. 宽度 2. 样式 3. 颜色;(边框的三要素)

2) 样式

1. none 无边框
2. solid 实线
3. dashed 虚线
4. dotted 点状线
5. double 双线

3) 颜色值

1. 英文单词
2. 十六进制
3. rgb(0-255,0-255,0-255)
4. rgba(0-255,0-255,0-255,0-1)

4)盒子边框单独定义某一边

1. border­top:1px solid red; 上边框
2. border­right 右边框
3. border­bottom 下边框
4. border­left 左边框
   

5)单独定义某一边框宽度

1. border­top­width:5px; 上边框宽度
2. border­left­width
3. border­bottom­width
4. border­left­width
   

6)单独定义某一边样式

1. border­top­style:dashed; 上边框线样式
2. border­left­style
3. border­bottom­style
4. border­left­style
   
   单独定义某一边框颜色
5. border­top­color:skyblue; 上边框颜色
6. border­right­color
7. border­bottom­color
8. border­left­color
   

五.盒子模型的外边距

围绕在元素边框的空白区域.设置外边距会在元素外创建额外的 空白 .设置外边距最简单的方法就是使用

1)margin属性

margin属性接受任何长度单位,百分数甚至负值;百分数是相对于父级宽度计算的

2)单外边距

1. margin­-top:10px; 上外边距
2. margin­-right 右外边距
3. margin­-bottom 下外边距
4. margin­-left 左外边距

3)同时控制四个方向外边距

1. margin:10px 20px 30px 40px; 上 右 下 左
2. margin:10px 20px 30px; 上 左/右 下
3. margin:10px 20px; 上/下 左/右
4. margin:10px; 上/右/下/左
5. margin:auto; 左右居中
6. margin:50px auto; 上下50px 左右居中