CSS基础教程,CSS边距,CSS相对定位和绝对定位的区别

Margin-外边距

Margin:40px;   表示:上下左右都为40像素的外边距

Margin: 10px  20px; 表示:第一个参数为上下外边距为10像素;第二个参数表示左右外边距为20像素,多个参数之间空格隔开

Margin:10px 20px 30px; 第一个参数表示:上外边距为10像素,第二个参数表示:左右外边距为20像素,第三个参数表示:下外边距为30像素

 

Margin: 10px 20px 30px 40px;表示:按照顺时针方向,上,右,下,左的外边距。

Margin -left:单独指定左外边距

Margin -right: 单独指定右边距

Margin -top: 单独指定上边距

Margin -bottom: 单独指定下边距

 

Padding-内边距。所有属性参考以上外边距提供的信息。

 

font-family:字体类型。中文直译:font为字体,family为家庭,家族。例子:font-family:”微软雅黑”;

width:180px; 宽度为180像素;

height:180px;高度为180像素

float:浮动,指块级元素,飘起来。比如div这个块级元素飘起来,它后面的块级认为它不存在,直观体现为飘起来的块级元素会覆盖到未浮动的块级元素之上。除文字以外。文字会在高度内寻找浮动元素,磁力链接在周围。如果文字所在的父级元素也浮动后,该特性被取消。

 

Border:边框。例子Border:1px solid #666; 第一个参数边框大小,第二个,边框线的类型(实体线,虚线等);第三个,边框颜色

Border-left:单独指定左边框

Border-right: 单独指定右边框

Border-top: 单独指定上边框

Border-bottom: 单独指定下边框

 

font-size:字体大小,例子:font-size:20px;  字体大小20像素

 

color:内容颜色,一般指文字的颜色。例子:color:#666

background:直译:back==后面,ground==场景。一起解释:后面的场景==背景。

例子:background:#6666 背景颜色为#6666

 

line-height:行高;直译:line==行,线,height ==高度。一起解释:一行所占的高度。

一般用途,是同一行文字所占用的高度,文字永远在行高的垂直方向上居中。可以利用此方法让文字在垂直方向居中。

 

clear:both;取消浮动(清除浮动),clear==清除,both==两侧,上下之间清除掉。

一般用途,是它的上部的兄弟元素有浮动现象的,为了让它后面的其他元素(它的父级元素。或它的兄弟元素,或它的子级元素===后面的所有元素)得到它前面浮动的元素的高度和宽度。直接理解为,解决浮动的元素导致的排版高度获取不准确的现象。

 

Ul,li组合标签是无序列表,主要用途也为排版所需要。看到导航,或文章列表时使用。

 

last-child:存在多个兄弟元素的标签,加上冒号(:last-child)就可以单独绑定选择最后一个兄弟元素。

first-child: 存在多个兄弟元素的标签,加上冒号(: first-child)就可以单独绑定选择第一个兄弟元素。

Hover:标签被鼠标滑动经过时,激活的CSS属性,例子:a:hover{ background:#666} 指:a标签鼠标滑动经过时改变背景颜色为#666

text-decoration: underline 超链接下划线

text-decoration: overline 超链接上划线

text-decoration: line-through 删除线

text-decorationnone,设置超链接下划线为空。effective business solutions

 

 

position:absolute 绝对定位,使用决定定位的盒子将退出标准流,以任何一个非标准流的祖先级盒子的左上角为原点。支持left,top,right,bottom固定自己的位置,不保留自己的标准流的所占空间,(其他元素认为它不存在。)。

 

 

position: relative相对定位,相对于原来的位置,支持left,top,right,bottom固定自己的位置,与其他元素无关。。但是保留在标准流中原来位置的空间。

 

 

 

position:fixed; 固定定位(浮动定位)。相对于浏览器可视窗口,支持left,top,right,bottom固定自己的位置。不保留自己的标准流的所占空间,并且直观体现为一直浮动在网页浏览器的固定位置。


回到

顶部