不设置width(宽)时默认的宽度为100%,height(高)默认被内容撑起
案例:
<style>
#div1{
background-color: rgb(255, 0, 179);
}
</style>
</head>
<body>
<div id="div1">
<p>
我
</p>
</div>
</body>
min-width/max-width :最小/最大宽度
min-height/max-height 最小/最大高度
line-height 行高,每行的高度,行内文字垂直居中
案例:
<style>
#div1{
line-height: 100px;
min-height: 100px;
max-width: 1000px;
background-color: rgb(255, 0, 179);
}
</style>
</head>
<body>
<div id="div1">
<p>
我
</p>
</div>
</body>
外边距重叠问题
1.出现在上下外边距,左右没有
2.设置外边距的容器和父元素的外边距之间没有阻隔,所有外边距重叠了
解决方法:
给父元素设置border,缺点是多出边框
border: 1px solid #00000000;
给父元素设置overflow为非visble,缺点是占用overflow属性
overflow: hidden;
给父元素用伪元素(::before , ::after )设置 content: ""; display: table;
#div1::before{
content: "";
display: table;
}
溢出隐藏给父元素添加overflow
visible;默认值,溢出显示
overflow: visible;
hidden; 溢出隐藏
overflow: hidden;
auto; 没溢出正常,溢出出现滚动条
overflow: auto;
margin外边距 (能用总的margin写就不要用 top-button-left-right写)
1个值:上下左右边距
2个值:上下边距 左右边距
3个值:上边距 左右边距 下边距
4个值:上边距 右边距 下边距 左边距
margin-top 上边距
margin-left 左边距
margin-bottom 下边距
margin-right 右边距