2015年9月22号css第二次课

常用的块级元素和行内元素

 

 1、块级元素（p、hr、div、table、ul、ol、li、h1-h6）

 2、行内元素（a、img、input、span）

 

 

块级元素和行内元素相互转换

 

    1、display:inline;　块级转成行内元素

 　2、display:block;　行内元素转成块级元素

 　3、display:inline-block;　具有行内元素和块级元素特点: width、height会受到影响；不会单独占满一行

 

css盒子模型

 

    内间距：padding

　　　　　　padding:10px; 上下左右10px

　　　　　　padding:10px 20px; 上下10px、左右20px

　　　　　　padding:10px 20px 10px; 上10px、左右20px、下10px

　　　　　　padding:1px 2px 3px 4px; 上1px、右2px、下3px、左4px

 

　  外间距：margin　　

 

                margin:10px; 上下左右10px

                margin:10px 20px; 上下10px、左右20px

                margin:10px 20px 10px; 上10px、左右20px、下10px

                margin:1px 2px 3px 4px; 上1px、右2px、下3px、左4px

                注意：margin对行内元素只支持左右，不支持上下；padding全支持。