CSS——基础知识

一、盒子模型

 

模型如下: 

技术分享

如图:盒子模型包括:margin、padding、border、content四部分。

margin:外边距,透明,能够显示父级的背景颜色等。

padding:内边距,显示当前元素本身的背景颜色。

border:边框。

content:显示内容的区域,对于CSS的width设置的宽度就是该区域的宽度。不过 IE 认为width是 border_left + border_right + paddiing_left + paddiing_right + content .

 

 二、元素的分类:

块级(block-level)元素和内联(inline)元素.

  • 块级元素: p, h1~h6, div, ul,table ,ol 等。display:block

每一个都单独显示一行,即显示前后均有换行符。高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,也可自行设置。

  • 内联元素: a,input, label , select,strong,img, span, li, br。display:inline(display:inline 这个属性能够修复著名的IE双倍浮动边界问题) 。

依附其他块级元素存在, 是基于语义级的基本元素。不换行。 和其他元素都在一行上;高、行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。其行高只能通过line-height来设置。

  • display: inline-block,与内联元素类似,不换行,但是具有 width height,padding,border,margin等块级元素具有的相关属性。

http://zhidao.baidu.com/link?url=bm6LggMhY7tfe6OMdva3UPDNEjv6AELojFHMwnSn4nGK3A0re28FMQRQGjWa8jXrruiIxac9nHpmyKwT1zhkua

可以通过 display 修改其默认属性。 如 利用 inline元素做导航条时,可以先设为块级元素再设宽度。

  另外还有一种可变元素:根据上下文语境决定该元素为块元素或者内联元素。包括 applet、 button 、 iframe 、 map 、 object、 script 等,一旦有上下文确定为块级元素或者内联元素,就按照其显示。

 

 

 

列表:http://blog.csdn.net/yuyanqiao/article/details/8554598

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。