校招进行时（四）---css基础

时间 2019-11-10

标签进行 css 基础栏目 CSS 繁體版

原文原文链接

恩，小菜鸟又来了，上篇文章在这，话很少说，此次罗列总结一下css基础知识，和我同样的菜鸟能够看看。css

引入方式

css的引入方式主要有如下几种：html

外部样式表web

经过在head标签中加入link标签来引入外部样式表，由于其良好的分离性和可维护性，大多数css样式都是经过这种方式引入的bootstrap
内部样式表segmentfault

直接将css样式放入style标签置于head标签内浏览器
内联样式表ide

直接将css样式写入html元素的style属性布局

盒子模型与BFC

在一个文档中，每一个元素都被表示为一个矩形的盒子。肯定这些盒子的尺寸, 属性（颜色，背景，边框方面）和位置是渲染引擎的目标。性能

在CSS中，使用标准盒模型描述这些矩形盒子中的每个。这个模型描述了元素所占空间的内容。每一个盒子有四个边：外边距边（margin）, 边框边（border）, 内填充边（padding）与内容边（content）flex

行内元素和块级元素

内联元素(inline)

和相邻的内联元素在同一行
padding和margin的left和right能够进行设置改变
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，固定为里面文字或图片撑开的大小

块级元素(block)

老是独占一行，表现为另起一行开始，并且其后的元素也必须另起一行显示
宽度(width)、高度(height)、内边距(padding)和外边距(margin)均可控制

内联块元素（inline-block）

拥有内在尺寸，可设置高宽，但不会自动换行
一些浏览器默认的inline-block元素： input 、img 、button 、textarea 、label

外边距重叠

在CSS当中，相邻的两个盒子（多是兄弟关系也多是祖先关系）的外边距能够结合成一个单独的外边距。这种合并外边距的方式被称为折叠，而且于是所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们二者之间较大的值
两个相邻的外边距都是负数时，折叠结果是二者绝对值的较大值
两个外边距一正一负时，折叠结果是二者的相加的和

BFC

Formatting context

在说BFC以前，先解释一下Formatting context，即FC。其是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。最多见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增长了 GFC 和 FFC。

BFC定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（块级元素）参与，它规定了内部的Block-level Box如何布局，而且与这个区域外部绝不相干。

BFC内部规则

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每一个box的margin-left，与内容块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时，浮动元素也参与计算

BFC的做用

BFC的经常使用功能以下

文档布局
清除浮动
清除重叠外边距

触发BFC的条件

根元素
float属性不为none
overflow不为visible
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex

例子

自适应两栏式布局

<style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
    }
    .aside {
        width: 200px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .main {
        height: 200px;
        overflow: hidden;
        background: #fcc;
    }
</style>

<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果

根据BFC第三条规则，虽然存在浮动元素aside，可是main元素的左边依然会跟包含块的border相接触，这时经过设置main元素的overflow：hidden触发产生一个新的BFC，便实现了简单的两栏自适应布局。

更多例子能够查看

选择器与优先级

选择器

css经过选择器关联html标签，以达到控制html元素样式的效果，基本的选择器有如下几种：

派生选择器：直接用html标签进行选择
类选择器：使用html元素的class属性进行选择
id选择器：使用html元素的id属性进行选择

以上三种选择器为css中最基本的选择器，其余选择器都是三者的延伸、扩展或者组合，例如：

伪元素选择器：利用 : 选择伪元素
后代选择器：利用空格进行后代的选择
```
.header .nav{//选取header类中的nav类}
```
兄弟选择器（猫头鹰选择器）：使用+来选择两个紧接着的元素，且它们拥有相同的父元素，由于其样子酷似猫头鹰，因此又被称为猫头鹰选择器，猫头鹰选择器虽然冷门，可是应用在多个相同元素的排列的时候会自动帮你处理一些边缘问题，这里就不展开了详情请戳
```
.warp div + div{//选取warp类下的全部兄弟div}
```
群组选择器：利用逗号进行多个元素的选取
```
div, .avatar, a{//选取全部div、avatar类和a标签}
```
属性选择器：利用中括号选择带有特定属性的元素
```
a[title]{//选择全部带有title属性的a标签}
```

优先级（特殊性）

通常来讲，越复杂越精确的选择器优先级就越高，在css权威指南上，是这样来定义和区分优先级的：

选择器的特殊性由选择器自己的组件肯定。特殊性值表现为4个部分，如：0， 0， 0， 0

一个选择器的具体特殊性以下肯定：

对于选择器中给定的各个ID属性值，加 0100
对于选择器中给定的各个类属性值、属性选择或伪类，加 0010
对于选择器中给定的各个元素或伪元素，加 0001。伪元素是否有特殊性？在这方面CSS2有些自相矛盾，可是在CSS2.1中明确指出，伪元素有特殊性，而且为0001
结合符和统配选择器对特殊性没有任何贡献（后面还会更多地介绍这些值）
内联样式的声明特殊性都是1000
重要性：有时某个声明可能很是重要，超过了其余全部声明。CSS2.1称之为重要声明，并容许这些声明的结束分号以前插入 !important 来标志

CSS的优先级还遵循叠加规则，即

span#xxx .songs li{//这个选择器的特殊性为0112}

补充

* 号表明通配符，选取文档中的全部元素，通常不建议使用，首先过于暴力，其次影响渲染性能

样式最后的渲染效果与样式定义在文件中的前后顺序有关，即后面的覆盖前面的，与在html文档中的前后关系无关。例如：

<style>
  .A{ color:blue;}
  .B{ color:red;}
</style>

<body>
<p class='B A'> 123 </p>
</body>

最后“123”的颜色是 red

CSS Hack

什么是CSS Hack

因为不一样厂商的流览器或某浏览器的不一样版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不同，致使在不一样浏览器的环境中呈现出不一致的页面展示效果。这时，咱们为了得到统一的页面效果，就须要针对不一样的浏览器或不一样版本写特定的CSS样式，咱们把这个针对不一样的浏览器/不一样版本写相应的CSS code的过程，叫作CSS hack

CSS Hack的方法

条件注释法

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

类内属性前缀法

.hack{  
  background-color:red; /* All browsers */  
  background-color:blue !important;/* All browsers but IE6 */  
  *background-color:black; /* IE6, IE7 */  
  +background-color:yellow;/* IE6, IE7*/  
  background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
  background-color:purple\0; /* IE8, IE9, IE10 */  
  background-color:orange\9\0;/*IE9, IE10*/  
  _background-color:green; /* Only works in IE6 */  
}

媒体查询

@media \0screen\,screen\9 {
  .hack{
    /* IE 6 7 8 */
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .demo {
      /* Webkit内核 */
    }
}

基础布局

垂直居中

方法有不少，我大概罗列一下我用得比较多的

包裹法

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  float: left;
  height: 50%;
  margin-bottom: -150px;
}

#content {
  clear: both;
  height: 300px;
  position: relative;
}

这种方法在须要垂直居中的div外再包裹一个div，并将其设置浮动，margin-bottom为内部div的 1/2 * height，以后content触发BFC，内部也能放元素。优势是兼容性比较好，缺点是增长了额外的元素，而且高度不能改变。

flexbox

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

用起来最舒服最简单的方法，可是，兼容性是个大问题，好比IE要IE11才兼容，很尴尬。

水平居中

水平居中比较简单，通常不会问到，可是做为复习也说得过去

margin

<div id="content">Content here</div>


#content {
  margin: 0 auto;
}

绝对定位

<div id="content">Content here</div>

.content {
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -(width/2);
}

flexbox

<div id="warpper">  
  <div id="content">Content here</div>
</div>

#warpper {
  display: flex;
  align-items: center;
}

栅格布局

原理

一个栅格布局通常分为：容器（container）、行（row）、列（col）

其中容器用于肯定总体布局的宽度，设定了容器的宽度之后，再设置一个容器中容纳多少行，最后在在每一行中肯定有多少列，同时列与列之间的间隔也被提早规定，这使得咱们在布局的时候就很简单了，不用过多的考虑对齐问题。其中列是真正显示文档内容的元素。

列宽

一个能用的栅格系统，会提早准备一个声明列宽的类，将容器的宽度平分为几个等分，这个等分通常时3或4的倍数，这样比较容易排版，固然，分的越多排版越精确

嵌套

栅格系统能够嵌套，即列也能够做为容器继续嵌套栅格，这即是嵌套栅格

列的换行与行的偏移

一个完美支持响应式的栅格系统支持列的换行，即同一行的不一样列之间的高度能够不相同，这种行为可以大大增强栅格系统的响应式能力。同时其还支持列的偏移，便可以不从第一列开始，将某几列做为空隙。

具体的栅格系统可参考bootstrap官网

后记

做为一个菜鸟能罗列收集的东西大概也就那么多了，还有一些比较基础的因为篇幅缘由就没有放上来，固然还有好多也很重要的东西没罗列出来，这要归结于本身仍是太菜，要是对你有帮助的话，就点个赞咯。有问题的话也接受一切批评和建议，我会努力加油的。上一篇文章在本篇头部，全部文章收录于个人博客中。