css

• 1. css(cascacing style sheet)层叠样式表
• 2. css语法
• 3. 块元素和行内元素
• 4. 选择器:CSS寻找实现效果的目标元素的工具（核心）
• 5. CSS的样式、属性：属性值
• 6. 盒子模型
• 7. 获取元素的绝对位置
• 8. 使用div+css的步骤构建页面的步骤（个人看法）
• 9. 浮动

1. css(cascacing style sheet)层叠样式表

• 它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
• 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高度、边框样式、边距等）以及版面的布局等外观显示样式，就是使html页面更好看。
• 样式：给HTML标签添加需要显示的效果，通常存储在样式表中
• 层叠：使用不同的添加方式給同一个HTML标签添加样式，最后所有的样式叠在一起共同作用于该标签

2. css语法

选择器{//选择器区分大小写
	属性1：属性值;//属性和属性值不区分大小写，
	属性2：属性值;//如果属性值中间由多个单词组成且中间包含空格，则必须为这个属性值加上英文双引号
	/*css注释*/快捷键ctrl+/
	..
}

3. 块元素和行内元素

分类	说明
div	html块级标签，进行区域划分，独自占一行，后来加上的东西只能拎起一行
span	html标签行内元素，默认所有的在一行，span后面加的东西可以和它同一行，无高度宽度

4. 选择器:CSS寻找实现效果的目标元素的工具（核心）

选择器分类	语法	说明
id选择器	#id{}	对一个元素单独设置样式一个 id 只可以作用于一个标签上面，一个标签也只有一个 id 名。
类选择器	.class{}	对一个元素定义单独样式或对多个元素设置相同的样式
		类选择器与id选择器在命名只能是英文字母、数字、连接符(-)、下划线(_)，
		数字不能打头。(连接符、下划线打头后面需要跟字母)
		一个类名可作用于多个标签上面，一个标签也可有多个类名(多个类名用空格隔开)
元素选择器	html标签名{}	对同类型的html标签设置相同样式
层级（包含）选择器	父元素 子元素	如：div p
属性选择器	基本选择器[属性=‘属性值’]	如：input[type='text']

5. CSS的样式、属性：属性值

CSS常见样式	说明
border	边界 1px solid black; solid实线、none无边、double双线
	border-top-style、border-right-style、border-bottom-style、border-left-style
width	宽度 10px
height	高度 10px
float	浮动 left/right/none;
clear	清除浮动 left/right/both 浮动不再占用原文档流的位置
display	block块标签，以区域的方式出现，每个标签独自占据一整行或多整行。a,span
	inline行内元素，不必再新的一行开始，不强迫其他元素在新一行显示hn,div,ul,ol，无高度宽度
	inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递
	none,不显示不占用页面空间
margin	外边距auto;页面居中
	margin-top、margin-right、margin-bottom、margin-left
padding	内边距 padding:10px 0.25em 2ex 20%;按上右下左的顺序设置各边的内边距，可为像素百分比等不同单位
	padding-top、padding-right、padding-bottom、padding-left
font-style	italic(斜体)、normal(正常的);
font-size	30px;
font-family	"楷体";
color	字体颜色没有font-color属性！！！！
	(1)(英文单词)red;(2)十六进制数字， color：#FF00FF
	(3)rgb 表示rgb(0,0,0)，三个值红、绿、蓝，每个取值都是 0-255 或者百分比
font-weight	数字(100-900 的整百数值)、bold加粗，bolder 比加粗更粗，lighter 细线)
text-align	center 内容（包括图片文字）居中
text-decoration	none 超链接的下划线去掉
background-color	背景颜色 red
background-image	背景图片 url(../aaa/bbb/love.jpg);
Background-repeat	是否平铺 repeat-X:在水平方向进行平铺
Background-position	center
transform	translateX(10px);translateX(100%/-100%);将整个div移到当前位置的最右/左
opacity	不透明度opacity:1;//默认1，不透明,透明0，看不见
overflow	overflow-x:hidden;超出大小是否显示滚动条
transition	ll 0.8s ease;//渐变
position:absolute;	生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位

引入CSS样式方法	说明
行内引入	<div style="font-size: 20px;"> 没有做到结构与显示分离，耦合性大，少用
内部引入	<style type="text/css"></style>//在head标签之间,无法重用于其他页面
外部引入	<link rel="stylesheet" href="" type="text/css"/>//在head标签之间,结构与显示分离
优先级	理论上：行内>内嵌>链接 + 就近原则

6. 盒子模型

f6.png

• padding和margin修改注意总尺寸变化
  |定位分类|说明|
  |:-😐 :-: |
  |相对定位|position: relative;left: 30px;top: 20px;调整元素出现在原位置的相对位置，占据空间|
  |绝对定位|position: absolute;left: 30px;top: 20px;与文档流无关，不占据空间，相对于祖先元素定位|
  |浮动|向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止,不在文档的普通流|

7. 获取元素的绝对位置

• const Position=document.getElement.getBoundingClientRect();返回的是一个包含绝对位置的像素值Position.left,top,right,bottom

8. 使用div+css的步骤构建页面的步骤（个人看法）

• 1、先分析网页由多少个div组成
• 2、根据具体div设置相应选择器及样式width、height、border必写，根据F12的开发人员工具来完成以上问题的设置
• 3、最后慢慢调整间隙，注意浮动的妙用。

9. 浮动

• 由于浮动框不在文档的普通流中，文档的普通流中的块框就像浮动框不存在一样
• 浮动的框可能覆盖不浮动（文档流）框，
  
  浮动框碰到浮动框按顺序排列，
  
  如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。
  
  如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
  
  清除浮动