css笔记框模型、背景、渐变

css笔记框模型、背景、渐变

1、框模型
1、框
框就是个容器,目的为了承装其他的东西
html中所有的元素都可以称之为 框
2、框模型
Box Model : 也称为盒子模型
定义了元素框 处理元素内容尺寸、内边距、边框 和 外边距的方式

元素内容尺寸 : width , height
div{
width:100px;
height:100px;
}
边框:border
div{
border:1px solid #ddd;
}

注意:当框模型(内边距,外边距,边框)介入到元素后,元素的 内容区域 尺寸是不变的,但是会增加元素框的总尺寸
元素总宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;
元素总高度 = 上下外边距 + 上下边框 + 上下内边距 + height;
eg :
div{
width : 200px ;
border: 2px solid #ddd;
左右外边距 : 15px;
左内边距: 8px;
右内边距: 4px;
}
总宽度:200 + 2*2 + 15*2 + 8 + 4 =
200 + 4 + 30 + 12 = 246px
3、外边距
1、什么是外边距
在元素边框周围的一些空白区域,这些区域是透明的,默认情况下,是不允许被其他元素所占据的。也可以表示为 当前元素 与 其他元素之间的距离
2、语法:
margin:value; (四个方向的外边距)
单边设置:
margin-top : 上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距

取值:
单位:
px
%
auto : 自动,只对 左右外边距有效,设置水平居中
负值 : 目的 是为了移动元素
margin-left:取负值,为了向左移动元素
margin-top :取负值,为了向上移动元素

取值为 auto :由浏览器自己计算外边距。左右方向取值为 auto 时,会呈现出 元素水平居中对齐显示方式(仅仅局限于块级元素,而且必须要设置宽度属性)

取值数量:
margin:value; 四个方向外边距
margin:v1 v2; 上下 左右
margin:v1 v2 v3; 上 左右 下
margin:v1 v2 v3 v4; 上 右 下 左
3、默认 外边距
html元素里, 有些元素默认具备 外边距的
h1~h6
p
ul
body
dl,dd

如果程序中,不想使用默认的外边距,可以设置为 0
4、外边距问题
1、(垂直)外边距合并
当两个垂直外边距相遇时,它们将形成一个外边距,称为 外边距合并
合并后的外边距的高度值为两个元素中 外边距较大者的值
2、外边距溢出
父子元素中,如果设置 子元素 的上下外边距时,默认情况 会 被作用到父元素的外边距上
解决方式:
1、可以为 父元素 增加边框
2、增加 父元素 的 padding-top
最好将 父元素的 高度 相应的 减少一部分数值
4、内边距
1、什么是内边距
内容区域 与 边框之间的距离控件
注意:内边距 会将元素边框 撑大
2、属性
padding : value;
padding-top:
padding-bottom:
padding-right:
padding-left:

取值:
单位:
px
%
数量:
padding:value ; 上下左右
padding:v1 v2 ; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
2、背景
1、背景颜色
属性:background-color
取值:可设置为合法的值 或 transparent
注意:默认情况下,背景(颜色、图像)是从边框位置处就开始填充
2、背景图片
属性:background-image
取值:url("图像URL")
background-image:url("xxxx/xxx.jpg");
background-image:url('xxxx/xxx.jpg');
background-image:url(xxxx/xxx.jpg);
3、背景平铺
属性:background-repeat
取值:
repeat : 即水平方向又垂直方向平铺(默认值)
no-repeat : 没有平铺
repeat-x : 仅水平方向平铺
repeat-y : 仅垂直方向平铺
4、背景图片尺寸
属性:background-size
取值:
value1 value2 : 宽度 高度
value1% value2% : 父容器的宽和高的占比
cover : 覆盖,将背景图像扩展至足够大,直到背景图已经覆盖了元素的所有区域.有可能导致背景图不能完整的显示在元素中
contain: 包含,将背景图扩大,直到背景图已经碰都某一个边缘位置(右、下),背景图能够完完整整的显示在元素中,不一定能覆盖到所有的区域
5、背景图片固定
属性:background-attachment
取值:
scroll :背景 会随文档发生滚动
fixed : 固定 , 背景不会随着内容而发生滚动
6、背景定位
改变背景图片在元素中的位置
属性:background-position
取值:
x y : x水平偏移位置,值为正 向右移动,值为负,向左移动
y垂直偏移位置,值为正 向下移动,值为负,向上移动
x% y% :
左上角 : 0% 0%
右下角 : 100% 100%
居中显示 : 50% 50%
关键字:
x : left,center,right
y : top,center,bottom
CSS Sprite : 将多个背景图合并到一张里面去,根据需求情况,通过 背景定位 对背景图片进行偏移,从而找到要显示的图像
7、背景属性
将 以上 几个属性全部综合到一起,通过一个属性描述所有的值
属性:background
取值:color url() repeat attachment position;
常用值:
background:url() reapeat position;

background-image:url(Images/user.png);
background-repeat:no-repeat;
background-position:right center;

background:url(Images/user.png) no-repeat right center;

3、渐变
1、渐变语法:
属性:background-image
取值:
linear-gradient() -- 线性渐变
radial-gradient() -- 径向渐变
repeating-linear-gradient() -- 重复线性渐变
repeating-radial-gradient() -- 重复径向渐变
background-image:url(); -- 显示背景图像
background-image:linear-gradient(); -- 显示线性渐变颜色
2、线性渐变
属性:background-image
取值:linear-gradient(angle,color-point1,color-point2,...)

angle:方向(角度)
to top : 向上 --> 0deg
to right : 向右 --> 90deg
to bottom : 向下 --> 180deg
to left : 向左 --> 270deg
color-point :
表示颜色的数值 和 位置
red 10px
red 0%

background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
3、径向渐变
属性:background-image
取值: radial-gradient();
radial-gradient([size at position],color-point1,color-point2,....);

size at postion :
可以省略不写
size : 标识的圆的半径 以 px 为单位
position : 圆心的位置
top,left,right,bottom,center
具体数值
百分比
4、重复渐变
repeating-linear-gradient(angle,color-point);
color-point:
位置 取具体的数值或者 不到 100% 的 数字
repeating-radial-gradient();

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: