div
div简介
DIV盒子：
div主要用来装其他元素，单独对div进行css样式或布局，默认占据一行，没有给宽度会撑开这一行，与p标签相同
- 有默认的宽度，自动将盒子撑到最大的宽度
- 默认的高度为0，不给高没有任何效果
- 和p元素相似，前后元素都会被换行 被称为“块级元素”
块级元素特点：
html显示时 前后元素会被换行 默认占据一行
p标签
h标签
br标签
ul标签
ol标签
dl标签
li标签
form标签
div标签
table标签
body标签
html标签
内联元素
html时 并排一列 不能换行的标签
margin样式 外边距
移动元素到合适位置
margin:允许负数
margin-left 左边外边距
margin-top 顶部外边距
margin-bottom 底部外边距
margin-right 右边外边距
注：块级元素默认占据一行，前后的元素会被换行，所以块级元素右边放不了东西
margin-right没有意义
<style type="text/css">
.box{
width: 150px;
height: 150px;
background: pink;
margin-left: 100px;
margin-top:50px;
margin-bottom: 100px;
}
.box1{
width:150px;
height: 150px;
background: purple;
}
</style>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DW6xglwP-1577065702691)(http://img0.ph.126.net/isb1GuAD9izSn7SSZQguDg==/6632282726051571243.png)]
外边距margin
margin简写解析
1个元素
margin:50px;等同于
margin-top:50px;
margin-right:50px;
margin-bottom:50px;
marghin-left:50px;2个元素
margin:50px 100px;等同于：
margin-top:50px;
margin-right:100px;
margin-bottom:50px;
marghin-left:100px;以顺时针取元素像素
3个元素
marghin:50px 150px 100px等同于：
margin-top:50px;
margin-left: 150px;
margin-bottom: 100px;
marghin-right:150px;左右相等取法
- margin:atuo
auto 自适应居中
margin: 0 auto;
margin:atuo ;等同于
margin-left:auto;
margin-right:auto;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdZVe04G-1577065702692)(http://img2.ph.126.net/CIGqoy0vh9QjWZfbEmVybg==/6632498230330597301.png)]
内边距padding
padding:不允许负数
padding把div盒子会撑大
.box{
width:300px;
height:500px;
background: pink;
padding-top: 10px;
padding-right:10px;
padding-bottom: 10px;
padding-left: 10px;300×500的盒子变为320×520的盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XTUHBYrg-1577065702693)(http://img2.ph.126.net/AK2Rxb2pcdbpt1Ms17IsyA==/6632426762074812662.png)]
padding简写方式与margin一致
border边框
border style分为
- solid 实线
- dashed 虚线
- dotted 点状
- double 双线
特点：增大体积
hover鼠标指针悬浮于此处，html页面发生变化
border:10px solid red;等同于
border-width: 10px;
border-style: solid;
border-color:purple;.box{
height: 300px;
width:300px;
background: pink;
/*border:10px solid purple;*/
border-top:20px solid red;
/*border-width: 10px;*/
/*border-style: solid;
border-color:purple;*/
}
.box:hover{
border: 20px solid purple;
}border：边框
border-color：设置边框的颜色（必须有边框）
border-style：边框风格样式（线）-dashed虚线、dotted点状、solid实线、double双线
border-top：上边框
border-right：右边框
border-bottom：下边框
border-left：左边框
hover 选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{
background-color:yellow;
}span标签：<span></span>
一般用于文字上的样式，不给样式没有任何效果
ps：应用样式来添加效果。
外边距重合（折叠）
只有在块级元素，垂直方向的外边距，会重合（折叠）在一起
一个块级元素的下外边距，和相邻块级元素的上外边距，只会应用一个外边距。（谁的外边距大，就用谁的）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FdTTuEYN-1577065702693)(http://img1.ph.126.net/q3MbW-GXnTxDGfP6qSZ4ew==/6632320109446915891.png)]
border:1px solid transparent;transparent:透明颜色
防止边距重合的方法
折叠示意图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4zffXYGF-1577065702694)(http://img0.ph.126.net/tdHlDIYsE5xOQ2hJBsrzjA==/6632553205912006743.png)]
#div嵌套
<div class="parent">
<div class="box1"></div>
</div>
#style形式
.box1{
width: 150px;
height: 150px;
background: skyblue;
/*margin-bottom: 20px;*/
margin-top:20px;
overflow: hidden;
}
.parent{
width:300px;
height:300px;
background: pink;
margin-top: 20px;
overflow: hidden;
/*border:1px solid transparent;*/
}overflow: hidden; 内容会被修剪，并且其余内容是不可见的。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FycZI7o3-1577065702694)(http://img1.ph.126.net/86-DCkLueONMJ6MiANv10g==/6632618077095449206.png)]
- 父盒子装子盒子 子盒子会与父盒子的上下边距重合
在父盒子加溢出隐藏 或者 1像素透明边框隔断他们俩
