CSS那些事儿

CSS那些事儿

相邻选择器 +

/* 代表着从一个div相邻的div,也就是2,3等等 */
    div+div{
      background-color:black;
    }
/* 代表着从一个div相邻的div的响铃的div,也就是3...等等 */
    div+div+div{
      background-color:black;
    }

通过浮动来实现自适应的问题（通过清除浮动的方法）

1.两列自适应结构

.content-box{
      margin: 10px 0;
    }
    /* 如果只通过clear：both的话 那么margin-bottom的话就不会显示 */
    .content-box::after{
      display: block;
      content: '';
      //还占原先位置
      visibility: hidden;
      clear: both;
      font-size: 0;
      line-height: 0;
    }
    .left-box{
      float: left;
      width: 70%;
      background-color: lightblue;
    }
    .right-box{
      float: right;
      width: 30%;
      background-color: blue;
    }

2.单列定宽单列自适应结构

1. 可以通过清除浮动的方法
2. 可以通过绝对定位的方法（问题就是不能够撑大父级）

.content-box{
      position:relative;
      margin: 10px 0;
      background: url('./apic27858.jpg') repeat-y 0 0;
    }
    /* 如果只通过clear：both的话 那么margin-bottom的话就不会显示 */
    .left-box{
      float: left;
      /* 要加空格 */
      width:calc(100% - 200px);
      margin-right: 200px;
      background-color: lightblue;
      color: red;
    }
    .right-box{
      position: absolute;
      right: 0px;
      top: 0px;
      float: right;
      width: 200px;
      margin-left: -200px;
      background-color: blue;
    }

3.等高结构

1.可以通过background的方法来实现

background: url('./apic27858.jpg') repeat-y 0 0;

2.可以通过负边距来实现

父级
overflow：hidden
子级
margin-bottom: -9999px;
padding-bottom: 9999px;

4.两列定宽中间自适应结构

(左侧定宽中间和右侧自适应，三列宽度自适应。这两种和两列定宽中间自适应方法类似.)

HTML
<div class="content-box">
    <div class="right-box">
      <div class="content">2</div>
    </div>
    <div class="left-box">2</div>
    <div class="end-box">2</div>
  </div>
CSS
  .content-box{
      margin: 10px 0;
    }
    .content-box::after{
      display: block;
      clear: both;
      content: '';
      font-size: 0;
      line-height: 0;
      visibility: hidden;
    }
    /* 如果只通过clear：both的话 那么margin-bottom的话就不会显示 */
    .right-box{
      float: left;
      width: 100%;
      background-color: #ffffff;
    }
    .right-box .content{
      margin: 0 200px 0 200px;
      background-color: #000000;
    }
    .left-box{
      float: left;
      /* 要加空格 */
      width:200px;
      margin-left: -100%;
      background-color: lightblue;
      color: red;
    }
    .end-box{
      float: left;
      width: 190px;
      margin-left: -190px;
      background-color:purple;
    }

首字下沉(first-letter)
首行下沉(first-line)

链接操作

LoVe HAte
link visited hover active

input修改边框的简易方法

1. 首先先去除input的轮廓
2. 最后设置边框就可以