web学习（三）盒子模型

最新推荐文章于 2023-09-14 17:30:24 发布

laFhshzmeq3

最新推荐文章于 2023-09-14 17:30:24 发布

阅读量339

点赞数

分类专栏：前端文章标签：盒子模型 web

本文链接：https://blog.csdn.net/laFhshzmeq3/article/details/91395214

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.盒子模型图在这里插入图片描述
2.属性：

    content：展示内容，                                                                                                                                                                                                      
             语法格式：  width   ：  0px； 宽
                        height  :   0px;  高
     padding: 内容距离边框，
              语法格式： padding:   0px;
     border:边框样式，三个要求，缺一不可(盒子不会展示出来）
            语法格式：   border： 0px  样式  颜色 
     margin：与其他元素之间的距离，例如和页面展示窗口之间的距离
             语法格式：margin：0px；
             当两个盒子相邻时，会发生外边距折叠（margin-collapse）
             同正取大，同负取小，正负取和       
      ！！！也可以用百分比表示占父元素大小，比较灵活

！！！注意，除content外所有元素都有-top、-bottom，-right，-left属性

        ：0px 0px 0px 0px
          一个值：所有方向
          两个值：上下  左右
          三个：上  左右 下
          四个：上 右 下 左

3.盒模型属于块元素，

居中：margin：0 auto

4.盒模型的兼容问题和解决办法：
在低版本的ie浏览器中使用怪异盒模型（也叫边框盒模型）元素设置的宽实际是盒子的宽；
标准浏览器中则是常规盒模型（也叫内容盒模型）；元素设置的宽是内容的宽

解决方法：css3中提出一个样式box-sizing: border-box/content-box（默认），用来修改盒模型的种类
由于该样式是css3样式，低版本浏览器不兼容，
将盒模型的值设置成border-box（怪异盒模型）来统一效果，而且该盒模型在页面布局计算时也会很方便

练习
1.做一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .a{
        width:0;
        height:0;
          background-color:transparent;
          border-bottom:100px solid green;//底边的长，变成了高
          border-left:100px solid transparent;//以过顶点的高为分界线，左边的底场100px
          border-right:50px solid transparent;//右边的底长100px
          }
    .b{
        width:100px;
        height:100px;
        background-color:black;
    }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>//通过比较上下两个div盒子得知具体的数值
</body>
</html>