玩转css基本属性

什么是CSS

CSS 层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性

CSS的使用

1. 内联样式（行内样式）：<p style=“color: red;”>
2. 内部样式：在head标签中<style type=“text/css”><\style>
3. 外部样式表：<link href=“外部文件.css” type=“text/css” rel=“stylesheet”/>

CSS样式表的特征

1. 继承性
2. 层叠性
3. 优先级
4. ！improtant：最高权限：使用方法：属性名称： 值！improtant

CSS基础选择器

1. 通用选择器：*{}
2. 标签选择器：标签名{}
3. 类选择器：.class名{}
4. ID选择器：id名{}
5. 群主选择器：选择器1，选择器2{}
6. 后代选择器：div span{}（空格）
7. 子代选择器：div>span{}
8. 兄弟选择器：div~span{}
9. 相邻选择器：div+span{}
10. 伪类选择器: :hover {} (悬停）
11. 优先级：元素< 类=伪类<id<行内

尺寸属性

1. height：高度
2. min-height：最小高度
3. max-height：最大高度
4. width：宽度
5. min-width：最小宽度
6. max-width：最大宽度
7. line-height：行高

溢出

使用尺寸属性限制元素的大小时，如果内容所需要的空间大小大于元素本身，会导致溢出的效果
语法：overflow:

1. overflow-x: 处理横向溢出
2. overflow-y: 处理纵向溢出
   属性值：
   1. visible：默认效果 溢出可见
   2. hidden：溢出隐藏
   3. scroll：滚动，元素会出现滚动条当内容溢出的时候，滚动条可用
   4. auto：自动（自适应） 内容溢出的时候会出现滚动条没有溢出的时候是不出现的

边框阴影

box-shadow属性值：

1. h-shadow：(必填) 阴影的水平偏移距离 正数的 右边 负数 左偏移
2. v-shadow：(必填) 垂直的偏移距离 + 下 - 上
3. blur：模糊距离 必须是正数
4. color：颜色
5. spread：阴影的大小
6. inset值： 将默认的外阴影变成内阴影

轮廓（类似于边框border）

作用： 绘制元素周围的一条线，位于边框外的
属性：

1. outline-width: 10px;
2. outline-style: solid;
3. outline-color: yellow;
4. outline: none;
5. outline: 1px solid red;

背景属性

/*背景颜色background-color: #000000 英文单词 transparent（透明色）
注意：背景颜色会填充到元素的内容区域、内边距区域 和 边框区域*/
/*背景颜色*/
background-color: red;
/*背景图片
 默认的效果平铺
* */
background-image: url(img/day04.jpg);
/*修改平铺
	repeat:默认的平铺
	repeat-x ：水平平铺
	repeat-y：垂直平铺
	no-repeat：不平铺
* */
background-repeat:repeat;
/*背景图片的尺寸
	cover :覆盖  撑满整个元素
	contain：将背景图片放大 直到背景图像的下边或者右边有一个边缘碰到我们的元素为止
				 	value1 value2 单位是px
				 	value% value% 采用当前元素的宽度和高度的百分比进行缩放
 * * */
background-size: 50% 50%;
		/*背景图片的固定
		fixed: 背景固定
		 * */
background-attachment: scroll;
/*背景图片的定位 * */
background-position: 100% 100%;

/* background-blend-mode属性
作用：用于定义了背景层的混合模式（图片与颜色）
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
属性值：
normal：默认值，设置正常的混合模式。
multiply ：正片叠底模式。
screen：滤色模式。
overlay：叠加模式。
darken：变暗模式。
lighten：变亮模式。
color-dodge：颜色减淡模式。
saturation：饱和度模式。
color：颜色模式。
luminosity：亮度模式。
注： Internet Explorer 不支持 background-blend-mode 属性。
 * * */
background-blend-mode: color-dodge;

文本属性

• 缩进文本：text-indent
• 水平对齐：text-align
  1. left：左对齐
  2. center：居中
  3. right：右对齐
• 字间隔：word-spacing
• 字母间隔：letter-spacing
• 字符转换：text-transform
  1. none ：没效果
  2. uppercase ：只对每个单词的首字母大写
  3. lowercase ：文本转换为全大写
  4. capitalize ：文本转换为全小写
• 处理空白符：white-space
  1. pre：浏览器将会注意额外的空格，甚至回车
  2. nowrap：它会防止元素中的文本换行，除非使用了一个 br 元素
  3. pre-wrap：那么该元素中的文本会保留空白符序列，但是文本行会正常地换行
  4. pre-line 与 pre-wrap 相反

盒子模型

position：定位
margin：外边距（上下会重叠）
border：边框
padding：内边距
内容：1349×150（centent）
实际宽度：margin+border+padding+centent(标准盒子)
margin+centent(border+padding+centent)(IE盒子)
box-sizing: border-box; 将标准的盒子模型转换成IE6的盒子模型

渐变

渐变：两种或者多种颜色间平滑过渡的效果

• 线性渐变语法： background-image:linear-gradient(x,y,red, yellow 10%, green 20%);
• 径向渐变：语法： background-image：radial-gradient([size at position] ，red, yellow 10%, green 20%);
• 重复渐变：
  1. background-image: repeating-linear-gradient(red, yellow 10%, green 20%);（线性重复）
  2. background-image: repeating-radial-gradient(red, yellow 10%, green 15%);（径向重复）

浏览器的兼容性

各格主流浏览器的主流版本，都可以支持渐变的
对于不支持渐变的浏览器 可以尝试增加 浏览器的前缀 会实现显示
浏览器的前缀

1. firefox：火狐浏览器 -moz-
2. chrome：谷歌浏览器 -webkiit-
3. safari：苹果自带浏览器 -webkiit-
4. opera 欧朋 ：-o-
5. ie：-ms- （ie的部分版本支持）

前缀的加载位置

1. 如果浏览器不支持属性的话，则将前缀加载到属性名称前
2. 如果浏览器支持属性，但是不支持属性值 将前缀加到属性值的前面

定位

所谓定位，实际上就是定义元素框相对其正常位置，应该出现在哪儿。
简单说： 定位就是改变元素的页面上的默认的位置
定位的分类

1. 普通流定位（元素默认的定位方式）
2. 浮动定位 脱离文本
3. 相对定位 不脱离文本
4. 绝对定位（多利用子觉父相）脱离文本
5. 固定定位 脱离文本

/*浮动定位 */
float: left;
float: right;
/*相对定位 */
position：relative;
/*绝对定位 */
position：absolute;
/*固定定位 */
position：fixed;

浮动

浮动定位的概述

如果我将元素设置了浮动定位那么具备以下几个特点：

1. 浮动元素脱离了普通的文档流不占据页面空间的其他没有浮动的元素会自动上前部位
2. 浮动元素会停靠在父级元素的左边或者右边，或者停靠在其他已经浮动的元素的边缘上
3. 浮动元素只会在当前行内浮动
4. 浮动元素依然位于父元素内
5. 让多个元素在一行内显示

语法：float： left（左浮动） right（右浮动） none（默认，无浮动的效果）

清除浮动：

• 如果元素浮动起来之后，除了影响到自己的位置还会影响到后续的元素
• 在这样的情况下 不想被前面浮动元素影响的话 可以使用清除浮动来解决这个问题。
  语法clear：
  1. left：清除当前元素前面的元素左浮动带来的影响（只和自己相关，并不和前面的元素相关）当前元素不会向前占位并且左边不允许有浮动元素。
  2. right：清除当前元素前面的元素右浮动带来的影响，当前元素不会向前占位并且右不允许有浮动元素。
  3. both：清除当前元素前面的元素左浮动和右浮动带来的影响，当前元素不会向前占位并且左右不允许有浮动元素。

浮动引发的特殊效果：
1.父级元素的宽度不够的时候，浮动的子元素会的最后一个会被自动换行
2.元素一旦浮动起来之后，那么宽度将变成自适应（非人为指定的情况下）
3.元素一旦浮动起来后，那么将变成块级元素尤其对行内元素影响最大
4.文本元素和行内元素，行内块元素会采用环绕方式排列，是不会被浮动元素压在底下的胡巧妙的避开浮动元素。

浮动元素对父元素带来的影响

由于浮动元素脱离了文档流所以导致不占据父元素页面空间
解决问题：

1. 直接给父级元素设置高度
   弊端：必须要知道父级准确的高度
2. 设置父级元素的浮动
   弊端：对后续的元素会有影响
3. 设置父级元素overflow hidden或auto
   弊端：如果子级溢出的话 会一起被隐藏
4. 在父元素中追加一个空元素（子元素）并且设置他clear：both

其他属性

visibility属性和display

display：none ：隐藏元素
visibility（显示/隐藏的）取值：

1. visible ：默认的可见的
2. hidden ：隐藏 依然占据页面空间
3. collapse ：使用在表格元素上 删除一行和一列的时候不影响表格的整体布局

diplay 和 visibility 区别在哪儿

1. display：none
   不占有之前的位置 脱离了文档流
2. visibility
   占有之前的位置，不脱离文档流导致空间依然存在

opacity属性

作用：改变元素的透明度
取值：0.0-1 0 全透明 1 不透明

改变光标的属性

属性 cursor
取值：

1. default：默认的
2. pointer：小手
3. crosshair：+
4. text：文本 I
5. wait：等待
6. help：帮助