div的笔记

最新推荐文章于 2024-07-18 14:29:38 发布

坛子成长记

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量454

点赞数

分类专栏： web基础文章标签： css

本文链接：https://blog.csdn.net/u011707402/article/details/41408091

版权

web基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

div

1.1div与Css的关系：

对在html中的div属性有：id,class;

基中id ,class在css中对应的是，‘ # ’‘ . ’;

1.2div中的浮动：

语法句式：

float:left;其中属性值有三个，分别是left,right,both;

当没有浮动的div不被浮动的覆盖时可以用：clear:(三个属性中的一个);

1.3 margin:盒子间的距离。

属性可以为五类:

margin:四个方向的；

margin-top,margin-right;margin-left;margin-bottom;

问题：如果只想设置两个方向的值是，是不是要写两个margin?这不就很麻烦？

答：不是，可以写成：margin:10px 20px;这样就是上和右是10 和20了。这种方法的分配顺序是：top,right,bottom，left(顺时针);

可以用margin来实现其中：

margin:0 auto

margin的重叠现象：相邻的两个普通元素上下边距并非想加

而是取最大的

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>margin</title>
	<style>
        #container{
        	width:1000px;
        	height: 600px;
        	background: green;
        }
        div{
        	width: 400px;
            height: 200px;
            background: yellow;
            margin-bottom:10px;
            float:left;
        }



	</style>
</head>
<body>
     <div id='container'>
		<div ></div>
		<div></div>
		<div></div>
	</div>	
</body>
</html>

结果是：

1.4div中的border：盒子的厚度

属性分为5类。和margin一样。

其中厚度的线的有多种。eg:solid,dashed等;

border:10px solid green,可以分析成：border-width,border-style,border-color;

1.5div中的padding：盒子的内边距

基本与前两个相同