黑马程序员_css study notes(Sorted from w3cschool)2

本文链接：https://blog.csdn.net/liuxu93466/article/details/7522107

---------------------- android培训、java培训、期待与您交流！ ----------------------

6、 Border Properties

Property	Description
border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders

7、CSS Outlines

An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out".

The outline properties specifies the style, color, and width of an outline.

Property	Description	Values	CSS
outline	Sets all the outline properties in one declaration	outline-color outline-style outline-width inherit	2
outline-color	Sets the color of an outline	color_name hex_number rgb_number invert inherit	2
outline-style	Sets the style of an outline	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	Sets the width of an outline	thin medium thick length inherit	2

Note: IE8 supports the outline properties only if a !DOCTYPE is specified.

Example：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

p {border:1px solid red;}

p.dotted {outline-style:dotted;}

p.dashed {outline-style:dashed;}

p.solid {outline-style:solid;}

p.double {outline-style:double;outline-color:green;outline-width:10px;}

p.groove {outline-style:groove;outline-color:yellow;outline-width:5px;}

p.ridge {outline-style:ridge;}

p.inset {outline-style:inset;}

p.outset {outline-style:outset;}

</style>

</head>

<body>

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline

A ridge outline

An inset outline

An outset outline

Note: IE8 supports the outline properties only if a !DOCTYPE is

specified.

</body>

</html>

8、Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

Properties：margin、margin-top、margin-left、margin-right、margin-bottom

The margin property can have from one to four values.

margin:25px 50px 75px 100px;:top margin is 25px,right margin is 50px,bottom margin is 75px,left margin is 100px

margin:25px 50px 75px;:top margin is 25px,right and left margins are 50px,bottom margin is 75px

margin:25px 50px;:top and bottom margins are 25px,right and left margins are 50px

margin:25px;:all four margins are 25px

Value	Description
auto	The browser sets the margin. The result of this is dependant of the browser
length	Defines a fixed margin (in pixels, pt, em, etc.)
%	Defines a margin in % of the containing element

10、CSS Padding

The CSS padding properties define the space between the element border and the element content.Properties：padding、padding-left、padding-right、padding-top、padding-bottom；

Example：

p{background-color:yellow;}

p.padding{

padding-top:80px;

padding-bottom:77px;

padding-right:50px;

padding-left:50px;}

</style>

</head>

<body>

This is a paragraph with no specified padding.

This is a paragraph with specified paddings.