CSS基础学习

可以将border-style、border-width、border-color一起应用到border、border-top、border-right、border-bottom、border-left上来实现对相关border属性的快速设置。当三个属性在放在一起设置时，最好按照border-style、border-width、border-color的顺序来给出值。

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例：border组合属性的设置。

#RainbowBox

{

background-color:yellow;

border-top:solid 20px red;

border-right:double 10px blue;

border-bottom:solid 20px green;

border-left:dashed 10px orange;

}

<!--[if !supportEmptyParas]--> <!--[endif]-->

3．4．3  padding属性

在元素的边框和它的实际内容之间的空白可以通过padding属性来控制。元素的4个间隙（padding）可以通过padding-top、padding-right、padding-bottom、padding-left来设置。与空白（margin）和边框（border）一样，你可以使用速记符形式的padding属性来一次性地对四边的间隙进行设置。

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例：一个涉及margin、border、padding的综合应用。

<style type = “text/css”>

<!--

#one

{

background:yellow;

border-style:double;

border-width:medium;

padding-left:1cm;

padding-right:0.5cm;

}

#two

{

background:yellow;

border-style:double;

border-width:medium;

padding-top:1cm;

padding-bottom:1cm;

}

#three

{

background:yellow;

border-style:double;

border-width:medium;

padding:1cm  1cm;

margin:0.5cm  4cm;

}

-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

3．4．4  width、height属性

举例：综合。

P

{

width:300px;

height:400px;

padding:10px;

border:solid 5px;

background-color:yellow;

color:black;

}

<!--[if !supportEmptyParas]--> <!--[endif]-->

3．4．5  float、clear属性

float属性影响元素在水平方向上的对齐方式，类似与多数html元素的align属性。它使得它所包含的元素“流”向左边或右边，这时我们称这个元素为“流动”元素。 clear属性对“流动”元素进行垂直定位，决定是否继续或清除当前的流动方式，类似于html元素br的clear属性，取值有left、right、both、none（默认）。

<!--[if !supportEmptyParas]--> <!--[endif]-->

3．4．6  display属性

CSS模型定义了三种类型的显示元素：块级元素、行内元素和列表。display属性允许一个元素的显示类型成为下面四个值中的一个：block，inline，list-item和none。

① none：元素将不会显示出来，并且也不会占据画布空间，这点和设置visibility属性不同。

② block：块级元素。

③ inline：行内元素。

④ list-item：列表元素

<!--[if !supportEmptyParas]--> <!--[endif]-->

举例：display属性使用。

① “关闭”一个段落，使其不显示出来：

p.remove{display:none;}

② 将一个块级元素（比如段落）转变成行内元素，这样就可以不换行显示！

p{display:inline;}

③ 将一个行内元素转变成块级元素，这样就增加了一个回车（换行）！

em{display:block;}

④ 强制一个元素在一定程度上像列表那样显示：

b{display:list-item;}

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!