CSS笔记：盒子模型

1、边框会影响盒子实际大小

　　如果一个div默认设置width为100px，然后对该div设置边框border:1px solid red;那么这个div的实际的宽度为：102px；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            /* 加上这里的边框就为102px了，因为左边和右边都有1px像素边框 */
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

对于表格设置边框的时候，会出现重叠边框问题，那么需要使用边框的合并 ，如下所示：

border-collapse: collapse;

 

　2、padding会影响盒子实际大小

比如一个div宽度为100，设置内边距20px，那么这个div盒子模型的宽度则为140px，因为左右有20px像素的边框宽度。

　　设置内边距有一种情况不会撑开盒子，那就是当父元素没有设置宽度就不会出现撑开盒子的情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

3、外边距margin

  • 外边距可以让块级盒子水平居中，但是需要满足两个条件：

　　　　1 盒子必须指定了宽度（width）

　　　　2 盒子左右的外边距都设置为auto

  • 常用的写法，以下三种都可以：

　　　　margin-left:auto; margin-right:auto;

　　　　margin:auto;

　　　　margin:0 auto;（推荐写法）

  • 行内元素或者行内块元素水平居中给父元素添加text-algin:center即可；
  • 嵌套块元素垂直外边距的塌陷

　　　　对于两个嵌套关系（父子关系）的块元素，父元素有外边距同时子元素也有外边距，此时父元素会塌陷较大的外边距值。

 　　/* 以下是三种解决办法 */
            border: 1px solid transparent;
            padding-top: 1px;
            overflow: hidden;
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 400px;
            height: 400px;
            background-color: red;
            margin-top: 50px;
            /* 以下是三种解决办法 */
            /* border: 1px solid transparent; */
            /* padding-top: 1px; */
            /* overflow: hidden; */
        }
        
        .div2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

</html>
  •  清除内外边框
* {
            margin: 0;
            padding: 0;
        }

 

 

 4、li去掉小圆点

list-style:none;

 

posted @ 2020-10-24 15:36  淡 淡  阅读(1)  评论(0)    收藏  举报