CSS学习笔记

参考地址: https://www.cnblogs.com/adongyo/p/11290826.html

• inline、block和inline-block的区别

         block块级元素(<p>、<h1>-<h6>、<ol>、<ul>、<li>、<table>、<div>) :

              (1)每个块级元素都从新的一行开始，并且其后的元素也另起一行

              (2)元素的高度、宽度、行高以及顶和底边距都可设置

              (3)元素宽度在不设置的情况下，是它本身父容器的100% 

         inline内联元素(<a>、<b>、<i>) : 

              (1)和其他元素都在一行上

              (2)元素的高度、宽度及顶部和底部边距不可设置

              (3)元素的宽度就是它包含的文字或图片的宽度，不可改变

              (4)内联元素不能嵌套块级元素

         inline-block内联块元素 : 

              (1)和其他元素都在一行上

              (2)元素的高度、宽度、行高以及顶和底边距都可设置

• 隐藏元素的方法

       display = none   元素在页面彻底消失, 空间会被其他元素占有

       visibility = hidden  元素消失后, 占有空间依旧保留

       opacity =  0 透明度设置为0

       height,width等盒模型设置为0

• 块级元素同一行显示

       (1)使用float

       (2)设置为内联块元素

       (3)采用flex布局