css中的div容器笔记

最新推荐文章于 2024-06-14 09:42:20 发布

able陈

最新推荐文章于 2024-06-14 09:42:20 发布

阅读量3.4k

点赞数

分类专栏： html 文章标签： div容器笔记

本文链接：https://blog.csdn.net/qq_42330141/article/details/86766364

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

盒子模型

padding-border-margin模型，也叫盒子模型。
padding:为内边距； border:边界； margin：外边界；
举个例子吧：

<html>
<head><title>div</title></head>
<style type="text/css">
body{
 border:1px black solid;
}
h3{
 margin:10px;
 width:800px;
 height:200px;
 padding:30px;
 border:1px black dotted;
}
div{
 margin:10px;
 width:300px;
 height:50px;
 padding:50px;
 border:1px blue double;
}
</style>
</head>
<body>
<h3>div基础总结</h3>
<div>网页的基础就是一个个盒子的有序排列</div>
</body>
</html>

可以看到，body也是具有边界的。
一个独立的盒子可以看作由四个部分:1.content 2.border 3.padding 4.margin
一个盒子的宽度：content+padding+border+margin
其中content的宽度和高度由width,和height控制
一个盒子的四条边全部都可以设置border,padding,margin属性

从图上可以看到，margin代表的就是块与块之间的距离，padding代表的就是content和border之间的距离。

关于边框的设置

三个属性width color style
可以分别使用border-width border-color border-style来分别设定
这里的width的值和文本的之有所不同：
文本：normal bold lighter 100-900
边框:thin medium thick 具体的数值( 5px 2in等)
color属性和文本的完全一致。
重点是style属性

none:无边界
hidden:边界隐藏,效果类似于none
dotted dashed solid double
groove inset outset(这三种在浏览器上显示不出来)

还有一种简单的关于边框的设置方法
border ___ ____ _____(三个空上分别填上width color style的值)当然这样只能设置整个边框的属性。(四个边框style一致)

当有多个边框设置相互冲突时，按最后一个设置边框的值来处理

当使用不同个数的数据时，代表的含义也不一样

如：margin:12px(代表四个方向的margin值都为12px)==margin:12px 12px 12px 12px
margin:12px 15px(代表上下方向的margin的值为12px,左右的margin的值为15px)
margin:12px 15px 16px(代表top的margin为12px,左右的margin值为15px,bottom的值为16px）
margin:12px 15px 16px 17px(上右下左)
当设置背景颜色时候有一些特殊的地方
body是一种比较特殊的盒子，当使用设置背景时会将margin区域也进行覆盖
除了body之外的盒子，当设置背景时，只会覆盖content+padding(一部分ie中会覆盖到border）

标准文档流（标准流）

是指在不使用其他与排列和定位有关的特殊css规则时，各种元素的排列规则。

块级元素：同级的块级元素之间，竖直排列。如：body,ul,li,ol,p等
行内元素：类似于文字元素，和一些本身不占有区域，只是在其他元素的基础上指定了范围。如：strong标记，a标记。等

两种常见的容器标志div标签和span标签

div标签属于块状标签，只是相对于一些具有特殊含义的块状元素，div是一个通用的块状元素，可以容纳各种元素
span标签和div标签一样都是隔离出一定的块状区域，只是span是属于行内元素。
div标签中可以包含span标签，但是span标签中不可以包含div标签

margin在盒子位置中的作用与注意

在这里插入图片描述
当两个盒子相邻时，水平之间的间距时margin-right+margin-left
但是当两个盒子竖直排列时就不同了

之间的竖直距离取决于，两者之间的较大者，较小的塌陷到了较大的里面。
盒子在宽度上自动延伸，在高度上自动收缩(能够容纳下内容的最小值)。

在排版中盒子最重要的两种属性position和float

float属性

left right两种选项

<html>
	<head><title>div浮动</title></head>
	<style type="text/css">
	body{
 margin:15px;
 font-family:Arial;
 font-size:12px;
 border:1px blue solid;
}
.father{
 background-color:#FFFF99;
 border:1px #111 solid ;
 padding:5px;
}
.father div{
 padding:10px;
 margin:15px;
 border:1px #111 dashed;
 background-color:#FF90ba;
}
.father p{
 border:1px #111 dashed;
 background-color:#FF90ba;
}
.son1,.son2{
 float:left;
}
.son3{
 float:right;
}
	<body>
	<div class="father">
 <div class="son1">Box-1</div>
    <div class="son2">Box-2</div>
    <div class="son3">Box-3<br />Box-3</div>
    <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，
    这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字。</p>
</div>
</body>
</html>

在这里插入图片描述
这里值得注意的是box2和box3的左边界都是box1的左边界，当把容器对象设置为浮动类型的话，就脱离了标准流，可以先忽略。
一个div的范围是由它里面的标准流内容决定的，与其里面的浮动的内容无关。
当把p标签删除之后:

在这里插入图片描述图中可以看到，body标签的边框缩小而且不包含三个div容器。

盒子的定位Position

具有四个属性：static(标准流下),relative,absolute,fixed.

<html>
<head><title>div的position</title>
<style type="text/css">
body{
 margin:20px;
 font:Arial 12px;
}
#father{
 background-color:#a0c8ff;
 border:1px black dashed;
 padding:15px;
}
#block1{
 background-color:#FFF0ac;
 border:1px black dashed;
 padding:10px;
</style>
</head>
<body>
	<div id="father">
		<div id="block1">Box-1</div>
	</div>
</body>
</html>

在这里插入图片描述
1.relative
是相对于本来box的位置的偏移
在style标签的最后添加
position:relative;
left:30px;
top:30px;

使用相对位置的容器仍在标准流中，而且不会对父块产生影响，既然还在标准流中，就不会对兄弟块产生影响。

绝对定位absolute

绝对定位是以离盒子最近的一个已经定位的祖先元素为基准进行便宜的，如果没有定位的祖先元素，那么会以浏览器的窗口为基准定位。
这里已经定位的含义是position属性被设置为不是static的别的属性。

<html>
	<head><title>绝对定位</title>
body{
 margin:20px;
 font:Arial 12px;
}
#father{
 background-color:#a0c8ff;
 border:1px black dashed;
 padding:15px;
}
#father div{
 background-color:#FFF0ac;
 border:1px black dashed;
 padding:10px;
}
#block2{
 position:absolute;
 top:30px;
 right:30px;
}
</style>
</head>
<body>
 <div id="father">
     <div id="block1">Box-1</div>
        <div id="block2">Box-2</div>
        <div id="block3">Box-3</div>
    </div>
</body>
</html>

在这里插入图片描述由于block2没有祖先元素进行过定位，所以以当前浏览器为基准，移动到据top30px,和据right30px的位置
若想要个某个块完全脱离标准流又想保持原来的位置，只需要设置position为absolute，而不指定偏移量。