Web前端开发学习之CSS(Day04)

Day04 盒子模型

• • • 边框
    • 盒子模型(重点)
    • 背景属性(重点)
    • 渐变

边框

语法：

border:width style color;

边框样式为必填项，分为：

样式取值	含义
solid	实线边框
dotted	点线边框
dashed	虚线边框
double	双线边框

1) 单边框设置

分别设置某一方向的边框，取值：width style color;

属性	作用
border-top	设置上边框
border-bottom	设置下边框
border-left	设置左边框
border-right	设置右边框

2) 网页三角标制作

1. 标签设置宽高为0
2. 统一设置四个方向透明边框
3. 调整某个方向边框可见色

3) 圆角边框

1. 属性：border-radius 指定圆角半径
2. 取值：像素值或百分比
3. 取值规律：

一个值 	表示统一设置上右下左
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右
三个值 	表示分别设置上右下，左右保持一致

单角定义:
		border-top-left-radius:左上角
		border-bottom-right-radius:右下角
		border-bottom-left-radius:左下角
		border-top-right-radius:右上角

4)边框阴影

给元素增加阴影
	属性：box-shadow
	取值：多属性值列表
		box-shadow:h-shadow v-shadow blur spread color inset;
		h-shadow:必须 阴影的水平偏移距离，取值为正，向右偏，取值为负，向左偏
		v-shadow:必须 阴影的垂直偏移距离，取值为正，向下偏，取值为负，向上偏
		blur:可选，模糊距离
		spread:可选，阴影的扩充尺寸
		color:可选，阴影的颜色
		inset:可选值，将默认的外阴影改为内阴影

5)轮廓

	1、什么是轮廓
		绘制于元素边框周围的一条线
	2、属性
		outline:width style color;
		outline-width:宽度
		outline-style:样式
		outline-color:颜色

		常用：
			outline:0;
			outline:none;

	1. 区别：边框实际占位，轮廓不占位
	1. 特殊：取none可以取消文本输入框默认轮廓线

盒子模型(重点)

盒子模型分别由外边距、边框、内边距和标签内容组成。

元素的实际宽度=左右外边距+左右边框+左右内边距+width
元素的实际高度=上下外边距+上下边框+上下内边距+height

1)外边距

什么是外边距
	围绕在元素边框周围的空白区域
	作用：
		1、控制元素与元素之间的距离
		2、移动元素位置

1. 属性：margin

2. 作用：调整标签与标签之间的距离

3. 特殊：
   1）margin:0; 取消默认外边距
   2）margin:0 auto;左右自动外边距，实现标签在父标签范围内水平居中
   3）margin:-10px;标签位置的微调

4. 单方向外边距：只取一个值

    取值：
    	 margin-top   #上边框
    	 margin-right　#右边框
    	 margin-bottom　　#下边框
    	 margin-left　#左边框
   

   5、取值-auto
   左右方向设置为 auto 时，允许元素在其父元素中水平居中对齐，前提，必须设置该元素的宽度（固定宽度元素的居中实现方式：
   margin:0 auto;）

1)取值-负值
   	移动元素，向着反方向移动
   	margin-left:-10px;向左移动10px
   	margin-top:-10px;向上移动10px
2)margin 属性的取值数量
   	margin:value;四个方向外边距
   	margin:v1 v2;上下  左右
   	margin:v1 v2 v3;上  左右  下
   	margin:v1 v2 v3 v4;上右下左

3)页面中具备默认外边距的元素
   	h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
   	通过 CSS Reset 的方式 重写默认外边距
4)特殊效果
   	1、外边距合并
   		当两个垂直外边距相遇时，它们将形成一个外边距
   		合并后的外边距的高度等于两个发生合并外边距高度重的较大者
   	2、外边距的溢出
   		在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距效果上了。
   		特殊场合：父元素不设置边框时，为父元素中的第一个子元素设置上外边距时，或为最后一个子元素设置下外边距时
   		解决方案：
   		1、为父元素添加边框
   			有瑕疵，父元素高度会发生改变
   		2、为父元素添加内边距来取代子元素外边距
   			有瑕疵，影响元素的尺寸
   	3、块级元素，行内元素，行内块元素的上下外边距
   		上下外边距对行内元素 无效
   		上下外边距对行内块元素的影响是，整行元素都会受到影响

2)内边距

	什么是内边距
		内容区域与边框之间的空间
		会扩大元素边框所占用的区域

1. 属性：padding
2. 作用：调整标签内容框与边框之间的距离
3. 取值：单位是 px 或百分比，但不允许使用负值

20px; 一个值表示统一设置上右下左
20px 30px; 两个值表示分别设置(上下) (左右)
20px 30px 40px; 三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px; 表示分别设置上右下左

4、特殊影响
为行内元素设置上下内边距时，只会影响元素自身，并不会影响到其他元素
5、属性-box-sizing

1、作用
指定边框，内边距，内容区域的计算模式
默认：width和height只负责定义内容区域的尺寸，border，padding额外添加到元素上的
2、属性 & 值
属性：box-sizing
取值：
1、content-box
默认值，在元素的width和height之外绘制边框和内边距
2、border-box
边框和内边距会包含在width和height之中

背景属性(重点)

1)背景色

属性：background-color
取值：
	任意合法颜色值
	transparent
注意：
	背景颜色会填充到元素的内容区域，内边距区域以及边框区域

2)背景图像

属性：background-image
取值：url(图像url)
ex:background-image:url(a.jpg);

3)背景平铺

属性：background-repeat
取值：
	1、repeat
		默认值，垂直和水平方向都平铺
	2、repeat-x
		横向平铺
	3、repeat-y
		纵向平铺
	4、no-repeat
		不平铺，仅显示一次

4)背景图片尺寸

属性:background-size
取值:
	1、value1 value2
		具体数值，value1表示背景图像的宽度，value2表示背景图像的高度
	2、value1% value2%
		以元素的尺寸占比决定背景图的尺寸
	3、cover
		覆盖
		把背景图扩展至足够的大(等比缩放)，直到背景图像完全覆盖到元素区域位置
	4、contain
		包含
		将背景图像等比缩放，直到右边或下边碰到元素边缘为止

5)背景图片固定

属性：background-attachment
取值：
	1、scroll
		滚动,默认值
	2、fixed
		固定，将背景图保持在可视化区域内，不随着滚动条而发生变化

2)背景图片位置

属性：background-position
取值：
	1、x y
		x ：背景图像水平偏移位置
			取值为正，向右移动
			取值为负，向左移动
		y ：背景图像垂直偏移位置
			取值为正，向下偏移
			取值为负，向上偏移
	2、x% y%
	   0%  0%  ：背景图在元素左上角 （left top） 
	   100% 100%  :背景图在元素右下角  (right bottom)
	   50% 50%  : 背景图在元素的中间 （center）
	3、
		x:left/center/right 替代
		y:top/center/bottom 替代

2) CSS Sprites

	将若干幅小图像拼合到一副大图像中，想看具体小图像的时候，配合着背景图已经背景图像位置的方式进行移动，显示

	1、根据要看的图像，创建一个元素,该元素大小要与要看的图像大小一致。
	2、通过 背景图像以及背景图像位置 移动背景图到 显示的元素中
利用photoshop工具进行辅助测量
    CTRL+ '+'  放大图像
	CTRL+ '-'  缩小图像
	CTRL+ 'D'  取消选框   

背景属性-简写属性

	background:color url() repeat attachment position;
	注意：属性值可以省略，省略的话将采用默认值
	background:red;

渐变

---