7css3的前缀及盒模型

来源：互联网发布：淘宝上李宁官方网店编辑：程序博客网时间：2024/05/22 04:49

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>7css3前缀及盒模型</title>
<link rel="stylesheet" type="text/css" href="7css3前缀及盒模型.css">
</head>
<body>
<h1>11111111111111</h1>
<div id="div1">divdivdivdivdiv
<p style="text-align:right">ppppppppppppppppppppppppppp</p>
</div>
<div id="div2">divdivdivdivdiv
<p style="text-align:right">ppppppppppppppp</p>
</div>
</body>

</html>

-----------------------------------------------------------css内容-------------------------------------------------------------

/*webkit内核：-webkit-
trident内核：—ms-
gecko内核：-moz-
presto内核：-o-*/
h1{
font-size:50px;
-webkit-text-stroke:2px red;/*文字边框颜色*/
-webkit-text-fill-color:green;/*文字填充颜色*/
}
#div1{
width:30%;
    height:200px;/*默认值auto*/
    background:red;
max-width:200px;/*宽度的最大值*/
/*类似的有max-height，min-width，max-height*/
padding-top:10px;/*上内边距*/
padding-right:20px;/*右*/
padding-left:30px;/*左*/
padding-bottom:40px;/*下*/
padding：10px 20px 30px 40px;/*等于上面四个设置的综合*/
/*padding:10px; 上下左右都为10px   padding:10px 20px；上下为10px左右为20px
      padding：10px 20px 30px；上10px左右20px下30px*/
border:3px solid green;/*边框，solid表示实线*/
margin:100px;/*其他和padding类似*/
overflow:scroll;
/*如果内容溢出了元素内容区域，是否对内容的边缘裁剪,
overflow-x,overflow-y(是否对左右边缘和上下边缘进行裁剪，属性和overflow一样)，
visible不裁剪内容，可能会显示在内容框之外，hidden裁剪内容-不提供滚动条，
scroll裁剪内容-提供滚动条，auto如果溢出，则应该提供滚动机制*/

}
#div2{margin:50px}/*当两个外边距相遇时合并，取用较大的那个外边距作为合并后的外边距*/

阅读全文

0 0