CSS ?? ??
CSS ?? ??
?? HTML ??? ??? ??? ? ????. CSS??? "?? ??"??? ??? ???? ????? ?????.
CSS ?? ??? ????? ??, ???, ?? ? ?? ???? ??? ?? HTML ??? ????? ?????.
?? ??? ???? ?? ??? ?? ??? ??? ??? ??? ??? ??? ? ????.
?? ??? Box ??? ?????.
? ?? ??:
Margin(??) - ??? ?? ??? ??? ??? ??????.
Border - ??? ?? ??? ??? ??????.
Padding - ??? ?? ??? ??? ??? ???? ????.
Content - ??? ???? ???? ???? ?????.
?? ?????? ??? ??? ??? ???? ????? ?? ??? ??? ????? ??? ???.
?? ?? ? ??
?? : CSS ??? ?? ? ?? ??? ???? ??? ??? ??? ??? ?????. ??? ??? ??? ????? ??, ??? ? ??? ???? ???. .
?? ??? ??? ? ??? 300px???.
??:250px;
padding:10px;
border:5px solid grey;
margin:10px;
?? ??? ???:
250px(??)
+ 20px(?? + ??? ??)
+ 10px(?? + ??? ???)
+ 20px(?? + ??? ??)
= 300px
??? ???. ??? 250??????. ??? ?? ??? 250??? ??? ?????.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(php.cn)</title>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/58088c38d34b6935.jpg" width="250" height="250" />
<div class="ex">上面的圖片是250 px寬。這個元素的總寬度也是250 px。.</div>
</body>
</html>????? ???? ??? ???
??? ?? ??? ?? ?? ?? ??? ??? ????.
??? ?? ?? = ?? + ?? ?? + ??? ?? + ?? ??? + ??? ??? + ?? ?? + ??? ??
?? ?? ??? ?? ?? ??? ??? ????.
??? ?? ?? = ?? + ?? ?? + ?? ?? + ?? ??? + ?? ??? + ?? ?? + ?? ??
