前端 CSS

1. 内容回顾
1. 课前面试题
列表的内置方法：sort()，可以通过key指定排序的依据
2. 昨日内容(鞠营营)
1. HTML
1. HTML结构
2. 标签
1. 块儿级标签
h1~h6
p
div
hr
ol>li
ul>li
table>tr
2. 内联标签/行内标签
a
span
input
img
b、i、u、s
3. 标签的嵌套规则
1. 标签之间可以嵌套（块儿级标签可以包内联标签）
2. p标签不能包p标签和div标签
4. 获取用户输入的那些标签
1. form标签不是from 埋下伏笔
1. action --> 控制往哪里提交数据
2. method --> get/post,HTTP请求的两种方法
3. enctype --> 当form表单中有文件类型的数据需要上传时
multipart/form-data
2. input
1. type类型有很多
1. text
- placeholder设置提示语
2. password
3. date
4. email
- 通过value属性设置输入框的默认值！


5. checkbox
6. radio
- 通过value属性设置value
- 通过checked属性设置默认选中

7. submit --> 提交
8. button --> 普通按钮，多用js代码去绑定事件
9. reset --> 将当前form表单中的输入内容重置

10. file
2. name属性
指定form表单提交数据时的key，用户填写的是value

3. select
- multiple=multiple --> 简写 multiple
- 内部包含option
- 设置value属性
- 通过selected属性设置默认选中
- 分组的select
optgroup
4. textarea
- cols=列数
- rows=行数
- name属性
5. label
多用于和输入框搭配使用
两种绑定方式
1. label包起来
2. 通过for=id值

2. 今日内容
https://www.cnblogs.com/liwenzhou/p/7999532.html

1. CSS语法
选择器 {属性1:值1;属性2:值2;}
2. CSS导入方式
1. 直接将样式写在标签内部的style属性
2. 在head标签中写style标签
3. 将样式写在单独的css文件中，通过link标签的href属性导入（项目中多用这种）
3. CSS选择器 ***** jQuery选择器类似
1. 基本选择器
2. 组合选择器
3. 属性选择器
4. 分组和嵌套
5. 伪类和伪元素
4. CSS选择器的优先级 *****
1. 选择器相同
下面的优先级越高，覆盖
2. 选择器不同
不同的选择器的优先级不一样
内联(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承的(0)

2. CSS属性
1. 高和宽
只有块儿级标签才能设置宽和高
2. 字体属性
1. 用什么字体
2. 字体大小
3. 字体粗细
4. 字体颜色
5. 文字装饰效果
6. 文字对齐
7. 文字缩进

永远不要高估自己！
只要思想不滑坡，方法总比问题多！
听人劝，吃饱饭！

 

1. 内容回顾
1. 今日面试题
2. CSS
1. CSS语法
选择器 {属性1：值1;...;}
2. CSS导入方式
1. 行内样式-->把css样式写到标签的style属性里
2. style标签中定义
3. 写在单独的css文件中，通过link标签导入
3. CSS选择器
1. 基本选择器
1. ID选择器 --> HTML标签都有唯一的ID
2. 类选择器 --> HTML标签可以设置class属性
3. 标签选择器 --> 大范围使用
4. 通用选择器 *
2. 组合选择器
1. div p 后代选择器
2. div>p 儿子选择器
3. div+p 毗邻选择器
4. div~p 弟弟选择器
3. 分组和嵌套（全班都没想起来的）
div, p {}
div.c1 {}
4. 属性选择器
1. div[s14] 找到有s14这个属性的div标签
2. input[type='email'] 找到type是email的input标签
5. 伪类选择器
1. :hover --> 鼠标移动到标签上时应用的样式
2. :focus --> input标签获取焦点时应用的样式
6. 伪元素选择器
p:before { --> 在P标签内部的最前面追加一个内容
content: "*";
color: red;
}
p:after { --> 在P标签内部的最后面追加一个内容

}
清除浮动：
.clearfix:after{
content: "";
clear: both;
display: block;
}
4. CSS选择器的优先级
1. 样式名一样的话
类似 变量覆盖 最后加载的那个样式生效
2. 样式名不一样
根据 权重计算
内联样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承(0)
3. 不讲道理的
!important
5. CSS属性
1. 文字属性相关
1. font-family: "字体1", "字体2",
2. font-size 字体大小
3. font-weight 字体粗细
4. color 字体颜色
1. 英文的颜色名 red
2. 16进制颜色代码 #FF0000
3. RGB rgb(255, 0, 0)
4. rgba(255, 0, 0, 0.4)
2. 宽和高
1. width 宽
2. height 高
只有块儿级标签设置宽和高才有效
3. 背景
background

background-color: red
background-image: url(...)
4. 文本样式
1. 水平居中
text-align: center
2. 单行文本的垂直居中
line-height=父标签的高度
3. 文本装饰线
text-decoration: none/under-line/over-line/line-through
5. CSS盒子模型
内容-->padding-->border-->margin
6. 浮动
float: left/right
浮动的副作用
7. 定位
1. 相对定位 --> 相对自己原来在的位置做定位
2. 绝对定位 --> 相对自己已经定位过的祖先标签
3. 固定定位 --> 相对于屏幕做定位
8. 溢出
overflow: hidden/scroll/auto
9. 边框
border: 1px solid red;
border-radius: 50%
10. display
1. block
2. inline
3. inline-block
4. none