CSS基础(2)

css背景类样

background-color 背景颜色

background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

background-image 背景图片

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像.

background-repeat 背景图片的重复

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性

属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

repeat-y 只允许在y轴重复

repeat-x 只允许在x轴重复
no-repeat 不重复,只显示一次
background-position 背景图片的定位
取值: 两个,分别表示x和y方向。如果只写一个,则两个值相等
例如:京东、淘宝 五星好评
雪碧图: 各个小图标的集合,使用的目的是减少http的请求

background 是把上面所有的全部合在一起
background : color image repeat position
background-size 背景图片的大小

 

 

框模型

任何一个元素,都可以理解成一个盒子
盒子是可以装"东西"
里面东西跟"盒子的包装"有一定的空间
两个盒子或者说多个盒子,盒子之间是不是有一定的"距离"(空间)

盒子模型的组成
margin 外边距 盒子与盒子之间的距离
border 边框 包装盒
padding 内边距 填充物
content 内容 
margin 合起来写的属性4个
当你写一个的时候,四个全部相同
两个的时候,上右,对边补齐
三个的时候,上右下,对边补齐
margin-top margin-right margin-bottom margin-left
这四个属性可以单独的拿出来写
border 边框 合写的属性
border-color 颜色
border-top-color: ;
border-left-color:
border-style 样式也分上下左右
border-width :宽度,也分上下左右,写的时候不需要区分顺序
padding:上右下左,对边补齐


定义的width和height只是content部分
padding和border会把盒子撑大

盒子的大小 content+padding+border

 

原文地址:https://www.cnblogs.com/yn2025134/p/10942855.html