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

CSS学习笔记：布局(内外边距与漂浮)与定位

2017-07-17 22:37 821 查看
布局

CSS文件，定义了三种ID样式与四种类样式。ID样式用于演示边距，类样式用于演示漂浮

body
{
border:black dashed 1px;
margin:0px;		/*常用语句*/
}
div
{
border:black solid 1px;
height:50px;width:200px;
padding-left:10px;		/*内边距*/
margin-left:10px;		/*外边距*/
}
#div_1
{
background-color:blue;
border-top:red dashed 1px;
padding-top:10px;
margin-top:10px;
}
#div_2
{
background-color:yellow;
border-right:red dashed 1px;
padding-right:10px;
margin-top:10px;
}
#div_3
{
background-color:gray;
border-bottom:red dashed 1px;
padding-bottom:10px;
margin-top:10px;
}

.div_1
{
background-color:blue;
float:right;		/*往右漂浮,后续的文档会移向其左边*/
clear:none;
}
.div_2
{
background-color:yellow;
}
.div_3
{
background-color:gray;
float:right;
}
.div_4
{
background-color:gray;
clear:right;		/*不允许右边存在浮动元素*/
}
HTML文件

<html>
<head>
<title>boxDemo</title>
<link rel="stylesheet" href="boxcss.css" type="text/css">
</head>
<body>
<p>padding and margin Demo</p>
<div id="div_1">div_1</div>
<div id="div_2">div_2</div>
<div id="div_3">div_3</div>

<hr/>

<p>float Demo</p>
<div class="div_1">div_1</div>
<div class="div_2">div_2</div>
<div class="div_3">div_3</div>
<div class="div_4">div_4</div>
</body>
</html>


定位

CSS文件

body
{
border:black dashed 1px;
margin:0px;		/*常用语句*/
}
div
{
border:black solid 1px;
height:100px;width:200px;
}

.bigbox
{
background-color:gray;
border:gray solid 1px;
height:500px;width:500px;
position:absolute;top:50px;left:50px;		/*绝对位置,元素不再在普通文档流中*/
}
.div_1		/*绝对定位,后续的div2会接替div1的位置*/
{
background-color:blue;
position:absolute;top:100px;left:100px;		/*定位以父元素为基准*/
}
.div_2		/*相对定位,div3不会接替div2的位置*/
{
background-color:yellow;
position:relative;left:50px;		/*相对位置,元素仍在文档流中*/
}
.div_3
{
background-color:gray;
}

HTML文件

<html>
<head>
<title>boxDemo</title>
<link rel="stylesheet" href="boxcss.css" type="text/css">
</head>
<body>
<div class="bigbox">
<p>绝对位置演示</p>
<div class="div_1">div1</div>
<div class="div_2">div2</div>
<div class="div_3">div3</div>
</div>
</body>
</html>

示例
CSS文件

body
{
border:black dashed 1px;
margin:0px; /*常用语句*/
}
div.img_and_text
{
border:black dashed 1px;
height:300px;width:600px;
position:absolute;top:10px;left:10px;
}
div.img_div
{
float:left;
}
div.text_div
{
font-family:"华文隶书";
color:black;
font-size:22px;
}
div.flag /*水印类*/
{
font-family:"华文隶书";
color:gray;
font-size:22px;
position:absolute;top:250;left:10px;
}HTML文件
<html>
<head>
<title>PICandTEXTDemo</title>
<link rel="stylesheet" href="boxcss.css" type="text/css">
</head>
<body>
<!--注意元素的封装-->
<div class="img_and_text">
<div class="img_div">
<img src="006.jpg"/>
</div>
<div class="text_div">
这是一幅图片blabla
这是一幅图片blabla
这是一幅图片blabla
这是一幅图片blabla
</div>
<div class="flag">
水印
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html
相关文章推荐
新的分享
章节导航