Front-end day2

Posted 2020-08-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Front-end day2相关的知识，希望对你有一定的参考价值。

Front-end day1

通过上节作业总结：
1. 文本内容居中：text-align:center;
2. 内联标签默认有多大占多大，设置长、宽没有用，用display:inline-block; 将内联标签转为块级标签，再设置长款。
3. 每个标签默认都有自己的样式，我们要对标签样式设计，就要先把默认的样式去掉，用：margin:0; padding:0; 分别取消外边距、内边距。
4. 当有display:inline-block;的时候，默认堆叠，边距都有3px；解决办法：float:left
5. 改造标签：用拼接
6. 默认的img标签是由边距的，IE浏览器可以看出来；解决办法：border:0；
上节回顾：
1. 1. 头部信息：编码、title、style、link
  2. 身体包括：内联标签、块级标签、inline-block（前面两者都具有）
  3. a标签：属性：target、href
  4. img标签：src、alt（当图片没有刷出来，就显示alt定义的属性文字）
  5. iframe标签：嵌套网站，伪造ajax上传文件，src把某网站嵌套过来。
  6. form标签：
  7. html
    1. 1. 属性：action 提交到哪里
      2. 属性：method 提交方式
      3. 属性：enctype 上传文件必须加上此参数
      4. input标签：
      5. text：普通文件
      6. password：密码
      7. checkbox：复选框（name相同，value不同）
      8. radio：单选框（name相同实现互斥，value不同）
      9. button：按钮，无效果
      10. file ：上传文件
      11. submit：提交当前form表单
      12. reset：重置当前form表单
      13. select标签：连续放3个，三级联动
      14. textarea多行标签：多行文本操作
      15. 默认值（补充）
        单行文本默认值
        多行文本默认值
        标题分类默认值
        单选框默认值
        复选框默认值
  8. CSS
1. 1. 1. 存在形式：
      1. 标签属性
      2. 头部style块
      3. 其他文件导入
      4. 最牛的：color:red !important;（使所在优先级不管处于哪个位置都最大。）
    2. 寻找选择器
      1. 标签选择器
      2. class选择器
      3. id选择器
      4. 层级选择器
      5. 组合选择器
      6. 属性选择器（补充）
    3. 样式
      1. color、width、height
      2. 外部样式=w，w等于980px
      3. 定义宽度的时候想利用width=100% 必须在最外部定义一个宽度。
      4. 背景：background

background-color:red;

background-image:url("image.jpg");

透明度：两种方式

1. 1. 1. opacity:0.6;
    2. background:rgba(0,0,0,,6)

position:

1. 1. 1. fixed 固定窗口，相对整个窗口，窗口位置不移动；
      （应用对话框固定，返回顶部按钮）
    2. absolute 固定窗口，滚动窗口，窗口位置会移动；
    3. relative 默认单独无效果；
    4. relative+absolute定位定位，
    5. Z-index：调整优先级

边距