20190403 CSS3总结_浮动标签总结-CSDN博客

本文链接：https://blog.csdn.net/m_review/article/details/89002593

盒模型

概念：盒子的总宽度=content+padding+border+margin
W3C标准：width=内容占据的空间 padding 和 border另外计算；设置box-sizing: content-box（默认）
IE标准：width=内容占据的空间+padding+border；又称为’怪异盒模型‘；设置box-sizing: border-box
兼容：如果想要兼容IE8以下的浏览器，需要设置<!DOCTYPE html>

BFC特性，如何生成？

概念：是一个独立的渲染区域，规定了这个区域的内容是如何布局的。
特性：1. 内部的块元素从上到下排列 2. 内部的相邻的垂直元素之间会发生margin重叠 3. 内部的元素的排列不会影响到外部元素 4. 计算高度时浮动的元素也包含在内
生成：1. 根元素 2. 定位position=[absolute，fixed] 3. 浮动float不等于none 4. display=[inline-block，inline-flex，inline-table，inline-grid] 5. overflow不等于visible
解决问题：1. margin重叠，但并不是最好的方案 2. 清除浮动

定位的方式

分类：1. static普通流定位块级元素：从上到下；行内元素：从左到右 2. float浮动定位 3. absolute绝对定位 4. relative相对定位 5. fixed固定定位
现象：1. absolute和fixed的元素会脱标，不占据页面空间，2. 覆盖在非定位元素上面， 3. 行内元素会变成行内块，块级元素会变成行内块

浮动：产生，浮动元素特点，清除浮动

目的：最初，文字环绕；后来，用来定位，让多个块级元素在同一行展示。
特点：1. 脱离标准文档流，仍然在父元素之内，不占据页面空间，父元素高度塌陷 2. 多个块级元素将在一行上展示，显示不下的，换行 3. 文本，行内，行内块元素都会环绕排列 4. 块级元素和行内元素都会变成行内块

解释通过添加伪类清除浮动的原理：

.container::after{
  /* 生成内容为空  */
  content: '';
  /* 生成的元素以块级元素显示, */
  display: block;
  /* 清除前面元素浮动带来的影响  */
  clear: both;
  /* 不在页面上展示 */
  visibility: hidden;
}

弹性布局

flex: 1 1 的意思：

flex是一个属性的集合，包括：flex-grow、flex-shrink、flex-basis
```
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
```
区分align-items与align-content：

（1）只有一行flex元素，align-content是不生效的
（2）有两行或者两行一行的flex元素，align-content:center; flex元素整体居中；align-items: center; 将区域按照flex元素的行数平分，并且每一行flex元素在各自的区域居中。

vertical-align属性，适用元素，特点，应用

目的：将相邻元素与文本对齐，确定元素在垂直方向上的位置。
适用：inline inline-block inline-table
属性值：基线[baseline, sub, super, middle] 顶部底部[top, bottom]
应用：log与文案对齐

line-height属性，适用元素，特点，应用

目的：1. 设置行高，行间距 2. 定义块级元素的中基线之间的最小距离
适用：所有元素；对出现文本行的标签有效
取值

值描述
% * 基于当前字体尺寸的百分比行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
px 设置多少就是多少

值	描述
%	* 基于当前字体尺寸的百分比行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
px	设置多少就是多少

link与@import的区别

相同点：都可以导入外部css文件
不同点：1. 源不同：link是HTML标签，@import是CSS提供的 2. 加载时间不同：页面加载时，link会同时加载，@import会在页面加载完成之后加载 3. 兼容性问题：@import在IE5以上才能识别。
缺点：1. @import样式会延后加载，导致页面样式闪烁，所以加载外部样式表时尽可能的使用link方法。2. @import有可能会覆盖掉js修改的样式

CSS 选择符有哪些？

通配符 id class 属性(input[text=‘number’]) 标签子代(ul > li) 后代(ul li) 相邻(input+span) 伪类(a:hover)

哪些属性可以继承？
- 可继承：font-size font-family color …
- 不可继承：width padding border margin …
优先级算法如何计算？
- 规则：1. 就近原则 2. !import > 内联 > id > class > tag 3. 后面的覆盖前面的

DOCTYPE的作用以及不同设置的影响

DOCTYPE：告知浏览器以何种模式去渲染网页

<!-- 没有声明时，浏览器就会选择怪异模式 -->
<!DOCTYPE >
<!-- 说明这个页面遵守了HTML5规范的,浏览器会自动选择标准模式 -->
<!DOCTYPE html>
<!-- 说明这个页面遵守了HTML4规范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE不存在或者格式不正确的时候页面会以混杂模式呈现。

严格(标准)模式和混杂(怪异)模式

严格模式：以浏览器支持的最高标准运行
混杂模式：以宽松的向后兼容的方式显示，
怪异模式和标准模式的区别
1. 盒模型（标准，怪异）
2. 图片对齐方式（baseline，bottom）
3. 行内元素尺寸（无尺寸，可设置宽高）
4. 内容溢出处理（超出盒子，扩展盒子）
标准模式下，图片留白问题
- 产生原因：标准模式下行元素的vertical-align默认取值为baseline
- 解决方法：给图片设置vertical-align值为bottom

浏览器兼容性 CSS hack

浏览器默认的margin和padding不同

解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。
Chrome小于12px的问题

解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
上下margin重合问题：ie和ff都存在，相邻的两个div的margin-top和margin-bottom却会发生重合

解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
IE6下，浮动元素左右边距加倍问题：

解决方案：给浮动的元素加上_display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别)

针对IE的hack技术，渐进识别的方式，从总体中逐渐排除局部

/* 
  首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来
  接着，再次使用 "+" 将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
  最后，_background-color只有IE6识别
*/
.bb{
  background-color:#f1ee18; /*所有识别*/
  .background-color:#00deff\9; /*IE6、7、8识别*/
  +background-color:#a200ff; /*IE6、7识别*/
  _background-color:#1e0bd1; /*IE6识别*/ 
}

解决方案：样式前面增加符号[+，-，.，\9 ]

漏写DTD声明，IE中会触发怪异模式

解决方法：注明<!DOCTYPE html>

图片水平垂直居中的几种方法

/* 1. 绝对定位 + 水平移动 */
img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 2. 绝对定位 + 0 + margin auto */
img{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* 
  3. line-height +  vertical-align middle 
  注意：这里的line-height 与 height不能设置成百分比单位
*/
div{
  width: 100%;
  height: 600px;
  text-align: center;
  border: 1px solid;
  /* 定义块级元素中基线之间最小距离 */
  line-height: 600px;
}
img{
  /* 设置元素上、下边的中点与行盒子基线加上 x-height 的一半对齐 */
  vertical-align: middle;
}