continue css (nonorthogonal)

原始样式

html 发明出来的时候，还没有 css ，那怎么使用样式呢？
：要什么属性加什么属性，以标签的形式

<body bgcolor="yellow">
  <h1><center><font color="red">标题</font></center></h1>
</body>

上面就是以标签的形式，给body添加背景颜色，让h1居中并且颜色变为红色

CSS 样式

给 html 加一个标签，专门用来设置样式 <style></style>

<style>
  body{
    background-color: yellow;
  }
  h1{
    color: red;
    text-align: center;
  }
</style>

<body>
  <h1>标题</h1>
</body>

通过<link> </link>标签，引用 css

<link rel="stylesheet" href="xxx.css" media="print">

添加media="print"，只给打印提供样式

如果不深入了解 CSS

如果不深入了解 css，就会发现 css 不正交，因而有些反直觉。不正交主要表现在两点：

各属性之间互相影响
margin vs border
小圆点 vs display
position: absolute vs display: inline
各元素之间互相影响
position: fixed vs transform
float 影响 inline 元素

兄弟元素间margin默认合并

<style>
   div {
     border: 1px solid red;
     height: 100px;
     margin: 10px
   }
</style>

<body>
  <div></div>
  <div></div>
  <div></div>
</body>

http://js.jirengu.com/jamoxohuru/1/edit?html,output
上面代码默认产生上下margin合并的问题

受border影响，margin不合并

<style>
   .demo {
     border: 1px solid red;
     height: 100px;
     margin: 10px
   }
</style>

<body>
  <div class="demo"></div>
  <div style="border-top: 0.1px solid blue"></div>  
  <!--添加 border 为 1px ，影响了 margin
      border 为 0px ，又不影响 margin
      border 为 0.1px 四舍五入为 0px ，却又影响 margin
  -->
  <div class="demo"></div>
  <div class="demo"></div>
</body>

http://js.jirengu.com/qaloxesiko/1/edit
上面的方法是：在要消除合并的元素中间添加一个兄弟元素，设置其border: 0.1px solid;

<style>
   .demo {
     border: 1px solid red;
     height: 100px;
     margin: 10px
   }
</style>

<body>
  <div class="demo"></div>
  <div style="display: table"></div>  
  <!--display: table 和
      display: flex 会阻断合并
  -->
  <div class="demo"></div>
  <div class="demo"></div>
</body>

http://js.jirengu.com/ceromuxemu/1/edit
上面的方法是：在要消除合并的元素中间添加一个兄弟元素，设置其display: table或者display: flex

父子元素间margin默认不合并

<style>
  .child{
    height: 100px;
    border: 1px solid red;
    margin-top: 100px;
  }
  .parent{
    background-color: lightgreen;
  }
</style>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

http://js.jirengu.com/didiluzize/1/edit?html,output

受border影响，margin合并

<style>
  .child{
    height: 100px;
    border: 1px solid red;
    margin-top: 100px;
  }
  .parent{
    background-color: lightgreen;
      
    border-top: 0.1px solid blue;
      
    /* padding-top: 10px; */
      
    /* display: inline-block;
       width: 100%; */
      
    /* display: table;
       width: 100%; */
      
    /* overflow: hidden; */
      
  }
</style>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

http://js.jirengu.com/kikoq/1/edit
上面例举了 5 种情况，会出现margin合并

小圆点

<style>
  li{
    display: list-item;
  }
</style>

<body>
  <ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</body>

<li></li>默认的display: list-item小圆点只负责给list-item元素的

受display影响，小圆点消失

<style>
  li{
    display: block; 
    /* display: inline; */
    /* display: inline-block; */
  }
</style>

<body>
  <ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</body>

http://js.jirengu.com/dijik/1/edit
上面的代码：display会影响小圆点

positon影响display

<style>
  .parent{
    background: lightblue;
    height: 100px;
    position: relative;
  }
  .child{
    display: inline;  /* 设置元素为 inline */
    /* display: inline-block; */
      
    border: 1px solid red;
    position: absolute;
    bottom: 0;
    right: 0;
  }
</style>

<body>
  <div class="parent">
    <div class="child">内联样式</div>
  </div>
</body>

http://js.jirengu.com/jemix/1/edit

上面的代码，position会影响display: inline;和display: inline-block;把类型变为block

transform影响position: fixed;

<style>
  .parent{
    background: lightblue;
    height: 100px;
    position: relative;
    /* transform: scale(.9) */
  }
  .child{
    display: inline;
    border: 1px solid red;
    position: fixed;
    bottom: 0;
    left: 0;
  }
</style>

<body>
  <div class="parent">
    <div class="child">内联样式</div>
  </div>
</body>

http://js.jirengu.com/viyin/1/edit
试试去掉上面的注释，看看有什么变化

原因：由于它做了变形，所以它要把里面的所有元素都一起变形，即使是fixed定位

浮动元素影响内联元素的文字

<style>
  .parent{
    background: lightblue;
    height: 100px;
  }
  .clearfix::after{  //清除浮动
    content: '';
    display: block;
    clear: both;
  }
  .float{
    background: rgba(255,0,0,0.5);
    width: 100px;
    height: 60px;
    float: left;
  }
  .child{
    width: 300px;
    height: 50px;
    background: white;
  }
</style>

<body>
  <div class="parent clearfix">
    <div class="float">浮动元素</div>
    <div class="child">你好</div>
  </div>
</body>

http://js.jirengu.com/mizoz/1/edit
浮动元素是用来做图文混排的，需求就是文字环绕图片，所以你好两个字会自动去找浮动元素的边缘，去环绕这它，这就是为什么行内元素会感知到浮动元素

CSS 学习的易点

背套路即可应付日常工作
水平居中
垂直居中
巧用工具（自动生成代码）
CSS 3 Generator

continue css (nonorthogonal)

continue css (nonorthogonal)

目录

原始样式

CSS 样式

如果不深入了解 CSS

CSS 学习的易点

推荐阅读更多精彩内容