標準モードとハイブリッドモードでのボックスモデル
5634 ワード
関連情報:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html http://www.runoob.com/css/css-boxmodel.html まとめ:
主に標準モードのボックスモデルに対して学習標準モードの設定要素のwidthは実際にボックスモデルのcontentの幅を設定し、border値とpadding値を含まない.
border-boxのプロパティ
IE ：
width=(border+padding+content)
height=(border+padding+content)
：
width=content
height=content 主に標準モードのボックスモデルに対して学習標準モードの設定要素のwidthは実際にボックスモデルのcontentの幅を設定し、border値とpadding値を含まない.
<html lang="en">
<head>
<title>pullpage title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/jquery.fullPage.css">
head>
<style type="text/css">
.spe{
width:200px;
height:200px;
line-height:200px;
background-color: pink;
margin-bottom: 20px;
text-align: center;
}
.special1{
padding:20px;
border:5px solid red;
}
.special2{
padding:20px;
border:5px solid red;
box-sizing:border-box;
}
style>
<body>
<div class="spe"> border paddingdiv>
<div class="spe special1"> border paddingdiv>
<div class="spe special2">border-boxdiv>
body>
html>
border-boxのプロパティ
