CSS 基础深入理解

box-sizing属性

正常来说，我们在页面元素设置的高宽其实并不是真正想要的高宽，默认情况下，元素的宽度和高度计算如下：

padding + border + width = 元素的实际宽度；padding + border + height = 元素的实际高度；这就意味着设置的元素通常看起来比您设置的大。看下图更好理解

box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中：

<!DOCTYPE html>
<html>
 <head> 
  <style> 
div.box1
{
　　width:50%;
　　height: 100px;
　　border:1em solid red;
　　padding: 20px;
}

div.box2
{
　　box-sizing:border-box;
　　-moz-box-sizing:border-box; /* Firefox */
　　-webkit-box-sizing:border-box; /* Safari */
　　width:50%;
　　height: 100px;
　　border:1em solid blue;
　　padding: 20px;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box1">
    这个 div 宽度是50%，高度为200px
   </div> 
   <div class="box2">
    这个 div 也是宽度是50%，高度为200px
   </div> 
  </div>   
 </body>
</html>

一个元素居中的办法（不确定宽高的情况下如何用定位的办法实现）

方法一：水平居中

父层：text-align:center;
子层:display:inline-block;

方法二：水平垂直居中

父层：display:table-cell;
         text-align:center;
         vertical-align:middle;
子层：display:inline-block;

父层：position: relative;
子层：position:absolute;
     top:50%;
     left:50%; 
     transform:translate(-50%,-50%);

已知高宽元素水平垂直居中：

方法一：display:table和diaplay:table-cell

<style>
.container {
  display: table;
}
.inner {
  display: table-cell;
  vertical-align:middle;
  text-align:center;
}
</style>
<div class="container">
  <div class="inner">
  you own content
  </div>
</div>

方法二：position:absolute、50%和translate

<style>
.container {
  position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
<div class="container">
  <div class="inner">
    your own content
  </div>
</div>

方法三：vw vh和translate

<style>
.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}
</style>
<div class="inner">
  this is a box fixed in center of screen
</div>

方法四：:before和display:inline-block

<style>
.container{
    text-align: center;
}
.container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.inner {
    display: inline-block;
}
</style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>

方法五：css3 flex

<style>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="container">
    <div class="inner">
        this is a box fixed in center of screen<br>The second line
    </div>
</div>

方法六：absolute + 四个方向的值相等

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

方法七：grid

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: grid;
}
.wrapper > p {
    align-self: center;
    justify-self: center;
}

两列布局——左侧宽度固定，右侧宽度自适应的三种方法

方法一：元素浮动

.left {
    position: absolute;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.right {
    height: 200px;
    margin-left: 300px;
    background-color: red;
}

方法二：BFC

.left {
    float: left;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.right {
    overflow: auto;
    height: 200px;
    background-color: red;
}

方法三： flex

.left{
     width:200px;
    height: 300px;
    background: red
}
.right{
    flex: 1;
    height: 300px;
    background-color: blue;
}

用纯 CSS 创建一个三角形

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px;
    border-color: red transparent transparent transparent;

; }

用纯CSS创建一个等腰梯形

.border-arrow {
  width: 256px;
  height: 256px;
  border: 64px solid ;
  border-color : red transparent transparent transparent ;
}

用纯CSS创建一个扇形

.sector {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px;
    border-color: transparent transparent blue transparent;
    border-radius: 50%;
}

盒模型

·标准盒模型 border, padding, content, margin

·IE盒模型 border, padding, content

·通过 box-sizing属性改变元素的盒模型

CSS选择符

·id选择器（#myId）

·类选择器（.myClassName）

·标签选择器（div, h1, p）

·后代选择器（h1 p）

·相邻后代选择器（子）选择器（ul > li）

·兄弟选择器（li~a）

·相邻兄弟选择器（li+a）

·属性选择器（a[rel="external"]）

·伪类选择器（a:hover, li:nth-child）

·伪元素选择器（::before, ::after）

·通配符选择器（*）

CSS3有哪些新特性

·新增各种CSS选择器（:not(.input) 所有class不是“input”的节点）

·圆角（border-radius: 4px;）

·多列布局（multi-columnlayout）

·阴影和反射（Shadow/Reflect）

·文字特效(text-shadow)

·文字渲染(Text-decoration)

·线性渐变(gradient)

·旋转(transform)

·缩放，定位，倾斜，动画，多背景

伪类和伪元素的区别

伪类和伪元素是一个比较容易混淆的概念，这不仅仅是从名称上，而且在写法上也是相似的（目前因为兼容性的问题，它们的写法是一致的），这就更容易混淆了。

规范：

css3 明确规定了伪类用一个冒号 : 来表示，而伪元素则用两个冒号 :: 来表示。

区别：

伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child
伪类使用一个冒号:
常见伪类：
伪元素简单来说就是不存在于DOM文档树中的虚拟的元素，它们和HTML元素一样，但是你又无法使用JavaScript去获取，如:before
- :hover
- :active
- :focus
- :visited
- :link
- :lang
- :first-child
- :last-child
- :not
伪元素使用两个冒号::
常见伪元素：
- ::before
- ::after
- ::first-letter
- ::first-line

用`:target`来实现折叠面板

:target是文档的内部链接，即 URL 后面跟有锚名称 #，指向文档内某个具体的元素。

利用 :target 的特性可以实现以前只能使用JavaScript实现的显示隐藏或者Collapse 折叠面板。

<html>
 <head></head>
 <body>
  <div class="row" style="margin-top: 2rem;"> 
   <div class="t-collapse">
    <a class="collapse-target" href="#modal1">target 1</a> 
    <div class="collapse-body" id="modal1"> 
     <a class="collapse-close" href="#">target 1</a> 
     <p> 1 </p> 
    </div> 
   </div> 
   <div class="t-collapse">
    <a class="collapse-target" href="#modal2">target 2</a> 
    <div class="collapse-body" id="modal2"> 
     <a class="collapse-close" href="#">target 2</a> 
     <p> 2 </p> 
    </div> 
   </div> 
   <div class="t-collapse">
    <a class="collapse-target" href="#modal3">target 3</a> 
    <div class="collapse-body" id="modal3"> 
     <a class="collapse-close" href="#">target 3</a> 
     <p> 3</p> 
    </div> 
   </div> 
   <div class="t-collapse">
    <a class="collapse-target" href="#modal4">target 4</a> 
    <div class="collapse-body" id="modal4"> 
     <a class="collapse-close" href="#">target 4</a> 
     <p>4 </p> 
    </div> 
   </div> 
  </div>
 </body>
</html>

.collapse {
  >.collapse-body {
    display: none;
    &:target {
      display: block;
    }
  }
}

持续更新中……