目录
## 一、图片下方的空白间距
- 图片下方默认会出现4px的空白，(随着父级的字体大小有所不同)
- 解决方法1：
- 给图片的父级添加 font-size：0; line-height:0;
- 解决方法2
- 给图片添加vertical-align 属性，值不为baseline
- 解决方法3
- 把图片转换成块级元素 display：block;
## 二、元素可见性
- visibility:visible; 元素默认可见
- visibility:hidden; 元素不可见，隐藏，但是占位的
- display:none; 隐藏元素，不显示也不占位
## 三、单行文本溢出显示省略号
```
.p1 {
width: 200px;
background-color: red;
white-space: nowrap;/* 文本强制不换行 */
text-overflow: ellipsis;/*文本溢出显示省略号*/
overflow: hidden;/*必需要结合盒子溢出隐藏*/
}
```
## 四、多行文本溢出显示省略号
- 方法一：利用webkit内核的扩展属性(因为只有webkit内核支持，效果好兼容性不好)
```
.p2 {
width: 200px;
background-color: skyblue;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
/*必需要结合的属性，将元素设置为弹性盒模式*/
-webkit-line-clamp: 4;
/*设置文本显示的行数*/
-webkit-box-orient: vertical;
/*必需要结合的属性，设置弹性盒对象的子元素，垂直排列*/
}
```
- 方法二：利用伪元素模拟省略号，兼容性相对好，但是效果不太好
```
.p3 {
position: relative;
width: 240px;
height: 120px;
/*盒子高度要设置为line-height的倍数（表示要显示的倍数几倍就是几行）*/
background-color: gold;
line-height: 30px;
/* overflow: hidden; */盒子溢出隐藏
}
.p3::after {
position: absolute;
right: 0;
bottom: 0;
/*通过定位设置到父元素的右下角*/
content: '...';
/*用伪元素添加...显示省略号*/
/* background-color: gold; */
padding-left: 20px;//是让伪元素变宽点
background: linear-gradient(to right, transparent, gold 60%);
/*往右渐变到60%后面40%全为gold色*/-添加渐变色使文字逐渐隐藏
}
```
## 五、标签的嵌套规则
1、块元素里面可以嵌套块元素、行内元素、行内块(特殊情况：一些特殊语义的块标签不能再嵌套块标签，比如：h1-h6 和 p标签里面不能再嵌套 div, 一些固定搭配的标签，不能随意嵌套其他的标签 比如：ul ,ol 直接子元素只能是li)
2、行内元素不能嵌套块级元素，可以嵌套行内和行内块元素( a标签（行内元素）里面可以套块元素，a标签里面不能再嵌套a标签，显示为兄弟关系不能父级 )
## 六、BFC
### 1、BFC概念？（是什么？）
> Block Formatting Context 块级格式化上下文
> Formatting Context，指的是页面中的一个渲染区域，并且拥有一套渲染规则，他决定子标签如何定位，以及与其他标签的相互关系和作用。
> BFC , 块级格式化上下文,指的是页面中的一个渲染区域，只有Block-level BOX （块级盒子）参与,该区域中拥有一套渲染规则来约束块级盒子的布局，且与外部无关。
### 2、如何生成BFC?
- 以下情况是目前学到的能够生成BFC的情况:
- 根元素 html
- float属性值不为 none (ul、li 浮动本身也是一个bfc会有高度ul就不用clearfix)
- overflow 属性值不为 visible
- display 属性值为 inline-block
- position属性值为 absolute/fixed
### 3、BFC的特性？
- ①、内部的块标签会在垂直方向一个接一个的放置
- *②、垂直方向的距离有margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
- ③、每个标签的左外边距和包含它的块的左边界相接触，有margin-left,即使浮动标签也是如此
- *④、BFC区域不会与float的标签区域发生重叠 (.box1左浮动.box2不重叠在其右边紧排其不设置宽度自动占满一行去除.box1的宽度，实现右侧自适应效果)
- *⑤、计算BFC的高度时，浮动子元素也参与计算(ul设overflow：hidden即会有高度，有li的高度)
- ⑥、BFC就是页面中的一个隔离的独立容器，容器里的子标签不会影响到外部标签，反之，外部标签也不会影响bfc内部的标签。
### 4、BFC解决的问题？
- 1）、外边距折叠
```
## 2.md-三、垂直外边距合并问题
### 1、垂直方向margin-top传递问题(父子关系)
- 当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top
- 解决:
- 给父元素添加1px的上padding或者border,子元素margin-top少1px
- 可以用父元素的padding-top实现同样式的效果
### 2、相邻元素的外边距合并（兄弟关系）
- 两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)
```
> 根据特性第②条，属于同一个BFC的两个相邻的标签外边距会发生重叠( 父子外边距重叠、兄弟关系边距重叠)
> 解决方法： 让标签处于不同的BFC区域中就不会重叠
```
父子边距重叠： 给父元素设置生成BFC的属性
兄弟边距重叠： 给其中任意一个添加一层BFC父级
```
- 2）、实现自适应两栏或三栏布局 （根据特性④）
> 两栏布局，左侧固定宽度，右侧栏自适应（随浏览器尺寸变化缩小放大）
> 三栏布局，左右两栏固定宽度，中间栏自适应(随浏览器尺寸变化缩小放大)
```
<!-- 两栏 :
.left 设置宽度，左浮动
.right 宽度自动占满父级，设置overflow:hidden
-->
<div class="cols">
<div class="left"></div>
<div class="right"></div>
</div>
<!--
三栏：
标签顺序：先写左右栏，再写中间栏
.left1 设置宽度，左浮动
.right1 设置宽度，右浮动
.center 宽度自动占满父级，设置overflow:hidden
-->
<div class="cols">
<div class="left1"></div>
<div class="right1"></div>
<div class="center"></div>
</div>
```
- 3）、防止文字环绕图片排列 （根据特性④）
> 浮动的元素会覆盖不浮动的元素，文字会环绕图片排列，把文字所在标签设置为BFC,可以避免文字环绕
- 4）、清除浮动
> 根据第⑤条特性，计算BFC的高度时，浮动子元素也参与计算，所以可以通过bfc清除浮动，例如给浮动元素父级添加overflow:hidden;
## 七、布局方案
### 1、两栏自适应
- 方法一： BFC-右侧自适应设overflow：hidden;
```
<!-- 两栏 :
.left 设置宽度，左浮动
.right 宽度自动占满父级，设置overflow:hidden
-->
<div class="cols">
<div class="left"></div>
<div class="right"></div>
</div>
```
- 方法二： 左绝对定位-右侧自适应设padding-left+块级子元素inner
```
- .left 左侧栏固定宽，设置绝对定位 position:absolute;会脱离文档流，right会被覆盖一部分
- .right 右侧栏宽度自动，给其添加padding-left:200px，并且添加子元素 .inner , 把右侧栏的内容放在.inner里面
.left{
position: absolute;
left: 0;
top:0;
width: 200px;
height: 300px;
background-color: rgb(202, 150, 252);
}
.right{
padding-left: 200px;
}
.inner{
background-color: coral;
height: 300px;
}
<div class="cols">
<div class="left"></div>
<div class="right">
<div class="inner">hello world</div>
</div>
</div>
```
### 2、三栏自适应
- 方法一：BFC-左侧左浮动，右侧右浮动，中间自适应设overflow：hidden;
```
<!--
三栏：
标签顺序：先写左右栏，再写中间栏
.left1 设置宽度，左浮动
.right1 设置宽度，右浮动
.center 宽度自动占满父级，设置overflow:hidden
-->
<div class="cols">
<div class="left1"></div>
<div class="right1"></div>
<div class="center"></div>
</div>
```
- 方法二：圣杯布局
> 先中间后左右,中间宽100%左右固定宽,三个都左浮动,左右都设margin-left,中间main会左右部分覆盖----三个在一行
> container设左右的内边距为左右侧的宽值----内缩
> 左右侧设相对定位 position: relative;位移到最左右侧----外翻
- 为了使主体内容优先加载，标签顺序 .main .left .right
- .main 宽度设置 100% ，.left 宽度 200px .right 宽度240px
- .main ,.left ,.right 三栏都左浮动
- .left添加margin-left:-100%; 拉到最左边 ，.right 添加margin-left:-240px; 拉到三栏的右边，.main被左右两边栏覆盖
```
圣杯布局解决覆盖问题：
- 给父级.container添加padding:0 240px 0 200px; 这个时候.mian 宽度正常，左右两栏同时被挤到中间
- 给.left 添加position:relative;left:-200px; 往左移
- 给.right 添加position:relative;right:-240px; 往右移
```
```
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
height: 500px;
padding: 0 240px 0 200px;
}
.main {
float: left;
width: 100%;
height: 100%;
background-color: red;
}
.left {
position: relative;
left: -200px;
float: left;
margin-left: -100%;
width: 200px;
height: 100%;
background-color: green;
}
.right {
position: relative;
right: -240px;
float: left;
margin-left: -240px;
width: 240px;
height: 100%;
background-color: yellow;
}
```
- 方法三：双飞翼布局
> 先中间后左右,中间宽100%左右固定宽,三个都左浮动,左右都设margin-left,中间main会左右部分覆盖----三个在一行
> main中间再设块子元素inner，inner设左右margin值
- 为了使主体内容优先加载，标签顺序 .main .left .right
- .main 宽度设置 100% ，.left 宽度 200px .right 宽度240px
- .main ,.left ,.right 三栏都左浮动
- .left添加margin-left:-100%; 拉到最左边 ，.right 添加margin-left:-240px; 拉到三栏的右边.main被左右两边栏覆盖
```
双飞翼解决覆盖的问题：
- 给.main添加一层子元素 .main-inner
- 给 .main-inner 添加外边距 margin:0 240px 0 200px;把主体内容都放在 .mian-inner里面
```
```
<div class="container">
<div class="main">
<div class="inner">
hello
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
html,body {
height: 100%;
}
.container {
overflow: hidden;
height: 100%;
}
.main {
float: left;
width: 100%;
height: 100%;
background-color: red;
}
.left {
float: left;
margin-left: -100%;
width: 200px;
height: 100%;
background-color: green;
}
.right {
float: left;
margin-left: -240px;
width: 240px;
height: 100%;
background-color: lightseagreen;
}
.inner {
margin: 0 240px 0 200px;
background-color: skyblue;
}
```
## 八、等高布局
> 多列布局，其中一列变高，其他几列等高变化
### 方法一：利用内外边距相抵消的原理，给每一列设置
- padding-bottom: 9999px;
- margin-bottom: -9999px;
- 把背景撑得很大，再抵消padding的占位
- 优点：结构简单，兼容性比较好
- 缺点：伪等高,需要合理控制padding-bottom、margin-bottom
```
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container{
width: 1000px;
border: 2px solid black;
margin: 0 auto;
overflow: hidden;
}
.left{
float: left;
width: 300px;
background-color: pink;
padding-bottom: 9999px;
margin-bottom:-9999px;
}
.center{
float: left;
width: 400px;
background-color: lightgreen;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right{
float: left;
width: 300px;
background-color: lightskyblue;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
```
### 方法二: 给每个多列添加对应多层共同父级,再设margin-left
- 有几列添加几层父级，给父级设置不同的背景色，通过margin调整几层父级的位置,错开呈现多列背景。最后通过负margin把内容列调整到对应的背景上。
- 优点：真等高，兼容性好
- 缺点：结构复杂,理解相对困难
```
<div class="container">
<div class="bg2">
<div class="bg3 clearfix">
<div class="left">
<div class="center">
<div class="right">
</div>
</div>
</div>
.container {
width: 1000px;
border: 2px solid black;
margin: 0 auto;
background-color: pink;
}
.bg2 {
background-color: lightgreen;
margin-left: 300px;
}
.bg3 {
background-color: lightskyblue;
margin-left: 400px;
}
.left {
float: left;
width: 300px;
margin-left: -700px;
}
.center {
float: left;
width: 400px;
margin-left: -400px;
}
.right {
float: left;
width: 300px;
}
```
## 九、常见兼容问题处理
### 1、ie中图片边框问题
> ie中图片放在a标签中会显示边框
- 解决方法：
```
img{
border:none;
}
```
### 2、ie8以下背景简写属性语法兼容
> 背景简写属性的每个值之间应该添加空格，如果出现如下遗漏空格的情况，标准浏览器时可以正常显示，但是再ie8及以下浏览器就不能显示图片
```
background: url("...")no-repeat center;
```
- 解决方法：按照标准语法，在多个值之间添加空格
```
background: url("...") no-repeat center;
```
### 3、透明度兼容
- rgba() 透明颜色 ie低版本不支持
- opacity:0.5; 标准浏览器支持，ie低版本不支持
- filter:alpha(opacity=50) ie支持
### 4、ie低版本的兼容问题（了解）
> ① ie6及以下浏览器，定义小高度的盒子失效
- 解决方法：
```
.box{
height:1px;
font-size: 0;//添加
line-height: 0;//添加
overflow: hidden;//添加
}
```
> ② ie6浏览器中，标签浮动产生双倍外边距。
- 解决方法：给浮动元素添加 _display:inline;
```
li{
float:left;
margin-left:10px;
_display:inline; /* 针对ie6有效 */
}
```
> ③ ie7及以下浏览器，子元素设置相对定位，父元素的overflow:hidden;失效
- 解决方法：给父元素也添加position:relative;
```
.parent{
position: relative;
overflow: hidden;
}
.child{
position: relative;
left: 150px;
}
```
> ④ ie7及以下浏览器，块元素转行内块，不在一行显示
- 解决方法：
```
div{
display:inline-block;
*display:inline;//添加
*zoom:1;//添加
}
```
> ⑤ ie7及以下浏览器，li中出现两个及以上子元素浮动时，li之间出现空白问题
- 解决方法：给li添加vertical-align:top;
```
li{
vertical-align:top;
}
```
```
补充:
如果需要从服务器环境中打开页面,可以安装插件 live server , 打开页面选择 open with live Server
```
## 十、css Hack技术
> css Hack是通过一些特殊方式去处理不同浏览器之间的兼容问题，某些情况使用css Hack处理兼容能事半功倍。滥用css Hack会影响页面性能，并且维护困难，所以应当避免大量使用css Hack技术。
### 1、条件Hack
- ie从10及以上的版本都不支持 条件hack，所以以下代码在ie9及以下才会显示
```
<!--[if ie]>
<p>这个段落只有ie会显示</p>
<![endif]-->
```
- 关键字：
> 大于 gt 大于等于 gte
```
<!--[if gt ie 8]>
<p>这个段落只有ie8以上会显示</p>
<![endif]-->
```
> 小于 lt 小于等于 lte
```
<!--[if lt ie 8]>
<p>这个段落只有ie8以下会显示</p>
<![endif]-->
```
> 等于
```
<!--[if ie 8]>
<p>这个段落只有ie8会显示</p>
<![endif]-->
```
### 2、属性级hack
> 属性级hack就是给css的属性添加特殊符号来处理不同版本浏览器的兼容
```
_ : ie6及以下版本浏览器识别
* ：ie7及以下版本浏览器识别
\0: ie8及以上浏览器识别
.box{
background-color: red; /*所有浏览器识别*/
_background-color:yellow;
*background-color:lightblue;
background-color: hotpink\0;
}
```
### 3、选择符级hack
*html 选择ie6及以下浏览器
*+html 只选择ie7浏览器
```
.box{
background-color: red;
}
*html .box{
background-color: yellow;
}
*+html .box{
background-color: lightblue;
}
```
## 十一、滑动门技术
> 为了使特殊形状得背景能够自适应元素中文本内容得多少，出现滑动门技术。 比如微信导航。
主要使利用背景定位和padding撑开盒子宽度。
> 具体实现：先给a标签，给a背景图定到左边，给a添加合适得padding-left，再往a当中添加span标签，给span标签设置同样得背景定位在右边，给span添加padding-right (a和span都要转换成块级)
```
<ul>
<li>
<a href="#">
<span>首页页</span>
</a>
</li>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
</ul>
ul li a{
display: block;
padding-left: 16px;
background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat left;
}
ul li a span{
display: block;
background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat right;
padding-right: 16px;
}
```
## 十二、网页tdk设置
- title设置： 网页的标题，尽量强调重点的内容，首页一般写整个网站的标题和整体概述，其他页面概括本页面的主题，（注意：每个页面的标题不要）
- description 设置： 网页描述，需要高度概括网页内容，切忌过分堆砌，不能太长，每个页面不能相同 （不是必须设置，根据具体页面要求）
- keywords 设置：网页关键字，列举出几个页面的重要的关键字
```
<title>XX商城-手机,电脑...</title>
<meta name="description" content="....">
<meta name="keywords" content="...">
```
- 网站icon设置
- 生成icon图标 http://www.bitbug.net/
```
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
```