CSS中的display属性

CSS中的display 属性规定元素应该生成的框的类型,几乎所有的主流浏览器都支持这个属性。
可能的值包括(摘自W3S)
CSS中的display属性_第1张图片
简要说明几个常用的属性
1、none属性
将元素设置为none属性后,元素将不予显示.none属性 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
1、inline属性:
元素生成行内框,对于该行内框设置属性height和width是没有用的,致使它变宽变大的原因是内部元素的填充属性padding。并且inline不单独占一行常用的行内元素是span和a(超链接)。
这里写图片描述
2、block
元素生成块级框,单独占一行。常用元素:div 是一个标准的块级元素。一个块级元素会新开始一行并且延展到其容器的宽度。其他常用的块级元素包括 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等。

<html>
<style type="text/css">
.inline{
    display:inline; 
    width:200px; 
    height:200px; 
    padding:15px; 
    background-color:#F00;
}
.block{
    display:block; 
    width:100px; 
    height:100px; 
    padding:5px;
    background-color:#0f0;
}
.inline-block{
    display:inline-block;
     width:100px;
     height:100px; 
     padding:5px;
     background-color:#00f;
}
.table-cell{
     display:table-cell;
     border: 1px solid #00f;
     width:100px;
     height:100px; 
     padding:5px;
     background-color:#00f;
    }
p.inline
  {
  display:inline;
  }
style>
<body>
<span class="inline">inline---1span>inline
<span class="inline">inline---2span>inline
<span class="inline">inline---3span>inline
<span class="block">
block
span> block
<span class="inline-block">
inline-block
span>inline-block
body>
html>

CSS中的display属性_第2张图片

你可能感兴趣的:(HTML与CSS,css)