HTMl+CSS

HTML+CSS

待学习问题

inline-block存在间距

ul 是块级元素可以定义宽和高 ,li表示行排列不能单独使用，需要在ul和ol里面，配合使用。

文档流

• 注意事项:

  参考网站: https://blog.csdn.net/qq_41665356/article/details/80240757

  脱离文档流时不占据空间

• 显示

  代码	文档流
  position:absolute	绝对定位
  position:fixed	固定定位
  float:left/right	浮动
  display:none;

基础知识

• float

  float向一侧浮动时,div的大小如果不够不会继续浮动而是显示在下一行

• div

  默认的overflow: visible;内容多的时候会被拉扯大(float是一种特殊情况);

• position

  参考文档: https://blog.csdn.net/hejisan/article/details/52514164

  1. static:默认定位

  ​ （默认不书写,当要脱离父类定位方式时书写;）

  2. relative:相对定位

  ​ 参照原始的位置(static)进行位移

  3. absolute:绝对定位(脱离文档流)
  • 当父类定义了relative(相对定位)时,以父类为参照(此时不脱离父类流)
  • 当没有父级元素时参照body
  4. fixed:固定定位(脱离文档流)

  ​ 参照文档

  5. flaot:浮动定位(脱离文档流)

form表单

1. imput

• 详细类型

  代码	类型	注意事项
  text	文本域
  password	密码域
  button	按钮
  submit	提交
  file	文件
  rest	重置
  hidden	隐藏域
  radio	单选按钮	1.同一信息name相同2.默认选项:checked
  checkbox	复选按钮	1.同一信息name相同
  textarea	多行文本	1.rows高度/cols宽度

• 表单属性

  代码	属性	注意事项
  name	名称	用于提交表单
  id	选项	用于js
  value	默认值
  maxlength	输入最大长度
  placeholder	提示
  checked	默认选项	用于单/复选按钮
  multiple	上传多选	用于file

2. select

select欠缺的属性用option来补齐

• 案例

  <select>
      <option value="x">x</option><!--默认显示-->
      <option value="">y</option><!--value值默认为<option>标签内的值-->
      <option value="z">z</option>
  </select>
  

• select属性

  代码	属性
  name	名称
  id	id
  size	可显示数量

• option属性

  代码	属性
  value	form表单提交值
  selected	默认显示选项