CSS 教程 在线

437CSSDisplay(显示)

块级元素(block)特性:

  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性:

  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

块级元素主要有:

  •  address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有:

  • a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素):

  • applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用:

利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个:

  • display:block  -- 显示为块级元素
  • display:inline  -- 显示为内联元素
  • display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

436CSSpadding(填充)

margin 是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

padding 是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)

(1)padding-left:10px;/margin-left:10px;               左内/外边距
(2)padding-right:10px;/margin-right:10px;              右内/外边距
(3)padding-top:10px;/margin-top:10px;                上内/外边距
(4)padding-bottom:10px/margin-bottom:10px;               下内/外边距
(5)padding:10px;/margin:10px;                       四边统一内/外边距
(6)padding:10px 20px;/margin:10px 20px;               上下、左右内/外边距
(7)padding:10px 20px 30px; /margin:10px 20px 30px;          上、左右、下内/外边距
(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px;     上、右、下、左内/外边距

注意:将 padding 设置为负值无效:margin:0 auto; 只对块级元素起作用

435CSSpadding(填充)

对于 marginpadding ,百分比按照父元素的宽计算,这只发生在默认的 writing-mode: horizontal-tb;direction: ltr; 的情况下。

当书写模式变成纵向的时候,其参照将会变成包含块的高度。

对于定位元素,其百分比是按照定位了的父元素来计算(未定位的父元素会被跳过)。

更多内容可参考:CSS margin 百分比

434CSSpadding(填充)

padding:填充

padding-top:上边距

padding-bottom:下边距

padding-left:左边距

padding-right:右边距

433CSSpadding(填充)

padding 属性的书写格式总共有以下几种:

padding: 10px;             /* 意思是上下左右值全是 10px */
padding:5px 10px;          /* 意思是上下为 5px,左右为 10px */
padding:1px 2px 3px 4px;   /* 这个写法意思是:上为 1px,右为 2px,下为 3px,左为 4px */
padding:5px 10px 7px;      /* 这种写法意思是:上为 5px,左右为 10px,下为 7px */

注意:padding 后面 4 个值定义的顺序分别为 -- 上 右 下 左

而 padding-top 或者 padding-bottom 这种写法,只是单方面的定义了一个方向的值,这样写会增加 CSS 代码的长度,增加 CSS 样式的代码量,拖慢页面的加载速度。