表单

<!--默认是提交,下面一个为普通按钮 -->
<button></button>
<button type="button"></button>

<!-- 限制长度 -->
<input type="text" maxlength="11" placeholder="占位符" />
<!-- 标准写法 -->
<input type="checkbox" checked="checked" />

<!-- 下拉列表 -->
<!-- 多选 -->
<select multiple="multiple">
  <!-- 标准写法 -->
  <option selected="selected">1</option>
  <option selected="selected">2</option>
</select>

<!-- 单选框 单选关联-->
<input type="radio" name="sex" checked id="male" />
<label form="male">男</label>
<!-- 同 label选中的任何东西都是关联在一起的-->
<label>
  <input type="radio" name="sex" checked />
  <span>男</span>
</label>
<input type="radio" name="sex" />
<label>女</label>

<!-- 文本域 -->
<textarea cols="30列" rows="10行" placeholder="请输入"> </textarea>

<!-- 选文字选中 -->
<label>
  <input type="checkbox" />
  <span>选中</span>
</label>

<!-- 重置 (重置是不刷新页面的) -->

<button type="reset"></button>

页面 css

. {
  /* 元素内部的元素居中 */
  text-align: center;
}

.text {
  /* 输入框样式 */
  /* 外边框outline不占盒模型，浏览器文本框聚焦会默认会给一个outline */
  outline: none;
  /* 输入框本身 */
  border: 1px solid #ccc;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  /* 输入框字体大小 */
  font-size: 14px;
  /* 内容与左右两边间隙 */
  padding: 0 10px;
  /* 首行缩进和上面效果差不多 */
  text-indent: 10px;
}

/* 聚焦的样式 */
.text:focus {
  border-color: #5f8be8;
}

select.txt {
  height: 100px;
  padding: 10px;
}
textarea.txt {
  height: 100px;
  padding: 10px;
  /* 设置多行文本框是否被用户改变尺寸 */
  /* vertical 只能在垂直方向改变，horizontal 只能水平改变尺寸 both默认值水平和垂直都可以 */
  resize: none;
}

button {
  height: 40px;
  width: 150px;
  border: none;
  /* 按钮聚焦还是会有外边框 */
  outline: none;
  background: #5f8be8;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  /* 按钮移上去一般变淡一点 */
  background: #759ae9;

  /* 按钮禁用状态 */
  /* <button disabled ></button>  */
}
button:disabled {
  background: #9db7f0;
  /* 鼠标移上去不能点的标识 */
  cursor: not-allowed;
}

.clearboth::after {
  content: "";
  display: block;
  clear: both;
}

/* 行盒行块盒上下居中
  相邻几个行盒行块盒
*/
. {
  /* vertical-align: middle; */
  vertical-align: 2px;
}

/* 单选 多选 */
/* ~找出后面的兄弟 */
/* +只会选中下一个兄弟元素 */
label input ~ span {
  color: #aaa;
}
/* 单选或多选被选中的状态 */
label input:checked ~ span {
  color: #333;
}

input::placeholder {
  /* 提示文本的样式 */
}
/* 聚焦的时候改变placeholder */
.text:focus::placeholder {
}

精灵图

.item {
  width: 85px;
  height: 85px;
  /* 用来调试 */
  outline: 1px solid;
  /* background-position可以直接写 repeat后面 */
  background: url(./img/sprit.png) no-repeat;
  background-position: -180px -240px;
}

绝对定位

什么时候使用绝对定位

• 元素出现在一个天马行空的位置
• 元素是否存在，不影响页面
• 单个元素在某一个区域内水平垂直居中

fixed 和 absolute 的区别

fixed 是绝对定位的一种特殊情况，他们参考系不一样

• absolute 参考有定位的父元素
• fixed 参考视口（viewport）

<div class="modal">
  <div class="login"></div>
</div>

<style>
  .modal {
    position: fixed;
    background: rgba(0, 0, 0, 0, 5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .login {
    position: absolute;
    /* 绝对定位居中 */
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

• 绝对定位/浮动的元素宽高是自动的，如果不是绝对定位的 div 那么宽是撑满的

属性值的计算过程

略

伪类选择器

• :link 选中未访问过的超链接
• :visited 选中已访问过的超链接
• :hover 选中鼠标移入的元素
• :active 选中鼠标按下的元素
• :focus 选中聚焦的表单元素
• :disabled 选中被禁用 的表单元素
• :checked 选中被选中的表单元素
• :first-child 选中第一个子元素 p:first-child 是 p 元素同时是同级元素里是第一个子元素，如果第一个子元素不是 p 那么不会选中
• :last-child 选中最后一个子元素
• :nth-child(an+b) 选中第【an+b】个子元素 a 和 b 是常量 n 的值会从 0 开始依次递增
• :first-of-type 选中第一个指定类型的子元素（指定类型的第一个）
• :nth-of-type(an+b) 选中第 an+b 个指定类型的子元素 a 和 b 是常量，n 的值会从 0 开始一次递增

书写顺序

lvha

a:link {
}
a:visited {
}
a:hover {
}
/* 按下的样式优先生效  */
a:active {
}

contenteditable 属性可让 div 书写内容

• 该属性可以设置在任何元素上，他可以让该元素变为可编辑的状态，在实际开发中，通常用于制作富文本框

table 元素

• 会导致浏览器渲染效率太低