高效构建：轻松掌握静态网站建设技巧

1. 网页元素的显示与隐藏display--block;
(转换为块元素)none(隐藏不保留原来的位置)--重要！
visibility--visible(显示)hidden(隐藏保留原来的位置)
复习：overflow:hidden;

2. 解决父子关系垂直嵌套的合并塌陷问题。
   清除浮动overflow--hidden内容超出的部分隐藏(重点的)scroll(强制出现滚动条样式)ato(根据内容多少来判断是否出现滚动条)
   精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
   实现原理：只请求一张图--只是展示不同位置的小图。
   案例使用：backgrond-image背景图片backgrond-repeat是否平铺backgrond-position背景定位
   小小注意点：
   - 精灵技术主要针对背景图片，插入的img不需要这个技术。
   - 需要测量每个小背景图片的大小和位置。
   - 给盒子指定小的背景图片时，背景定位基本都是负值。

3. 字体图标优势：浏览器支持性比较好，灵活性大；体积小，加载速度快，节省带宽流量；
   减轻服务器压力。
   注意：
   - 字体图标是字体不是图片使用字体图标
   - 把包包里面的font文件夹复制出来一份，放在我们项目根目录。
   - 在html文件标签里面添加结构。
   - 在html文件样式style里面声明字体：告诉代码和别人使用我们自己自定义的字体（一定注意路径问题）
   - 给盒子设置字体即可追加字体图标原来的不能删除，继续使用，此时我们需要这样做
   把压缩包里面的selection.json从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件夹即可。
   重新导入selection.json生成新的字体包--》追加选择字体--》点击下载--》把之前项目中fonts删除--》替换成新的字体包里面的fonts文件夹

4. CSS三角形的本质：还是利用了盒子的边框
   做法：
   - 宽高为零。
   - 四个边都要的，只保留我们需要的边框颜色，其他的颜色透明即可。
   - 为了照顾兼容问题，设置：line-height:1; font-size:1px;
   三角形案例：
   demo {
     position:relative;
     width:100px;
     height:1px;
     backgrond-color:pink;
   }
   i {
     position:absolute;
     top:0px;
     left:-50px;
     width:0px;
     height:0px;
     border:15px solid transparent;
     border-left-color:red;
   }
   <div class="demo">
     <i></i>
   </div>

5. 用户界面的样式
   listyle="crsor:defalt;"--默认的小白鼠标样式
   listyle="crsor:pointer;"---鼠标小手样式
   listyle="crsor:move;"---鼠标移动样式
   listyle="crsor:text;"--鼠标文本样式
   listyle="crsor:not-allowed;"--鼠标禁止样式
   crsor:pointer;
   --记住！
   crsor:move;
   --记住！
   crsor:not-allowed;

6. 轮廓线otline:/none;
-----去掉轮廓线防止文本域拖拽resize:none;
vertical-align垂直对齐方式如果让单行文本垂直居中--使用line-height，如果处理图片和文本的垂直对齐方式，line-height=高不可以实现！
注意：只针对行内元素和行内块起作用。
通常用于--图片和文本对齐问题和去除图片底部空白缝隙问题。
去除图片底部空白让图片白不要和基线对齐---vertical-align:topmiddlebottom

7. 转换为块元素--display:block;
div{border:1px solid red;}
img{
   /*这个属性加给图片本身，千万不要加给图片的父级盒子*/
   vertical-align:middle;
}

8. 单行文字溢出省略号显示（背过!）
必须强制一行显示white-space:nowrap;.
超出部分隐藏overflow:hidden;.
文字省略号代替超出的文本text-overflow:ellipsis;
多行文本省略号显示
overflow:hidden;
/*文字省略号代替*/
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;

9. margin负值运用(练习!)
前置知识点：relative--相对定位占位置absolte---绝对定位不占位置float----浮动不占位置
文字环绕效果浮动--压不住下面标流的图片和文字。
行内块可以单独设置宽高一排显示text-align:center---给父亲元素添加，可以让子盒子(行内块/行内元素)水平居中。

10. 京东三角形巧妙运用
div{
  /*1. 宽高为*/
  width:0;
  height:0;
  /*2. 只保留需要的边框颜色*/
  border-color:transparent transparent red transparent;
  /*3. 边框是实线*/
  border-style:solid;
  /*4. 保留需要的边框大小，剩下的为*/
  border-width:1px 5px;
}
<div></div>