CSS的inline、block与inline-block

p{background-color:red;高度：500px；宽度：30%；填充：20px；边距：20px；浮动：左；}div{背景色：绿色；高度：50px；宽度：40%；填充：20px；:40px;边距：20px；向左飘浮;width:200px;}strong{背景颜色：蓝色；高度：70px；填充：40px；margin:20px;}CSSinline、block、inline-block基本知识内联元素一般是内容的容器，而块级元素一般是其他容器的容器。内联元素适合显示特定内容，而块级元素适合布局。块级元素（block）：独占一行，对width和height的属性值生效；如果没有给出宽度，块级元素默认为浏览器的宽度，即100%宽。行内元素（inline）：一行中可以存在多个标签，不影响width和height属性值，width和height被内容完全展开。行内块元素（inline-block）：结合了行内和块级的优点，可以设置长宽，使padding和margin生效，可以和其他行内元素并排。其中img和input是行内块元素。内联元素与块元素的转换：float：内联元素设置为float:left/right后，内联元素的display属性会被赋予块值，具有浮动特性。内联元素之间莫名其妙的空白被移除。p{background-color:red;高度：500px；宽度：30%；填充：20px；边距：20px；浮动：左；}div{背景色：绿色；高度：50px；宽度：40%；填充：20px；:40px;边距：20px；向左飘浮;width:200px;}strong{背景颜色：蓝色；高度：70px；填充：40px；margin:20px;}

内联元素1内联元素2如图，当内联元素设置为向左浮动后，就可以设置它的宽度了，说明它已经变成了块级元素。2.position：定位内联元素时，position:absolute和position:fixed都会使原内联元素成为块级元素。三、显示：1.将块级标签转换为行内标签：display:inline;2.将行内标签转换为块级标签：display:block;3.转换为inline-block标签：display:inline-block;commondisplaypossibleValue:Feature1.text-align属性作用于块级元素，而不作用于行内元素：原因是如果块级标签没有给出宽度，块级元素默认为浏览器的宽度，为100%width，则居中在100%width生效；但是内联元素的宽度完全被内容扩展了，所以宽度就是内容扩展的宽度：所以块级居中在盒子的中间，但是因为内联元素的宽度是内容扩展的宽度,没有可以居中的空间，所以text-align:center;没有效果；但是如果把字体转换成块级，就不一样了：2.块级元素占用单行，宽度会占用父元素的宽度。元素不占一行，相邻行的元素可以排在同一行。3、块级元素可以设置宽高，但是对行内元素设置宽高是无效的，即使设置了宽高，块级元素还是占一行。注意，当没有显式指定块级元素的宽高值时，块级元素的大小由内容决定。当指定了width和height的值时，内容会溢出超出块级元素的大小。这时候块级元素必须要呈现什么行为取决于overflow的值（visible,hidden,overflow,scroll）4.块级元素可以设置margin和padding属性，水平方向的margin和paddingmargin-left和padding-right等内联元素的direction可以产生margin效果，但是垂直margin-top和margin-bottom不起作用。5、内联元素的padding-top和padding-bottom会起作用，但是就像脱离标准流程一样（即padding-left和padding-right的层次高于其他元素），它们不会占据位置，同时也把其他元素覆盖。但是，如果内联元素没有内容，“padding-top,padding-bottom”就不起作用了。如果你想让它起作用，你只需要为padding-left或padding-right设置一个值，或者当内联元素有内容时它就会起作用。div{背景颜色：绿色；高度：50px；宽度：40%；；填充：20px；边距：20px；}跨度{背景色：灰色；高度：70px；:40px;margin:20px;}strong{background-color:blue;高度：70px；填充：40px；边距：20px；向左飘浮;}

块级元素一

内联元素1内联元素2如图所示，当我们改变padding值时，效果是背景向四个方向扩展，padding-top和padding-bottom增加，但是对块元素一没有影响（垂直方向），否则内联元素一不会被挤进块元素。在下面的例子中，你可以看到，如果内联元素没有内容，“padding-top,padding-bottom”将不起作用