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

CSS(九)盒子模型+CSS3新知识

2019-01-12 19:41 771 查看

标准盒子模型

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
#first{
/* 左内边距,即内容到左边框的距离 */
/* padding-left:20px ;*/
/* 右内边距,即内容到右边框的距离 */
/* padding-right:20px ; */
/* 上内边距,即内容到上边框的距离 */
/* padding-top:40px ;*/
/* 下内边距,即内容到下边框的距离 */
/* padding-bottom:40px; */
/*  统一设置4个方向的内边距 */
padding: 40px;
/* 设置4个方向的边框,值:边框宽度  样式  颜色  dashed:虚线边框   solid:实线边框*/
/*  border-top:20px  solid  red;
border-bottom: 20px solid  red;
border-left:20px solid  red;
border-right: 20px solid   red; */
/*  统一设置4个方向的边框 */
border:10px solid red;
/*设置下边的外边距 */
/*	margin-bottom: 20px;*/
/*设置4个方向的外边距 */
margin: 20px;
}
#second{
border-left:10px dashed  green;
border-right:10px dashed  green;
}
input{
border:5px dashed  green;

}
</style>
</head>
<body>
<div id="first" style="background-color: green;">我是div中的内容</div>
<!--	<hr width="90%" size="2" color="aqua">-->
<div id="second" style="background-color: pink;">我是div2中的内容</div>
用户名: <input type="text" >
</body>
</html>

清除默认样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*  清除默认样式,充分利用整个body */
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="background-color: red;">111</div>
</body>
</html>

块级元素居中对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*  清除默认样式,充分利用整个body */
*{
margin: 0;
padding: 0;
}
div{
/*  设置块级元素左右的margin为auto,会自动适应父元素,在水平方向上居中
* margin:值1(上下的margin)  值2(左右的margin)
*  */
margin:0px  auto;
/*margin-top:0px;
margin-bottom: 0px;
margin-left: auto;
margin-right:auto ;*/
}
</style>
</head>
<body>
<div style="background-color: red; width:90%;">111</div>
</body>
</html>

CSS3新知识

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
/* 设置圆角边框 */
border-radius: 20px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="first" style="background-color: red;">我是div中的内容</div>
</body>
</html>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: