重点总结

重点总结

文本类

当文本溢出显示省略号
- 必备条件：必须设置固定宽度
- white-space：nowrap；让文本显示在一行
- overflow：hidden；溢出隐藏
- text-overflow：ellipsis；溢出隐藏用省略号显示
- 首行缩进text-indent：2em
- 字符间距letter-spacing: 16px;
- 字间距wod-spacing:2px
- 文本行高letter-height
- 字体颜色三种格式
- 英文字母名yellow
- 十六进制法
- #ff0000
- RGB法
- RGB（255，0，0）；
- 文本对齐方式text-align
- 常用left、center、right
- 文本装饰text-decoration
- 常用none（隐藏）、underline（下划线）、line-through（删除线）overline（顶部线）
- 文本溢出时
- overflow：hidden溢出隐藏
- auto超出显示滚动条
- scroll始终显示滚动条
- visible默认值

伪类选择器

• E：link默认样式
• E：hover鼠标悬停时的样式
• E：active鼠标点击时的样式
• E：visited鼠标点击后的样式
• 顺序：先设置点击后的样式再设置悬浮时和点击时的样式

为元素选择器

• input:enabled启用时的样式

表格table

• table
  
  • width: 100%;表格充满div
  • border-collapse: collapse;折叠消除表格间距
  • border: 10px solid white;复合属性，表格间距、颜色
    
    • border-left: none;隐藏表格左间距
    • border-right: none;隐藏表格右间距
  • tbody tr：nth-child（2n+1）奇数行显示odd

form表单

• labe标注input作用
  
  • 用for链接框（点击文字和按钮都起作用，可利用它做自定义按钮样式，把默认按钮样式隐藏就行）
• 输入类型input type=“ ”
  
  • text文本框
  • password密码框
  • radio单选按钮
    
    • checked是默认选择项
  • checkbox多选按钮
  • button可点击按钮
  • submit提交按钮
  • input:checked+label定义点击时出现的效果（自定义按钮样式）
  • value内容可标注提示作用
  • 男
    女
  • 名字相同属于同一题
  • textrea文本域
    
    • minlength最小长度
    • maxlength最大长度
  • select下拉框
    
    • option选项（selected默认显示项）

新增类型

<input type="number" step="3">新增数字
<input type="let">电话
<input type="email">邮件
<input type="tate">日期
<input type="search">搜索框
<input type="color">拾色器

自定义按钮样式

<style>
   input{
      display: none;
        }
   label{
      display: inline-block;
      width: 30px;
      height: 30px;
      background-color: #fff;
      border-radius: 50%;
      border: 10px solid #5b5c5c;
      box-shadow: 2px 2px 2px rgba(100,50,50,.8);
        }
  input:checked+label{
   background-color: #00A000;
   box-shadow: 2px 2px 2px rgba(50,50,50,.8) inset;
        }
</style>

<input id="mail" type="radio" checked name="sex">
<label for="mail"></label>
<input id="femali" type="radio" name="sex">
<label for="femali"></label>

自定义多选按钮样式

<style>
  label{
      display: inline-block;
      vertical-align: middle;
      width: 30px;
      height: 30px;
      border: 3px solid red;
      border-radius: 5px;
      }
        /*点击时出现的效果*/
      input:checked+label{
        border-color: yellow;
        background: url("gg.png")  top left no-repeat;
       background-size: 30px;
        }
       input{
          display: none;
        }
</style>

<h3>选择爱吃的水果</h3>
    <p>
        <input id="banana" type="checkbox" checked name="fruit">
        香蕉<label for="banana"></label>
    </p>
    <p>
        <input id="strawberry" type="checkbox" name="fruit">
        草莓<label for="strawberry"></label>
    </p>
    <p>
        <input id="apple" type="checkbox" name="fruit">
        苹果<label for="apple"></label>
    </p>

面试题：如何让一个元素消失在视野中

• 删掉
• display:none
  
  • 隐藏后元素不占位
• 给元素设置margin-left负值
• 利用透明度。opacity：0；
• text-indent实现文本隐藏效果
  
  • text-indent需设置为负值
• visibility:hidden可以实现元素的隐藏
  
  • 隐藏后，元素站位

利用伪元素清浮动

给前面元素加浮动，后面元素才能浮动上去。

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

• .clearfix是需要清除浮动的父集的类名
• 在元素后面创建一个为元素盒子（假的不可见）
  
  • content: "";内容为空
• clear: both;清除浮动
• .clearfix {
  *zoom: 1;/*兼容低版本浏览器*/
  }

bfc（块级格式化上下文）

• 他是一个独立渲染区域，里面的内容不会影响到外面的元素。

触发条件bfc

默认（普通文档流下）叫fc
- html根元素（body）本身就是bfc
- float的值为left、right时可以触发bfc。不能为none
- overflow值为hidden时可以触发bfc
- display为inline-block时可以触发bfc
- position值为absolute/fixed时可以触发bfc

bfc布局规则

• 计算bfc高度时，浮动元素也参与计算

利用伪类选择器选择一组元素的第一个或者最后一个（消除共同属性）

• first-child选择第一个元素
• last-child选择最后一个元素
• nth-child选择（具体的某个元素）

.cont .main .contOne .list ul li{
    float: left;
    margin-left: 56px;
}
ul下的li元素第一个li左边框0
.cont .main .contOne .list ul li:first-child{
  margin-left: 0;
}

a标签的功能

• 链接
• 锚点
  
  • 语法：href=”#red”
  • a标签href属性的属性值为相应的要跳转到的元素的id属性名+#
    
<ul>
<li><a href="#r">红</a></li>
<li><a href="#g">绿</a></li>
</ul>
<div id="g">绿</div>
<div id="r">红</div>

• 打电话
  
  • 语法：<a herf="tel:110">110</a>
• 发邮件
  
  • <a herf="mailto：[email protected]"</a>
    

    取消a的点击事件方法

• <a herf="javascript:void(0);"></a>

css3

• transform: translate“-50% -50%”;
  
  • 小盒子相对大盒子居中

box-sizing 怪异盒模型

• box-sizing:border-box;宽高是包括border和
• padding值的
• box-sizing:content-box;宽高是不包括border和padding值的

轮播图插件网

https://www.swiper.com.cn/api/navigation/355.html