您的位置：首页 > Web前端 > CSS

7css3的前缀及盒模型

2017-07-23 20:46 106 查看

<!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}/*当两个外边距相遇时合并，取用较大的那个外边距作为合并后的外边距*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航