盒子模型
盒子模型
一.初探CSS盒子模型
1)盒子原理
内容(content)+内边距(padding)+边框(border)+外边距(margin)
这些属性在我们日常生活中的箱子上也是一样的
二.CSS样式
1)CSS规则
CSS规则由两个部分构成 选择器,以及一条或多条声明
每条声明由一个属性和一个属性值组成,属性是你希望设置的样式
提示:
- 用花括号包围声明
- 属性和属性值之间用冒号分割开
- 属性值后面用分号结尾
2)行内样式style属性
style属性的作用就是改变HTML元素的样式
简单的css样式(属性)
- width 宽度 以象素为单位px
- height 高度 以象素为单位px
- background 背景
三.盒子模型的内边距
元素的内边距在边框和内容区之间,它的属性就是 padding属性
padding属性定义元素的内边距,它的属性值可以为长度,百分比,但不允
许使用负值;百分比是相对于父级宽度来计算的
1)单内边距属性
- padding-top 上内边距
- padding-right 右内边距
- padding-bottom 下内边距
- padding-left 左内边距
2)同时控制四个方向的内边距
- padding:0px 0px 0px 0px; 上 右 下 左
- padding:0px 0px 0px; 上 左/右 下
- padding:0px 0px; 上/下 左/右
- padding:0px; 上/右/下/左
四.盒子模型的边框
元素的边框(border)就是围绕元素内容和内边距的一条或多条线
- 样式必须写,其它两个值默认1px 黑色
- 宽度
- 样式
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)盒子边框单独定义某一边
- bordertop:1px solid red; 上边框
- borderright 右边框
- borderbottom 下边框
- borderleft 左边框
5)单独定义某一边框宽度
- bordertopwidth:5px; 上边框宽度
- borderleftwidth
- borderbottomwidth
- borderleftwidth
6)单独定义某一边样式
- bordertopstyle:dashed; 上边框线样式
- borderleftstyle
- borderbottomstyle
- borderleftstyle
单独定义某一边框颜色 - bordertopcolor:skyblue; 上边框颜色
- borderrightcolor
- borderbottomcolor
- borderleftcolor
五.盒子模型的外边距
围绕在元素边框的空白区域.设置外边距会在元素外创建额外的 空白 .设置外边距最简单的方法就是使用
1)margin属性
margin属性接受任何长度单位,百分数甚至负值;百分数是相对于父级宽度计算的
2)单外边距
- margin-top:10px; 上外边距
- margin-right 右外边距
- margin-bottom 下外边距
- margin-left 左外边距
3)同时控制四个方向外边距
- margin:10px 20px 30px 40px; 上 右 下 左
- margin:10px 20px 30px; 上 左/右 下
- margin:10px 20px; 上/下 左/右
- margin:10px; 上/右/下/左
- margin:auto; 左右居中
- margin:50px auto; 上下50px 左右居中