CSS ?? ??
CSS??? ?? ??? ?? ??(?? ?? ??)??? ???. ?? ??? ?? ??? ?? ???, ??, ??? ? ??? ???? ??? ?????. HTML ??? ? ???? ?? ??? ???? ? ??(?? ??? ????)??? ?? ??? ???? ????.
CSS ?? ??: W3C ????? ? ???? ?? ??? ??? ?? ?? ?????(??? ??? ??? ??? ? ?? ??? ?????). ?? ??, ???, ??? ??)
??: ? ???? ???? ????? ?????(content), ?? ???(padding-top, padding-right, padding-bottom, padding-left), ???(border-top, border-right, border-bottom, border-left) ? ??(marging-top, margin-right, margin) -??, ??-??) ).
? ??? ????? ?? ??? ?? ?? ??? ?? ???(??)???. ?? ??, ??? ??? ??? ?????. ??? ??? ???? ????? ????? ? ??? ?? ??(??? ??)? ???? ????. ??? ??? ?? ??? ?????). ??? ??? ???? ??, ???? ??? ??? ?????.
?? ??:
?? ???: content
?? ???: border
?? ??? ? ?? ??? ??: padding ---padding ?? ??(?? ??)
??? ?? ?? ?? ?? ??? ??: border ---margin, ?? ??(??? ??) )
? ???? ?? ?? ?? ??: ?? ??? + ?? ??? + ?? ?? + ?? + ??? ?? + ??? ??? + ??? ???
CSS ?? ?? ??:
??? ??: ?? = ?? ?? = ??
?? ?? ??(???? ??? ??? ??): ??
?? ??: ??(????? ? ?? ???? ??? ? ??? ?????)
?? ?? ? ??? ??:
????? 4? ?? ??: ??, ???, ???, ??? ???? ?? ??? ??? ?? ????.
????? 1?? ?? ??: ??, ???, ??, ??
????? 2?? ??: ? ?? ????? ??? ????, ? ?? ????? ??? ???? ?????.
????? 3? ?? ??: ??, ??, ??? ?????
??? ??: border
?:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style type="text/css"> #box { width:200px; height:100px; margin:10px 20px 30px 40px; border:solid 10px red; padding:10px 20px 30px 40px; background-color:green; } #content { width:100%; height:100%; background:blue; } </style> </head> <body> <div id="box"> <div id="content"></div> </div> </body> </html>