CSS基础

Posted sauronblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS基础相关的知识,希望对你有一定的参考价值。

1.浮动的特点

1.浮动的元素不占用标准流的位置

2.浮动特性会让行内元素和块级元素都变成行内块元素,具有行内块的特性.

行内块的特点:宽高起作用,可以一行显示多个,margin,padding四面都有效

3.如果父盒子中有子盒子的话,一般的用法就是,让子盒子,要浮动都浮动,要不浮动都不浮动。

4.父盒子中的子元素,无论如何浮动,都不会超出父盒子。

5.浮动的元素跟上一个元素的位置有关系

 

2.设置图片在垂直方向的对齐方式

vertical-algin: top / middle /bottom

 

3.清除浮动的方式

1.给父元素设置一个高度 很少用

2.额外标签法: clear:both 给额外的标签添加 一个此属性,来清除左右的浮动,进而消除浮动对后面元素的影响

缺点是:白白的增加了一个额外的标签,会使页面标签变得冗余

3.overflow:hidden 给父元素添加overflow:hidden属性 几乎不用

缺点是:会造成额外溢出来的元素被隐藏掉

4.单伪元素清除法 用的很多,百度,淘宝,网易就经常的在使用

.clearfix::after 
      content:‘.‘;    /*给生成的标签元素添加一个象征性的内容*/
      display:block; /*将这个行内伪元素转换成块级伪元素*/
      clear: both;   /*给生成的伪元素添加清除浮动的功能*/
      height: 0;    /*将content内容中的.不在页面中显示*/
      visibility: hidden;  /*再加一层保险,将多余的部分隐藏掉,不要对页面布局造成影响*/
    
     .clearfix 
       *zoom: 1;
         /* IE6、7 专有 */

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>浮动带来的影响</title>
  <style>
    * 
      margin:0;
      padding: 0;
    
    .box 
      background-color:yellow;
    
     .one,
    .two,
    .three 
      width: 200px;
      height: 200px;  
      float: left;
    
    .one 
      background-color: blue;
    
    .two 
      background-color: purple;
    
    .three 
      background-color: orangered;
    
    .demo 
      width: 320px;
      height: 320px;
      background-color: cyan;
    
    .demo div 
      width: 100px;
      height: 100px;
      background-color: red;
    
    .demo::after 
      content:‘123‘
    
    .clearfix::after 
      content:‘.‘;    /*给生成的标签元素添加一个象征性的内容*/
      display:block; /*将这个行内伪元素转换成块级伪元素*/
      clear: both;   /*给生成的伪元素添加清除浮动的功能*/
      height: 0;    /*将content内容中的.不在页面中显示*/
      visibility: hidden;  /*再加一层保险,将多余的部分隐藏掉,不要对页面布局造成影响*/
    
     .clearfix 
       *zoom: 1;
         /* IE6、7 专有 */
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <div class="demo">
    <div></div>
  </div>
</body>
</html>
单伪元素清除法

 

5.双伪元素 用的也很多

.clearfix:after,
    .clearfix:before 
      content:‘‘;
      display:table;
    
    .clearfix:after 
      clear:both;
    
    .clearfix    
      *zoom: 1;  /*兼容到IE6  7 浏览器*/
    

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>浮动带来的影响</title>
  <style>
    * 
      margin:0;
      padding: 0;
    
    .box 
      /* height: 200px; */
      background-color:yellow;
    
     .one,
    .two,
    .three 
      width: 200px;
      height: 200px;  
      float: left;
    
    .one 
      background-color: blue;
      /* float: left; */
    
    .two 
      background-color: purple;
    
    .three 
      background-color: orangered;
    
    .demo 
      width: 320px;
      height: 320px;
      background-color: cyan;
    
    .demo div 
      width: 100px;
      height: 100px;
      background-color: red;
    
    .clearfix:after,
    .clearfix:before 
      content:‘‘;
      display:table;
    
    .clearfix:after 
      clear:both;
    
    .clearfix 
      *zoom: 1;
    
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <div class="demo">
    <div></div>
  </div>
</body>
</html>
双伪元素清除法

 

4.元素的显示方式分类

块级元素

行内元素

行内块元素

以上是关于CSS基础的主要内容,如果未能解决你的问题,请参考以下文章

HTML/CSS回顾之CSS基础

Css3之基础-2 Css 基础选择器

css实现基础图表

CSS基础

五、css基础(二)

css基础教程:对css代码精简