------------------------------------------------------------------------ 代ç æ¸…å• 4-1 ------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>‹¹å¼å¸ƒå±€</title>
<title>Document</title>
<style type="text/css">
div {
width: 90%;
height: 200px;
background: blue;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>---------------------------------------------------------------------------------------------------------------------------------------------------------------------
å…ƒç´ çš„ç›¸å¯¹å®½åº¦çš„å‚ç…§ç‰©æ˜¯å…¶çˆ¶å…ƒç´ ã€‚ä»£ç ä¸divåQŒæ‰€ä»?/span>CSS的宽度设计äØ“(f¨´)90%å…ƒç´ å®½åº¦çš?/span>90%
有必™å»è¦æ示一点，在ã€?/span>HTML5ç›’å模型》ä¸æ到˜q‡å…ƒç´ çš„widthç›’åçš„å®½åº¦ï¼Œå…ƒç´ å®žé™…å 的宽度˜q˜è¦åŠ 上padding的倹{€?/span>
å…ƒç´ ä¸å¢žåŠ 两ä¸?/span>p所½Cºã€?/span>
------------------------------------------------------------------------ 代ç æ¸…å• 4-2 ------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>‹¹å¼å¸ƒå±€</title>
<title>Document</title>
<style type="text/css">
div {
width: 90%;
height: 200px;
background: blue;
margin: 0 auto;
}
p.no1 {
width: 60%;
height: 150px;
background: yellow;
padding-left: 10%;
float: left;
}
p.no2 {
width: 20%;
padding: 0 5%;
height: 150px;
background: red;
float: left;
}
</style>
</head>
<body>
<div>
<p class="no1">æ–‡å—</p>
<p class="no2">æ–‡å—</p>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
p.no1çš?/span>widthå’?/span>20%çš?/span>width˜q˜è®¾¾|®äº†(ji¨£n)padding-leftåQŒè¿™ä¸ªå€ég¹Ÿæ˜¯ç›¸å¯¹äºŽçˆ¶å…ƒç´?/span>div属性æ¥è¯´çš„åQ所ä»?/span>p.no1。åŒç?/span>p.no2ã€?br />
属性，˜q˜æ˜¯padding属性，对其˜q›è¡Œç™‘Öˆ†æ¯”设¾|®çš„时候，å‚ç…§çš„éƒ½æ˜¯çˆ¶å…ƒç´ çš?/span>widthmin-width属æ€?/span>
所½Cºã€?/span>
------------------------------------------------------------------------ 代ç æ¸…å• 4-3 ------------------------------------------------------------------------
div {
width: 90%;
height: 200px;
background: blue;
margin: 0 auto;
max-width: 1215px;
min-width: 400px;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
div宽度çš?/span>90%åQŒæœ€ž®ä¸ä¼?x¨¬)å°ä?/span>400px
OldBoy 2017-01-04 14:33 å‘表评论
]]>---------------------------------------------- 代ç æ¸…å• 3-1 -----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 Demo</title>
</head>
<body>
<div>CSSç›’å模型</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
‹¹è§ˆå™?#8220;å¼€å‘者工å…?/span>视图ä¸å¯ä»¥çœ‹åˆ°ç¤ºä¾‹ä»£ç ä¸div所½Cºã€?br />
---------------------------------------------- å›?3-1 ----------------------------------------------------
----------------------------------------------------------------------------------------------------------
½CÞZ¾‹ä¸çš„divã€?/span>borderåQŒå°±åƒå¤šä¸ªç›’å套在一èµøP¼Œ˜q™ä¹Ÿè®¸å°±æ˜?#8220;ç›’å模型”åå—çš„ç”±æ¥å§ã€‚如果打个比方的è¯ï¼ŒHTML看楞®Þq›¸å½“于一òq…ç”»åQŒå†…容就是画本èínåQ?/span>padding是画框，margin‹¹è§ˆå™¨ä¸‹åQ?/span>padding的默认å€égØ“(f¨´)0的默认å€égØ“(f¨´)8åQŒè€?/span>1350 x 10内容部分的宽度，也就æ˜?/span>div属性的倹{€‚å¯ä»¥çœ‹å¾—出æ¥ï¼ŒHTML属性的宽度默认是以“外扩的方å¼å‘ˆçŽ°çš„ã€?/span>
对这ä¸?/span>div所½Cºã€?br />---------------------------------------------- 代ç æ¸…å• 3-2 -----------------------------------------------
div {
width: 200px;
padding: 10px;
border: solid 5px;
margin: 20px;
}
----------------------------------------------------------------------------------------------------------
åœ?/span>HTMLå…ƒç´ ä¸ä»¥linkæ ·å¼è¡¨ï¼Œå¦‚代ç 清å?/span>3-3---------------------------------------------- 代ç æ¸…å• 3-3 -----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5 Demo</title>
<link href="3-1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>CSSç›’å模型</div>
</body>
</html>
ç›’å模型的å˜åŒ–如å›?/span>3-2---------------------------------------------- å›?3-2 ----------------------------------------------------
----------------------------------------------------------------------------------------------------------
实际å 有的宽度äØ“(f¨´)230 x 48的基¼‹€ä¸ŠåŠ padding的宽度ã€?/span>
ä¸å¢žåŠ 一个有兛_…ƒç´ 宽度设¾|®çš„属性：(x¨¬)box-sizing讄¡½®çš„是è°çš„宽度。修改之å‰çš„CSS的设¾|®ï¼Œå¦‚果代ç 清å•3-4---------------------------------------------- 代ç æ¸…å• 3-4 -----------------------------------------------
div {
width: 200px;
padding: 10px;
border: solid 5px;
margin: 20px;
box-sizing: border-box;
}----------------------------------------------------------------------------------------------------------
修改åŽè¿™ä¸?/span>div所½Cºã€?br />
---------------------------------------------- å›?3-3 ----------------------------------------------------
----------------------------------------------------------------------------------------------------------
box-sizeè¡¨ç¤ºå…ƒç´ çš?/span>with˜q™ä¸ªç›’å的宽度，而ä¸å†æ˜¯å†…容åQ?/span>content属性的å€ÆD¡¨çŽ°åœ¨å†…凔åQŒè€Œä¸æ˜¯ä¹‹å‰é»˜è®¤çš„“外扩”ã€?/span>
box-sizingå’?/span>content-box(。这个属性在‹¹å¼å¸ƒå±€ä¸ç‰¹åˆ«çš„常用åQ?/span>
OldBoy 2017-01-04 13:04 å‘表评论
]]>