CSS盒子模型

  • CSS盒子模型已关闭评论
  • 268 views
  • A+
所属分类:CSS

CSS选择器:伪类选择器

伪类选择器,就是超级链接增加样式。

链接有四种状态::link(正常)、:hover(放上)、:active(激活)、:visited(访问过)

项目中应用时:

a:link,a:visited{color:#FF0000;}

a:hover{color:#0000FF;}

 

CSS字体文本属性:

CSS列表属性:list-style:none; 列表样式中,只有一个属性用得着,其它的都用不着;

CSS背景属性

Background-image:背景图片,background-image:url(../images/bg.gif);

Background-repeat:背景平铺,取值:no-repeat、repeat、repeat-x、repeat-y

Background-position:背景定位,background-position:水平方向 垂直方向

Background-attachment:背景固定还是滚动,取值:fixed、scroll

Background:url(images/bg.gif) no-repeat 10px 0px

 

 

CSS清除和浮动

Float:使HTML元素向左或向右浮动,取值:left、right

浮动的元素,可以向左或向右浮动,直到碰到包围框的边上或者上一个浮动框的边上为止;

浮动的元素将脱离普通文档流,并且不再占用空间,浮动元素的层级要高于普通文档流中的元素。

浮动元素将生成块元素,不管它原来是什么元素(块元素、行元素)。换句话说,行内元素浮动后,将变成块元素,就可以设置width和height。

注意:行内元素<span>设置width和height是没有用的,行内元素主要是靠内容决定width和height

 

Clear:清除上面的浮动特性,取值:left(左浮动)、right(右浮动)、both(两者)

(1)如何让包围元素从“视觉上”包住浮动元素呢?就需要在包围元素的最下边(浮动元素)加上一个清除浮动。

(2)清除浮动的后面的其它元素,都将恢复默认排版。

 

 

CSS盒子模型

每一个HTML元素,都可以看成一个“盒子”。

一个“盒子”具有:内容的宽或高、边框线、内边距、外边距。

一个“盒子”具有:width和height、border、padding、margin

一个“盒子”宽度或高度的计算:内容宽为70px,左右内边距分别为5px、左右外边距分别为10px,求“盒子”的宽度?

总宽度=内容宽70px + 左右内填充 5px*2 + 左右外边距 10px*2 = 100px

举例2:盒子总宽度为100px,内容宽度80px,内填充5px,求左右的外边距?

       一个外边距=(100px – 80px – 10px)/2 = 5px

 

CSS边框属性

Border-left:设置元素的左边线,border-left:粗细 线型 颜色;

例如:border-left:2px solid #FF0000;

Border-right:设置元素的右边线

Border-top:设置元素的顶边框线

Border-bottom:设置元素的下边框线

Border:简写形式,同时设置四个边框线;

border:1px solid #FF0000; //同时设置四个边框线

线型的取值:

None:无边线;

Solid:实线;

Dashed:虚线;

Dotted:点状态线

Double:双线

CSS内填充(内边距)

Padding-top:上内填充距离

Padding-right:右内填充距离

Padding-bottom:底内填充距离

Padding-left:左内填充距离

Padding:简写形式

Padding:5px;   //上右下左内填充分别为5px

Padding:5px 10px; //上下分别为5px,左右分别为10px

Padding:5px 10px 15px; //上填充5px,左右分别为10px,下填充为15px

Padding:5px 10px 15px 20px; //顺序必须为:上右下左,上填充5px,右填充10px,下填充15px,左填充20px;

 

CSS外边距

Margin-top:上外边距

Margin-right:右外边距

Margin-bottom:下外边距

Margin-left:左外边距

Margin:简写形式

Margin:5px;   //上右下左,外边距分别为5px

Margin:5px 10px; //上下分别为5px,左右外边距分别为10px

Margin:5px 10px 15px; //上外边距5px,左右外边距分别10px,下外边距15px

Margin:5px 10px 15px 20px; //分别设置四个外边距,顺序是:上右下左

 

外边距合并的问题(怪异现象)

两个垂直块元素的上下外边距,会发生合并的问题,取其中较大的一个值。

行内元素、浮动元素、定位元素,外边距不会发生合并;

解决的方法:

(1)只能其中一个元素增加下外边距,另一元素的上外边距设置为0px;

(2)也就是在上下两个元素的中间,加一个100px高的空<div>

 

综合案例:传智PHP学院首页

 

 

HTML引入CSS的方法

1、内嵌式

通过<style></style>标记来引入CSS代码,<style>一般放在<head>标记中;

<stype type=“text/css”>

Body{

Margin:0px;

Padding:0px;

}

</style>

2、外链式:链接外部的CSS文件(.css)

通过<link>标记,来引入外部的CSS文件,<link>标记一般放在<head>标记中。

格式:<link href=“CSS文件路径” rel=“stylesheet” type=“text/css” />

Href:指定外部CSS文件的路径和名称;

Rel:当前文件与链入的文件的关系,取值:stylesheet;

例如:<link href=“css/public.css” rel=“stylesheet” type=“text/css” />

 

3、行内式

每一个HTML元素都有一个公共属性style,通过该属性可以直接给该元素添加样式,并且它的优先级最高

<p style=“width:400px;height:300px;border:1px solid #444;padding:20px;”>这里是一个段落</p>

 

选择器优先级:行内样式 > ID选择器 > 类选择器 > 标签选择器