行块属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width: 300px; height: 300px;background: lightblue;
display: inline-block;
}
span{
width: 300px; height: 300px; background: lightgreen;
display: inline-block;
}
input{
width:400px; height: 50px;
}
</style>
</head>
<body>
<!-- 块标签
div,ul,li,ol,h1~h6,p
可以设置宽高,不可以与别人共处一行
不设置宽度的情况下,默认宽度是100%
行内标签
span,strong,a
不可以设置宽高,可以与别人共处一行
其宽高由内容撑开
行内块标签
img,input
可以设置宽高,可以与别人共处一行
-->
<div>我是div</div><div>我是div</div>
<span>我是span</span><span>我是span</span>
<input type="text" name="">
<input type="text" name="">
</body>
</html>
2 盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 500px;
height: 500px;
background:lightblue;
overflow: hidden;
/*border-width: 5px;
border-color: red;
border-style: solid;*/
border: 5px solid red;
/*border-radius: 255px;*/
/*边框的一半为⚪border-radius:50%;*/
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-top-right-radius: 50%;
/*dotted double dashed solid*/
}
#div2{
width: 100px;
height:100px;
background:lightgreen;
/*margin: 50px 0 0 50px;*//*上右下左
/*margin: 0 50px 10px;上0左右50下10*/
/*margin:20px 30px; 上下20左右30*/
/*margin:10px;四个方向都是10*/
/*margin-left: 50px;
margin-top: 50px;
/*margin塌陷*/
margin: 100px auto;
}
#div3{
width: 0;
height:0;
border-top: 50px solid red;
border-right: 50px solid blue;/*tansparent透明色*/
border-left:50px solid rgba(234,54,35,0.43);/*最大255*//*a代表透明的从0~1*/
border-bottom: 50px solid yellow;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
<span>123456</span>
</div>
<div id="div3">
</div>
</body>
</html>
3浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#father{
width:700px;
height:30px;
background:lightblue;
margin:100px auto 0;}
#son1{
width:500px; height: 100%; background:red;display: inline-block;
float: right;
}
#son2{
width: 100px; height: 100%; background: green;
display: inline-block;float: right;
}
</style>
</head>
<body>
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框为止
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
</body>
</html>