CSS入门级常识

最新推荐文章于 2024-06-18 12:29:21 发布

weixin_30412013

最新推荐文章于 2024-06-18 12:29:21 发布

阅读量53

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/CCCLARITY/p/8243391.html

版权

　　在学习前端知识的过程中，我把HTML和CSS知识作为我的入门级语言来接收，从今天开始写关于CSS知识有关的博客，那么，今天简单介绍一下CSS知识的入门级常识。

了解一门语言，像很多课程一样，我们从来源和历史开始。

　　CSS出现在HTML（超文本标记语言）之后，在CSS出现之前，很多样式都是通过HTML本身的功能添加的，HTML最开始被发明是用来在互联网上发表论文或文章的，所以它需要的无非是居中或者调整文字大小等很基础的样式。HTML标签中也会有原始的样式，比如：h1标签，默认样式是字体加粗且字体大小32px。再比如，给网页的body标签加背景色，直接在body标签上添加属性bgcolor即可，居中使用标签<center>，改变字体大小使用font标签添加相应属性：

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

　　随着人们对网页效果的追求越来越高，有人发明了一种专门修改网页样式的语言，即：CSS。关于CSS的发明者也很少被后人知道，参考发明者为哈肯.维姆.莱和伯特.波斯。

　　在简单介绍了CSS的来源和发明者之后（请允许我厚着脸皮说我介绍了，良心告诉我连皮毛都算不上），我们说一说让我们一直捉摸不透的CSS。相信很多初学者和我有一样的感受，不知道哪里惹到了这个怪脾气的CSS，修改了一个样式，怎么变得和我想象的完全不一样，而且没有规律可循，在看了芳芳老师的这篇文章之后，CSS为什么这么难学，大致了解了一些。

　　总结一下芳芳老师的观点：CSS不正交，我们将在接下来的部分简单总结一下CSS不正交的具体示例。

　　除了CSS不正交这个主要原因之外，还有CSS属性多根本记不住，CSS的官方文档是英文对英语水平的要求高，更新速度很快等烦人的地方，好，接下来我们详细的说说CSS不正交的常见示例（请做好一头雾水的准备，刚在写博客的路上试水，请谅解）。

　　不正交大致分为两种：各属性之间相互影响和各元素之间相互影响。

　　i. 各属性之间相互影响

　　a）第一种情况：margin 和 border

　　同为兄弟关系：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .demo{
      border: 1px solid red;
      height: 100px;
      margin: 10px 0;
    }
    
  </style>
</head>
<body>
  <div>
    <div class="demo"></div>
    <!-- <div style="border-top: 1px solid green"></div>    // 第一种方法
    <div style="display: table"></div>        // 第二种方法
    <div style="display: flex"></div> -->        // 第三种方法
    <div class="demo"></div>
    <div class="demo"></div>
  </div>
</body>
</html>

　　同为父子关系：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      outline: 0.1px solid red;            // 把这一行换成border: 1px solid red;
      background: green;
    }
    .child{
      height: 100px;
      margin: 100px 0;
      outline: 1px solid blue;
    }
    
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>

　　效果图：

　　此时，父元素和子元素margin合并到一起，border和outline的区别：outline不占位置。

　　当把parent中的outline一行换成border时，parent的margin就消失了，只剩下child的margin。

border: 0.1px solid red;

　　综上，防止margin合并的方法有：加border、padding、display: table/flex/inline-block、overflow: hidden（不推荐）等几种方法。

　　b）第二种情况：列表小圆点和display

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    /* li{
      display: block;    // 第一种情况：可以消除小圆点
      display: table;    // 第二种情况
      display: flex;    // 第三种情况
    } */
  </style>
</head>
<body>
  <ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>
</body>
</html>

　　c）第三种情况：position: absolute 和 display: inline

　　当给一个元素添加绝对定位时，即使定义了display: inline，也会被改成block。只有inline和inline-block会被改成block，其余的不变。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      border: 1px solid red;
      height: 100px;
      position: relative;
    }
    .child{
      display: inline;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">文字</div>
  </div>
</body>
</html>

但是查看计算出来的属性，display显示为block。当position设置为flex时，也会被改。

　　d）第四种情况：width和margin-left，拿父子关系的元素举例：

<style>
    .parent{
      border: 1px solid red;
      margin: 0 auto;
      padding: 10px;
    }
    .child{
        border: 1px solid black;
        height: 130px;
        width: 300px;      /*去掉这行的效果不是元素左移而是元素向左扩大10px*/
        margin-left: -10px;
    }
 </style>

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

　　效果图：

　　e）第五种情况，margin: 0 auto; 能水平居中，但是margin: auto 0;为什么不能垂直居中呢，其实是可以的，只不过需要加上一些附加条件：

　　position: absolute; top: 0; bottom:0; 或者与flex布局结合起来使用。

<style>
    .parent{
      background: yellow;
      height: 400px;
      position: relative;
    }
    .child{
      background: red;
      height: 100px;
      width: 100%;
      margin: auto 0;
      position: absolute;
      top: 0;
      bottom: 0;
    }
</style>

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

　　效果图：

　　f）transform 会影响 z-index，具体没有示例，后续补充

　　ii. 各元素之间相互影响

　　a）第一种情况：position: fixed 和 transform

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .parent{
      border: 1px solid red;
      height: 100px;
      position: relative;
      transform: scale(0.9);
    }
    .child{
      position: fixed;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">文字</div>
  </div>
</body>
</html>

　　效果图：

　　本来应该相对于窗口定位，变成了相对于父元素的定位。

　　b）第二种情况：float 和 inline元素，背景没有受到浮动元素影响，但是文字却能识别到浮动元素，正好满足了浮动的意义，文字包围图片。

<body>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2">文字</div>
  </div>
</body>
<style>
    .parent{
      border: 1px solid red;
      height: 150px;
    }
    .child1{
      background: rgba(255,0,0,0.6);
      height: 60px;
      width: 60px;
      float: left;
    }
    .child2{
      background: yellow;
      height: 110px;
      width: 110px;
    }
  </style>

　　综上，我们介绍了这么多CSS不正交不合乎常理逻辑的地方，其实CSS在实际的工作中没有太多的套路，用得到的也没有太复杂。接下来我们就简单说说CSS好理解的几点：

布局：无非两种情况：PC端和移动端，PC端要考虑是否兼容IE8，如果需要兼容IE8，则一律使用float，不兼容和移动端则使用flex布局。
居中：水平居中和垂直居中（相对复杂一点），后续博客会详细介绍。
文字溢出：一行文本溢出和多行文本溢出。
取巧的方法：搜索CSS3 generator，造代码。

转载于:https://www.cnblogs.com/CCCLARITY/p/8243391.html

weixin_30412013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门级常识

　　在学习前端知识的过程中，我把HTML和CSS知识作为我的入门级语言来接收，从今天开始写关于CSS知识有关的博客，那么，今天简单介绍一下CSS知识的入门级常识。了解一门语言，像很多课程一样，我们从来源和历史开始。　　CSS出现在HTML（超文本标记语言）之后，在CSS出现之前，很多样式都是通过HTML本身的功能添加的，HTML最开始被发明是用来在互联网上发表论文或文章的，所以它需要的无非...
复制链接

扫一扫