盒子模型 DIV
什么是盒子模型
1、盒子模型的定义
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
2、div 标记的定义
**div**是英文division的缩写,意为“**分割、区域**”。<div>标记简单而言就是一个区块容器标记,
可以将网页分割为独立的、不同的部分,以实现网页的规划和布局。**<div>与</div>之间相当于一个容器**,
可以容纳**段落、标题、图像**等各种网页元素,也就是说大多数HTML标记都可以嵌套在<div>标记中,
**<div>中还可以嵌套多层<div>**。
<div>标记非常强大,**通过与id、class等属性配合**,然后使用CSS设置样式,来替代大多数的文本标记。
css div 中 如果 设置 marign: 10px auto; 表示间隔10px,其他居中
3、盒子的宽与高
网页是由多个盒子排列而成的,每个盒子都有固定的大小,在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比,实际工作中最常用的是像素值。
注意:
宽度属性width和高度属性height仅适用于块级元素,对行内元素无效(<img />标记和<input />除外)。
DIV的相关属性
1、边框属性
设置内容 样式属性 常用属性值
(必写)边框样式 border-style:上边 [右边 下边 左边];{
none 无(默认)
dashed 虚线
dotted 点线
solid 单实线
double 双实线
}
.father{
border:1px solid #000;
}
边框宽度 border-width:上边 [右边 下边 左边]; 像素值
可以同时写四个像素值,用空格隔开,分别表示顺时针四条边的边框宽度
边框颜色 border-color:上边 [右边 下边 左边];{
颜色值(单词)
#十六进制
rgb(r,g,b)
rgb(r%,g%,b%)
}
可以同时写四个像素值,用空格隔开,分别表示顺时针四条边的边框宽度
综合设置边框 border:四边宽度 四边样式 四边颜色;
圆角边框 border-radius:水平半径参数/垂直半径参数; (两个参数) 像素值或百分比
图片边框 border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;
2、边距属性
(1): 内边距
在CSS中padding属性用于设置内边距,同边框属性border一样,padding也是复合属性,其相关设置方法如下:
padding:设置内边距; {
padding-top: 上内边距;
padding-right: 右内边距;
padding-bottom: 下内边距;
padding-left: 左内边距;
padding: 上内边距 [右内边距 下内边距 左内边距];
}
(2)外边距
在CSS中margin属性用于设置外边距,它是一个复合属性,与内边距padding的用法类似,设置外边距的方法如下。
margin:设置外边距 {
margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;
margin: 上外边距 [右外边距 下外边距 左外边距];
}
(3)box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框,其基本语法格式如下。
在上面的语法格式中,box-sizing属性的取值可以为content-box或border-box,对它们的解释如下。
box-sizing: content-box/border-box;定义盒子的宽度值和高度值是否包含元素的内边距和边框{
content-box:浏览器对盒模型的解释遵从W3C 标准,当定义width和height时,它的参数值不包括border和padding。
border-box:当定义width和height时,border和padding的参数值被包含在width和height之内。
}
!!!!要学会计算盒子的宽,高
盒子的背景属性
其本质都是盒子
1、 设置背景颜色
在CSS中,使用background-color属性来设置网页元素的背景颜色,其属性值与文本颜色的取值一样,可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent,即背景透明,此时子元素会显示其父元素的背景。
2、 设置背景图像
背景不仅可以设置为某种颜色,还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。
background-image:url(图片地址);
3、 背景与图片不透明度的设置
(1)RGBA模式
RGBA是CSS3新增的颜色模式,它是RGB颜色模式的延伸,该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。其语法格式如下: rgba(r,g,b,alpha);
(2)opacity属性
在CSS3中,使用opacity属性能够使任何元素呈现出透明效果。其语法格式如下:
opacity:(0-1)opacityValue; 取值0-1,0为全透明,越接近1越实体
4、 设置背景图像平铺
默认情况下,背景图像会自动沿着水平和竖直两个方向平铺,如果不希望图像平铺,或者只沿着一个方向平铺,可以通过background-repeat属性来控制,该属性的取值如下:
background-repeat:平铺方式; {
repeat: 沿水平和竖直两个方向平铺(默认值)
no-repeat: 不平铺(图像位于元素的左上角,只显示一个)
repeat-x: 只沿水平方向平铺
repeat-y: 只沿竖直方向平铺
}
5、 设置背景图像的位置
如果将背景图像的平铺属性background-repeat定义为no-repeat,图像将默认以元素的左上角为基准点显示。
6、 设置背景图像固定
如果希望背景图像固定在屏幕的某一位置,不随着滚动条移动,可以使用background-attachment属性来设置。background-attachment属性有两个属性值,分别代表不同的含义,具体解释如下:
background-attachment: ; {
scroll: 图像随页面元素一起滚动(默认值)
fixed: 图像固定在屏幕上,不随页面元素滚动。
}
7、 设置背景图像的大小
在CSS3中,background-size属性用于控制背景图像的大小,其基本语法格式如下:
background-size:属性值1 属性值2;
....还有很多属性
渐变
更多推荐
网页设计之盒子模型(DIV)
发布评论