html/css 小知识

<del>删除线</del>
<ins>下划线</ins>

alt 替换文本(图像显示不出的时候文字替换)
title 鼠标放到图像上的提示文字
a标签的target 默认_self , 当前窗口打开页面. _blank新窗口打开页面
锚点链接: <a href="#yyy">xxx</a> 点击xxx的时候 会跳转到 id="yyy"的所在标签的位置

<ul>
  <li>无需标签</li>
</ul>
<ol>
  <li>有序标签</li>
</ol>
自定义标签
<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>联系我们</dd>
</dl>

label 绑定id=username的input标签,点击label标签的时候焦点会自动到input标签,等于是一体的

<label for="username" > aaa </label>  
  <input maxlength="字符串的最大长度" id="username" />

<div class="class"></div>
<style>
.class{
  text-decoration:line-through
  /*装饰线, none 没有, underline 下划线, overline 上划线 不用, line-through 删除线 不常用*/
  text-indent: 20px; /*或者是2em(em表示当前元素的一个的距离)*/ 
  line-height: 行高;
}
</style>

<a href="#">a标签转换成块级元素 显示转换成块级元素</a>
<style>
  a{
    display: block; /*a标签转换成块级元素 显示转换成块级元素  此时可以设置宽和高 */
    display: inline; /*将块级元素 转换成行内元素 ,行内元素不能设置宽高*/
    display: inline-blockin;/* 行内块级元素 可以设置 宽高*/
    background-attachment: fixed;/*将背景图片固定住*/
    background: rgba(0, 0, 0, 0.3);/* 背景色透明度 0-1之间 0.3 可以省略成.3*/
  } 
  </style>

块级元素 设置width auto 可以设置水平居中
text-align:center 行内元素以及行内块元素水平居中
网页默认的是竖着排列的(div等块级元素都是独占一行 竖着排列)

浮动 横着排列
float : none/left/right 不浮动/左浮动/有浮动
定义:创建浮动框,将其移动到一边,直到左边缘或者右边缘 触及 包含快或者另一个浮动框的边缘
1,浮动的盒子 不再保留原来的位置
2,浮动的盒子 上端对齐
3,浮动的盒子 具有行内块的属性, 可以设置宽 高

先标准流的上下布局, 再 行内元素 布局

给父元素添加 overflow: hidden 清除浮动 当一个父容器中有浮动盒子元素b, 父容器a并没有定义高度,浮动盒子有一定的高度
此时,父容器的高度会默认为0,而子元素的浮动盒子不占用原先的位置, 导致如果有其他盒子c(父容器之外) 则会按标准流排列
对齐父容器的底部 ,此时c 会在b 的下方 导致盒子重叠, 此时使用清除浮动 来使c向下移动至b的下端对齐, 而a的高度随着b的高度而改变(a的高度等于b的高度)

---

定位
relative 占有位置 相对于自身位置移动
absolute 不占有位置 带有定位的父级
fixed 不占有位置 浏览区可视区

vertical-align: top/center/bottom 顶部/垂直居中/底部对齐 添加给图片的话 则图片地测不会有空白

单行文本溢出显示省略号

1, white-space:nowrap 先强制一行内显示文本(默认normal 自动换行)
2, overflow: hidden   超出本分隐藏
3, text-overflow: ellipsis 文字用省略号代替超出的部分