CSS之盒子模型、溢出属性、元素显示类型、定位、三角形

豆芽菜♀

已于 2022-05-08 22:25:18 修改

阅读量271

点赞数 2

分类专栏：前端文章标签： css

于 2022-04-26 20:34:36 首次发布

本文链接：https://blog.csdn.net/m0_57752092/article/details/124283415

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、盒子模型

1.1内边距

1.2内边距特性

    padding: 20px 30px;
            /* 内边距
            1个值，4个方向一样
            2个值，上下，左右
            3个值，上 左右 下
            4个值，上 右 下 左 */

    padding-top：10px；
            /* 1.背景色蔓延到内边距 
            2.可以设置单一方向
            padding-方向：top bottom left right
            */

2.边框

border: 2px solid red;
    /* 样式：solid double dashed dotted */

3.外边距

3.2外边距特性

margin: left;
            /* 1.margin-方向 ：top bottom left right auto
            2.*{margin：0}
            3.外边距可以设置负值
            4.屏幕居中  margin：0 auto
            5.背景色蔓延  没有*/
特性问题：
1.兄弟关系，两个盒子垂直外边距与水平外边距问题
      ----垂直方向，外边距取最大值
      ----水平方向，外边距会进行合并处理
2.父子关系，给子加外边距，但作用于父身上了，怎么解决？
      ----子margin-top===>父的padding-top，注意高度计算
      ----给父盒子设置边框
      ----加浮动
      ----overflow：hidden  。

二、溢出属性

<style>
        div{
            width: 200px;
            height: 200px;
            /*加上 float: left;就可以横向排列了*/
            float: left;
        }
        .red{
            background-color: red;
            /* nowrap不换行 
            pre 保留所有回车，空格，不换行
            pre-wrap 保留空格，回车，换行
            pre-lin保留回车，换行*/
            white-space: pre-line;
        }
        .blue{
            background-color: blue;
            white-space: pre;
        }
        .yellow{
            background-color: yellow;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 当单行文本溢出显示省略号需要同时设置以下声明：
        1.容器宽度：width：200px
        2.强制文本在一行内显示：white-space:nowrap
        3.溢出内容为隐藏：overflow：hidden
        4.溢出文本显示省略号：text-overflow：ellipsis*/
    </style>
</head>
<body class="div">
        <div class="red">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Assumenda, doloribus aliquam magnam modi voluptates ab ratione repudiandae
             cupiditate culpa minima earum soluta qui ea commodi, 
            reiciendis veniam inventore voluptatum eius.</div>
        <div class="blue">Lorem ipsum dolor sit amet consectetur <br></br>adipisicing elit. Provident cum porro 
            <br></br>voluptatibus illo fuga laudantium iste suscipit 
            ea vero, veniam quaerat voluptatum molestiae hic fugiat 
            alias, reprehenderit ab temporibus optio!</div>
        <div class="yellow">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, vitae? Animi, blanditiis voluptatibus, sed ea cumque corporis quos rerum temporibus provident aliquid dolorem recusandae tenetur non harum reiciendis reprehenderit eligendi.</div>
    </div>
</body>

三、元素显示类型

/* 块元素
        display:block;
        display:list-item */
        /* p标签放文本可以，不能放块级元素 */
/* 行内元素
        display：inline 

        行内元素 只能设置边框的左右边距，不能设置上下边距 */
/* 行内块元素
        display：inline-block */

/* 元素类型互相转换
        行内块元素与块元素在一起，给行内块元素加 display：block；类型就可以转换成块元素了
       其他元素类型转换类似
         */

四、定位

4.1相对定位

    <style>
        div{
            height: 200px;
            width: 200px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

4.2绝对定位

<style>
        *{
            padding: 0;
            margin: 0;
        }

       /* 有父盒子，父盒子有定位 */

        .box1{
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: green;
            position: absolute;
        } 
        
        /* 父盒子没有定位 */
        .box1{
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
        }
        .box2{
            width: 200px;
            height: 200px;
            left: 100px;
            top: 100px;
            background-color: green;
            position: absolute;
        } 
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

4.3固定定位

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 100%;
            height: 1500px;
            background-color: yellow;
        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: blueviolet;
            position: fixed;
            right: 0;
            bottom: 50px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>  
</body>

4.4粘性定位

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .header{
            width: 100%;
            height: 200px;
            background-color: rgb(23, 147, 209);
        }
        .nav{
            width: 800px;
            height: 100px;
            background-color: blueviolet;
            position: sticky;
            top: 0;
            margin: 0 auto;
        }
        .body{
            width: 100%;
            height: 1000px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav"></div>  
    <div class="body"></div>
</body>

三角形

    <style>
        .box1{
            width: 0px;
            height: 0px;
            border-top: 10px solid red;
            border-bottom: 10px solid rgba(0,0,0,0);
            /* rgba(,最后一个值是透明) 
            transparent  透明色*/
            border-left: 10px solid rgba(0,0,0,0);
            /* border-right: 10px solid rgba(0,0,0,0); */
            border-right: 10px solid transparent;
        }
        .box2{
            display: inline-block;
            width: 0px;
            height: 0px;
            border: 10px solid transparent;
            border-bottom: 10px solid red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: yellow;
            line-height: 50px;
            text-indent: 20px;
        }
        span{
            display: inline-block;
            width: 0px;
            height: 0px;
            border: 5px solid transparent;
            border-top: 5px solid #5e5b5b;
            position: relative;
            top: 2.5px;
        }
        div:hover span{
            border: 5px solid transparent;
            border-bottom: 5px solid #5e5b5b;
            top: -2.5px;
        }
    </style>
</head>
<body>
    <div>资讯
        <span></span>    
    </div>
</body>

    <style>
        .jian{
            width: 6px;
            height: 6px;
            border-left: 2px solid #f00;
            border-bottom: 2px solid #f00;
            transform: rotate(-45deg);
            position: relative;
        }  
        .jian:hover{
            transform: rotate(135deg);
            transition: all 500ms;
            top: 3px;
        }
    </style>
</head>
<body>
    <div class="jian"></div>
</body>