CSS语法基础2

137 阅读1分钟

不设置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  右边距