一文掌握css3所有常用属性

写在前面：本文只是记录了初学css3时常用的一些属性和使用方法。

网页应用css样式方法：
1.链接外部css样式表：
2.文档中嵌入css样式：head取中使用

理解css选择器：
基本选择器：
1.标记选择器：用于文档某个特定标记定义格式；为具有嵌套关
2.类选择器：点号开头，第一个字符不能使用数字
3.ID选择器：一个ID只能用一个元素，#开头，第一个字符非数字
4.伪类选择器：用冒号表示，用在选择器之后，表明在某种状态下才能
选中（lvha）
5.伪元素选择器：以双冒号或者单冒号开头，用于选择指定元素
复合选择器：由两个选择器直接构成，结果是选中两者各自作用范围的交集。
第一个必须是标记选择器，第二个必须是类选择器或id选择器
并集选择器：可对多个选择器进行集体声明，多个选择器之间用“，”隔开
通用选择器：*{css代码}
后代选择器：选择某元素的后代元素 例：ul li ol li{front-style:italic};
子代选择器：用于选择指定标记元素的第一代子元素，使用“>“相隔
相邻选择器：选择某个元素后面相邻的元素，使用”+"相隔
复合选择器优先级：行内样式>id选择器>类选择器>标记选择器

理解css层叠样式表：
层叠性是指当有多个选择器都作用于同一元素时，即多个选择器作用范围重叠

css字体和文本属性：
font-family：设置文本字体。其值可以是一组字体名。
font-style：设置文本显示的字形 normal\italic\oblique
font-weight:设置文本的粗细。取值可以是normal\bold\bolder\lighter
font-size: 设置文本字体大小，取值分为四种：绝对大小，相对大小。长度值，百分数
font： 复合属性，可以一次性设置各种属性，各属性值之间以空格分隔。
但是指定次序必须是font-style\font-weight\font-size\font-family 例：p{font;italic 200% serif}
letter-spacing: 设置字符的间距，取值可以是normal\数值，该属性多用于英文文本
text-transform：设置文本大小写，取值可以是none\capitalize\uppercase\lowercase
word-spacing: 设置单词之间的间距，取值可以是normal\数值
text-align：设置文本水平对齐方式，取值可以是left\right\center\justify
line-height: 设置行高（行距）。取值可以是字符的倍数，计量单位数值和百分比
text-indent：设置文本块首行的缩进
text-decoration：设置添加到文本的修饰效果

css背景和列表属性：
background-color：设置元素的背景颜色，默认值是transparent透明色
background-image：设置元素的背景图像，默认值可以是none\url
background-repeat： 设置是否重复图像及如何重复，
取值可以是repeat(默认值)\repeat-x\repeat-y\no-repeat
background-position：设置背景图像的起始位置，通常与background-image一起使用
background-attachment：设置背景图像是否固定或随内容一起滚动，scroll\fixed
background-size: 设置背景图像的尺寸 length| precentage| cover| contain
background-origin：将背景图像定位于某一区域 padding-box|border-box|content-box
padding-box：相对于内边距来定位 border-box：相对于边框盒 content-box：相对内容框

list-style-type：
list-style-position：设置列表标记的位置，取值可以是inside\outside\inherit
list-style-image： 设置图像为列表项目符合，取值可以是none\url

css边框和表格属性：
border：设置元素边框的宽度、样式和颜色，能同时设置4个边框的宽度、样式和颜色
border-left|right|top|bottom：分别设置左、右、上、下边框的宽度、样式和颜色
boder-style：设置边框的样式。
取值可以是：none、dotted（点线）、dashed（划线）、solid（实线）、double（双线）
border-width：设置边框的整体宽度按顺序 上、右、下、左边框的宽度。
取值可以是thin、medium、thick和长度数值
border-color：设置边框的颜色，按上、右、下、左设置各边的颜色
border-radius：为元素添加圆角边框（水平半径 值|% 【垂直半径 值|%】）

盒子模型：

一个元素盒子的宽度=左外边距+左边距+左内边距+内容宽度+右内边距+右边框+右外边距

	margin：外边距即盒子边框与其他盒子之间的距离。 按上右下左的顺序分别设置各边的外边距属性
	padding：内边距即盒子边框到内容之间的距离。
	marign合并：外边距合并是指两个垂直外边距相遇时将形成一个外边距
	
	**css流布局**
		float属性：设置标记内容浮动到页面边缘。取值为none（默认值）\left\right等
		clear属性：设置是否允许浮动元素在其旁边。取值为none（默认值）\left\right\both等
		left表示跳过左边的浮动元素，right表示跳过右边的浮动元素，both表示跳过所有的浮动元素
		height\width属性：设置标记内容的高度和宽度，取值为auto（默认值）\长度值\百分比
		position属性：设置元素在网页上的定位方式，取值为relative\absolute
		top\left\bottom\right属性：设置元素与其他元素之间的距离
		
		流布局的机制：
			流布局是默认布局方式。
			行内元素在同一行内从左到右并排排列，只有当浏览器容纳不下才会转到下一行
			块级元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。
			盒子与盒子、盒子与内容之间的距离由margin与padding属性决定
			行内元素和块级元素可以用display来相互转化。 display：block\inline
	**浮动布局：**
		float属性：设置标记内容浮动到页面边缘。取值为none（默认值）\left\right等
		float属性：定义某元素的浮动情况；
		浮动的盒子可以向左或向右移动，直到其外边缘碰到包含盒子或另一个浮动盒子的边框为止
		
		![在这里插入图片描述](https://img-blog.csdnimg.cn/20200524103403984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjIyNDAx,size_16,color_FFFFFF,t_70)