CSS基础知识

移动web 手机屏幕参数及常识 1.宽 高 描述的是手机屏幕的宽度和高度 单位 是 英寸 对角线 平时我们讨论的手机尺寸， 包括电脑尺寸 ，其实都是以屏幕的对角线来衡量的 单位 英寸 2.逻辑分辨率

flex弹性布局 伸缩/弹性布局： display：flex 有效避免浮动布局中脱离文档流现象发生. 1.伸缩容器 display：flex 所在的那个盒子为伸缩容器/父项； 2.伸缩项 伸缩容器内的

2D平面转换 目标：使用transform属性实现元素的位移、旋转、缩放等效果 平面转换 Ø 改变盒子在平面内的形态（位移、旋转、缩放） Ø 2D转换 1，translate(位移) 目标：使用tra

定位相关 定位的常见应用场景: 1,可以解决盒子与盒子之间的层叠问题,定位之后的元素层级最高，可以层叠在其他盒子上面 2,可以让盒子始终固定在屏幕中的某个位置 属性名：position 属性值: re

盒子模型 盒子的概念： 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局 组成： CSS 中规定每个盒子分别由：**内容区域（content）、内边距区域（padding）

背景相关属性background 1, 背景颜色; ​ 属性名：background-color（bgc） ​ 颜色取值：关键字（red）、rgb表示法( 255,255,255 )、rgba表示法(

css选择器 css定义:层叠样式表 类型： 1,内嵌式; 2,行内式; 3,外链式; 1，标签选择器 作用：根据指定的标签，在当前界面中找到所有该名称的标签，然后设置属性： ​ 格式“ ​ 标签名称

文本属性: 1,text-indent ​ 作用: 设置文本缩进 ​ 格式: text-indent: 2em; ​ 取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度 2,text-

文字相关属性 1，文字属性 1,font-style ​ 作用: 规定文字样式 ​ 格式: font-style: italic; ​ 取值: ​ normal ： 正常的， 默认就是正常的 ​ it

1，没有语义的布局标签 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签 **div标签：**一行只显示一个（独占一行） **span标签：**一行可以显示多个, 2，常见

二,input系列按钮标签: 场景：在网页中显示不同功能的按钮表单控件 1,form标签 表单域 ​ 如果需要实现以上按钮功能，需要配合form标签使用 ​ form使用方法：用form标签把表单标签

表单标签 1，什么是表单？ 表单就是专门用来收集用户信息的； 2，表单元素？ 元素也就是标签，浏览器中的表单标签都有特殊的外观和默认的功能； 3，格式： 4,input标签，里面有一个type属性，这

表格标签 嵌套关系: table>th>td>tr tr 一对tr代表表格中的一行 可用于包含多个td; td 一对td代表一行表格中的一个单元格,可用于包裹内容; 应用场景: 在网页中以行+列的单元

CSS列表标签 无序列表 ​ 在网页之中表示一组无顺序之分的列表 ​ 应用场景：如新闻列表,商品列表,导航条； 注意事项: ​ 1,ul标签中只允许包含li标签; ​ 2,li标签可以包含任意内容;