CSS常见应用（文字和文本样式，背景和列表样式，position定位，float浮动，盒子模型）

我们使用CSS最常用，和容易混淆的有文字和文本样式，背景和列表样式，position定位，float浮动，盒子模型~~下文详细整理了这些内容的知识点

1.文字和文本样式

（1）常用CSS文字样式

• 字体：font-family
• 文字大小：font-size
• 文字颜色：font-color
• 文字粗细：font-weight
• 文字样式：font-style

（2）常用CSS文本样式

• text-align: left|right|center|justify 设置元素内文本水平对齐方式（该属性对块级元素设置有效）
• line-height: 长度值|百分比 设置元素中文本行高（行高指文本行的基线间的距离）
• vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom 设置元素的内容的垂直方式
  文本样式属性：

字体属性	说明
word-spacing	设置元素内单词之间的间距
letter-spacing	设置元素内字母之间的间距
text-transform	设置元素内文本的大小写 (capitalize uppercase lowercase none)
text-decoration	设置元素内文本的装饰 (underline overline line-throught blink none)

2.CSS背景和列表

（1）背景样式

• background-color：颜色值 设置元素的背景颜色（注意：背景区包括内容、内边距（padding）和边框、不包括外边距（margin））
• background-image 把图像设置为背景
• background-position 设置背景图像的起始位置
  background-position的参数

值	说明	注意
长度值（x y）	第一个值水平位置，第二个值垂直位置左上角 0 0	只写一个参数的话，第二个默认为居中
百分比（x% y%）	第一个值水平位置，第二个值垂直位置左上角 0% 0%	只写一个参数的话，第二个默认为居中
top	顶部显示，相当于垂直方向0	只写一个参数的话，第二个默认为居中
right	右边显示，相当于水平方向100%	只写一个参数的话，第二个默认为居中
left	左边显示，相当于水平方向0	只写一个参数的话，第二个默认为居中
bottom	底部显示，相当于垂直方向100%	只写一个参数的话，第二个默认为居中
center	居中显示，相当于垂直方向50%水平方向50%	水平垂直方向都居中

• background-attachment:scroll 、 fixed 背景图像是否固定或者随着页面的其余部分滚动
  说明：
  scroll: 默认值，图片随滚动条滚动
  fixed: 当页面的其余部分滚动时，背景图片不会移动
• background-repeat：repeat | no-repeat | repeat-x | repeat-y设置背景图像是否重复及如何重复
• background 简写属性，作用是将背景属性设置在一个声明中

（2）列表样式

• list-style-type 设置列表项标志的类型
  
• list-style-image：URL | none 将图像设置为列表项标志
• list-style-position:inside | outside 设置列表中列表项标志的位置
  说明
  inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
  outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
• list-style 简写属性，用于把所有列表的属性设置于一个声明中

3.CSS浮动–float

首先，我们了解一下CSS的定位机制：普通流，浮动，绝对定位

• 普通流（标准流）：默认状态，元素自动从左往右，从上往下的排列。
  块元素：（div p h1~h6 ul ol li dl dt dd）
  1.独占一行
  2.可以设置宽、高
  3.如果不设置宽度，宽度默认为容器的100%
  行内元素：（span a b i u em …）
  1.与其他元素同行显示
  2.不可以设置宽、高
  3.宽高就是文字或图片的宽高
• Float （浮动）
  1.会使元素向左或向右移动，只能左右，不能上下
  2.浮动元素碰到包含框或另一个浮动框，浮动停止
  3.浮动元素之后的元素将围绕它，之前的不受影响
  4.浮动元素会脱离标准流
  浮动的基本语法
  float：left 靠左浮动
  float：right 靠右浮动
  float：none 不适用浮动
  使用浮动后可能产生的问题
  元素使用浮动后会脱离普通流
  浮动溢出
  清除浮动
  清除浮动语法：
  clear：none | left | right | both
  清除浮动的常用方法
  方法一：在浮动元素后使用一个空元素
  例如：<div class="clear"></div>
  方法二：给浮动元素的容器添加overflow：hidden
  方法三：使用CSS3的：after伪元素

.clearfix:after{
	content:".";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}

4.盒子模型

（1）网页中的盒子模型

（2）盒子模型中的属性

• 宽度属性
  宽度：width：长度值 | 百分比 | auto
  最大宽度： max-width：长度值 | 百分比 | auto
  最小宽度：min-width:长度值 | 百分比 | auto
• 高度属性
  高度：height：长度值 | 百分比 | auto
  最大宽度：max-width：长度值 | 百分比 | auto
  最小宽度：min-height：长度值 | 百分比 | auto
• 边框属性
  边框宽度：border-width：thin | medium | thick |长度值
  边框颜色：border-color：颜色值
  边框样式：border-style：值 | none | hidden
  可以用left right top bottom 来表示边框的方向并设定属性值 ； 如：border-left-color(设置左边框的颜色)
  边框属性设置缩写： border：【宽度】 | 【样式】 | 【颜色】
• 内边距属性
• 外边距属性
  边距属性缩写的值对应的方向图
  

（3）display属性

• inline : 元素将显示为内联元素，元素前后没有换行符
• block ：元素将显示为块级元素，元素前后会带有换行符
• inline-block : 行内块元素，元素呈现为inline,具有block的特征
• none 此元素不会被显示

（4）样式继承关系

5.CSS中的定位模型–position

使用定位模型来达到布局的目的

（1）position之static 自然模型

（2）position之relative 相对定位模型

（3）position之absolute 绝对定位模型

（4）position之fixed 固定定位模型

（5）position之sticky 磁贴定位模型

position 总结：