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