CSS（中）

6.尺寸+颜色-单位

尺寸：
	1）绝对单位
		Px
	2）相对单位
		百分比
		1em~1个M的宽度（16px）
颜色：
	1.关键字
		red  blue
	2.rgb(r，g，b)
		r：red
		g：green
		b：blue
		0-255
	3.rgba(r，g，b，a)
		a：apcaity透明度
		0-1：
		0：完全透明
		1：完全不透明
	4.16进制颜色值
		#
		#ff0000
		#fff：白色
		#ccc：灰色
		
	font-family：" "
	@font-face {
         font-family: 'myfont';
          src: url('myfont');
     }

7.文本样式

color:

	c:/winodws/Fonts

web-font：

	网络字体
	1）下载字体文件
	2）声明字体
		安装
	3）引用
div{
            color: rgb(0, 255, 25);
            font-family: "方正舒体","宋体","微软雅黑";
            font-size: 30px;
            font-family: 'myfont';
}

<div>
    hello,哈利.波特
    <span class="fa fa-gift mytext fa-5x">
    </span>
</div>

字体图标：

1.font-awesome
	1）下载框架压缩包
	2）在HTML中引入外部css文件
	3）在行内元素上，设置class="fa fa-xxx"
 @font-face {
        font-family: 'myfont';
        src: url('./fonts/Glascow.otf');
}
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">

<span class="fa fa-gift mytext fa-5x">
		

2.icon-font
	1）下载压缩包
	2）在HTML中引入外部css文件
	3）在行内元素上，设置class='iconfont xxxx'
<link rel="stylesheet" href="./iconfont/iconfont.css">

<span class="iconfont icon-bad"></span> 
<span class="iconfont icon-chart-pie"></span>

倾斜：

		 font-style: italic;

字体加粗：

	         font-weight: lighter;  /*100-900之间的数字*/

文本居中：

	         text-align: center;

字体样式（大小写）：

		text-transform: capitalize;

文本修饰（上下划线/删除线）：

		a{
		       text-decoration: none;
		}

文本阴影：

		p{
			text-shadow: 10px 10px 10px #cccccc;
			//向右下投射阴影，相反的方向用复数
		}

letter-spacing：

增加或减少字符间的空白（字符间距）

word-spacing：

增加或减少字与字之间的空白

width：

min-width：
max-width：

overflow：

	设置超出元素部分的展示形式
	overflow: hidden;      //超出部分隐藏
	overflow: scroll;       //超出部分在元素内部以滚动条的形式展示

元素的隐藏和显示：

	display：
		none：元素的隐藏
			不但隐藏元素本身，还会隐藏元素所占用的空间
		block：元素的显示
	visibility：
		hidden：元素的隐藏
			只隐藏元素，不隐藏元素所占用的空间
		visible：元素的显示
		div:nth-child(2){
            /* display: block; */
            visibility: hidden;
		}

表格样式：

table{
            border-collapse: collapse;    //表格边框合并
            caption-side: left;   // 表格标题位置
    }

列表样式：

li{
            /* list-style-type: decimal; */
            border: 1px solid skyblue;
            list-style-position: inside;
            height: 50px;
            text-align: center;      /* 块级元素不能使用 */
            line-height: 50px;
            /* list-style-image: url(./我喜欢的音乐.png); */
}

盒子：

	1）盒子的组成
		盒子=内容+内边距+边框+外边距
		
		盒子的高度=内容+内边距+边框
		盒子所占空间高度=内容+内边距+边框+外边距
	2）盒子分类
		a.标准盒子/w3c盒子
			默认是标准盒子
			特点：
				设置的宽高属性——》设置给元素的内容
				box-sizing：content-box；
		b.边框盒子/怪异盒子
			box-sizing：border-box；
			特点：
				宽高属性——》盒子：内容+内边距+边框
背景样式设置：
	background
边框样式设置：
	border

8.布局：

默认文档流：所有元素根据本身特性在浏览器页面中进行的排序
从上到下，从左到右

布局规则：
	新进行行级布局，再进行列级布局

a.display

	inline：将块级元素转换为行内元素
	block：将行内元素转换为块级元素
	inline-block：将元素转换为兼具行内和块级特性的元素（既可以设置宽高，又能在一行中显示）

b.浮动：

特点：
	**浮动元素不遮挡行内元素和文字
		
	脱离默认文档流，飘起来了
	浮动元素产生了浮动流
	（浮动流产生的效果）所有产生了浮动流的元素，块级元素看不到他们。
	产生了 bfc 的元素和文本类属性（带有 inline 属性就是文本类属性）的元素以及文本都能看到浮动元素。**
	
	float：
		none
		left
		right
		
	对元素的影响：
		1.如果浮动属性设置给块级元素
			块级元素可以在一行中显示，宽度由元素内容撑起
		2.如果浮动属性设置给行内元素
			行内元素可以设置宽高
	
	浮动何时停止？
		1.遇到父元素边框
		2.遇到其他浮动元素
	
		     article{
		            background-color: #cccccc;
		            overflow: hidden;
			}
		        div{
		            width: 100px;
		            height: 100px;
		            border: 1px solid red;
		            font-size: 30px;
		            margin: 10px;
		            float: left;
		        }
		
			<article>
			        <div>div1</div>
			        <div>div2</div>
			        <div>div3</div>
		        </article>

清除浮动：（块级元素）

	clear：
		left
		right
		both
	a.给浮动元素和非浮动元素之间添加一个块级元素
		clear
	b.给所有浮动元素的父元素设置
		::after{
			display：block；
			content：' ';
			clear：left/right/both
		}
selection既没有样式又是块级元素