CSS的元素的小使用

昨天的文章里面了解什么是内边距（margin)和外边距(padding），让我开始讲解今天的学习：

一、显示与隐藏

  dipaly：（显示）

隐藏
dipaly：none；（不显示）

   block(表示块的意思)可以设置宽高，独占一行。

​
是否显示： diplay：blaock;

  通过透明，实线元素隐藏

opacity：0;

二、小盒子的应用

(1)让小盒子变成弹性盒子

display：flex；

(2)让小盒子里面的子元素左右居中

justify-content:center

（3）让小盒子里面的子元素上下居中

align-items：center

三、隐藏小样式

（1)不允许换行

white-space：nowrap

（2）溢出隐藏

overflow：hidden；

（3）隐藏内容

text-overflow:ellipsis；

四、元素转换

行元素：可以在别的元素在一行显示，但是不能设置宽。比如标签(a、span、b、ins）

行内元素： 可以跟别的元素在一行显示，可以设置宽高。比如（img、input）

块元素：独占一行，可以设置宽高(div、p、h1、li）

如何将元素转换成行、行内块和块？

dispaly：black；转换成块元素

dispaly：inline；行元素

dispaly：lnline black；行内块

注意：三个元素可以随意切换，让行元素换成其他就加其他元素。

五、定位

（1）相对定位

相对于自身本来的位进行移动，保留那个原有的位置

position：relative
方向：数值px;
方向：数值px;

(2)绝对定位

第一种方式是：默认相对于html的边进行移动

position：absolute；
方向：0px；
方向：0px；靠边数值为0

第二种方式是：相对于父级进行移动，需要给父级加一个定位（我们学过的父级是标签标签里面包含的一个样式为父亲与儿子的关系称为父级）（相对定位，不需要加方向与数值）

div{position：relative;}父级

div.a{position:absolute;
      方向：数值px；
      方向：数值px；

（3）固定定位

固定在浏览器中的一个页面滚动，内容不会动。

相对我们视野内能看到的移动

position：fixed；
 方向：数值px；
 方向：数值px；

欧克欧克，写完后又了解了一遍，继续加油！