02-web前端初始-CSS

• float语法介绍
  语法：float:none/left/right;

float:定义网页中其它文本如何环绕该元素显示
  浮动的目的：就是让竖着的东西横着来
     有三个取值：
      	left:元素活动浮动在文本左面
    	right:元素浮动在右面
   		 none:默认值，不浮动

• font-size:文字大小问题

1、谷歌浏览器默认支持的字体大小是12px;如果小于12px以12px进行显示
 2、浏览器默认字体大小是16px
	单位：
	1、像素px---相对单位----实际中使用中px是最多的
	2、pt 点---绝对单位 ----打印的时候使用它最多  9pt = 12px  9/12  3/4  0.75
	3、em 相对单位---相对于当前容器文本字体大小的单位   默认情况下 16px=1em
首行缩进：text-indent:2em;   缩进两个字符
字间距：letter-spacing

• color:文字颜色

属性值：英文单词、十六进、rgb()----red、green、blue 计算机三原色
rgba(); 多了一个值，透明度

• font-family:字体样式

说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
   当字体是中文字体时，需加双引号；
   当英文字体中有空格时，需加双引号如（“Times New Roman”）
   当英文字体只有一个单词组成是不加双引号；如：（Arial）；
   Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.
    注意点：相同字体大小的文本，如果字体不同的话，最终在浏览器上面呈现的效果会不一样
font-weight:bolder;更粗些
font-style:italic/oblique/normal（）  文字倾斜
text-align:justify;   两端对齐
text-decoration:underline; 下划线
text-decoration:overline;  上划线
text-decoration:line-through;  删除线

list-style-type:none;相当于list-style:none;
list-style-type:none;列表符号类型
list-style-image;url();列表图片
list-style-position:inside/outside;列表图片的位置 outside外面 默认值  inside 里面

background-arrachment:fixed;背景图默认   scroll 默认值 滚动条滚动
位图---自然图
矢量图---高清图

border缩写形式
border-left/right/top/bottom
分写形式：border-width   border-style    border-color

3、关于流 — 所谓的流其实就是一种规则
1、什么是标准流（文档流）？就是网页正常的排版顺序
2、元素类型：
a、块级元素 特点：独占一行，可以设置宽和高，自上而下排列的
b、内联（行内）元素 特点: 横向排列的，不能设置宽和高
c、内联（行内）块元素 特点：横向排列的，可以设置宽和高
3、什么是浮动流？就是设置了float属性的元素，成为浮动流 — 改变了原有的规则 — 标准流
a、浮动流产生的目的是什么？解决块级元素横向排列的问题
c、两个div，第一个浮动了，第二个没有设置浮动，这个时候浮动了元素会把没有浮动的元素给覆盖
原因：第一个div成为浮动流，脱离文档流了，不在遵循之前标准流的规则了，成为浮动流后相当于是"漂浮"在标准流之上的，原先的位置发生了改变，所以看起来覆盖了
d、两个div，第二个设置了浮动，第一个没有设置浮动，这个时候它们的位置不会发生变化
原因：第一个div属于标准流，所以位置依旧在没有发生过改变的，第二个div位置改变了影响的是它的下一个元素
e、两个div，都进行了浮动，如果容器的宽度不够的时候，第二个元素依旧会被挤到第二行去
f、文本环绕现象 — 围字现象
内联元素如果浮动了，就可以设置宽和高了