【HTML重点】CSS盒模型

最新推荐文章于 2024-07-24 13:52:24 发布

夹心776655

最新推荐文章于 2024-07-24 13:52:24 发布

阅读量124

点赞数

分类专栏： HTML&CSS重要概念文章标签： css html

本文链接：https://blog.csdn.net/qq_37086980/article/details/109905087

版权

HTML&CSS重要概念专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS盒模型与三大宽高

1.CSS盒模型的组成

CSS盒模型本质就是一种布局思想, 本质上是一个盒子, 封装周围的HTML标签, 每一个标签都可以看成是一个盒模型

组成: 外边距(margin)、边框(border)、填充(padding)、实际内容(content)

content: 设置width和height属性值来规定标签的content内容区域的大小。标签内容及子标签默认内容区域开始排列
padding: 定义标签边框与标签内容之间的空间, padding可以单独改变上、下、左、右边距, 也可以一次改变所有属性
border: css边框属性允许指定一个边框的宽度、样式和颜色
margin：定义标签周围的空间, margin可以单独改变所有的上、下、左、右边框, 也可以一次改变所有属性

2.两种盒模型

标准盒模型: 总占位宽 = width + padding(左右) + border(左右)

IE盒模型：width = 包含左右的padding和border

3.代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div:nth-of-type(1){
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            box-sizing: content-box;
            background-color: aquamarine;
        }
        div:nth-of-type(2){
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color:brown;
        }
    </style>
</head>
<body>
    <div>标准盒模型</div> 
    <!-- div 122 * 122 -->
    <div>IE盒模型</div>
    <!-- div 100 * 100 -->
</body>
</html>

4.两种盒模型的切换

利用css3新增属性box-sizing:

box-sizing: content-box 标准盒模型(默认属性)

box-sizing: border-box 怪异盒模型

元素的三大宽高(可视宽高，占位宽高，实际宽高+滚动的距离)

1.可视宽高

clientWidth/clientHeight: 可视宽/可视高 content + padding

clientLeft/clientTop: 左/上边框的宽度当前可视区域的宽高:

document.documentElement.clientHeight/clientWidth 可视区域的屏幕高度与宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视宽高</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 10px solid #f89ae1;
            padding: 10px 10px 5px 25px;
            margin: 30px 20px 35px 5px;
            background: rgb(15, 18, 192);
            border-left-width: 25px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        /* 
            1. 可视宽高
            2. 占位宽高
            3. 实际宽高+滚动的距离
        */
        /* 
            可视宽高: client
                clientWidth/clientHeight: 可视宽/可视高  content + padding
                clientLeft/clientTop: 左/上边框的宽度
            
            当前可视区域的宽高:
                document.documentElement.clientHeight/clientWidth 可视区域的屏幕高度与宽度
        */
        var div = document.querySelector('div');
        console.log(div);
        console.log(div.clientHeight, div.clientWidth);// 215(200 + 10 + 5) 235(200 + 25 + 10)
        console.log(div.clientLeft, div.clientTop); // 25 10

        console.log(document.documentElement.clientHeight, document.documentElement.clientWidth);
    </script>
</body>
</html>

2. 占位宽高

占位宽高: offset

offsetHeight/offsetWidth: 占位高/占位宽  content + padding + border

offsetTop: 当前元素距离具有定位属性的父元素的距离, 如果没有定位父元素, 距离body的距离  顶部

offsetLeft: 当前元素距离具有定位属性的父元素的距离, 如果没有定位父元素, 距离body的距离  左边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>占位宽高</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        } 
        div{
            width: 200px;
            height: 200px;
            border: 10px solid #f89ae1;
            padding: 10px 10px 5px 25px;
            margin: 30px 20px 35px 5px;
            background: rgb(15, 18, 192);
            border-left-width: 25px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        /* 
            占位宽高: offset
                offsetHeight/offsetWidth: 占位高/占位宽  content + padding + border
                offsetTop: 当前元素距离具有定位属性的父元素的距离, 如果没有定位父元素, 距离body的距离  顶部
                offsetLeft: 当前元素距离具有定位属性的父元素的距离, 如果没有定位父元素, 距离body的距离  左边
        */
        console.log(div.offsetHeight, div.offsetWidth); // 235   270
        console.log(div.offsetLeft, div.offsetTop);// 5 30
    </script>
</body>
</html>

3.scroll

实际宽高: scroll

scrollHeight/scrollWidth: 元素的实际宽高

scrollTop/scrollLeft: 元素被滚动的距离

页面的滚动距离：

document.documentElement.scrollTop/scrollLeft

document.body.scrollTop/scrollLeft 谷歌75以前

兼容:

document.documentElement.scrollTop || document.body.scrollTop

console.log(div.scrollHeight, div.scrollWidth);

// div.onscroll = function(){
//     console.log(div.scrollTop, div.scrollLeft);
// }

window.onscroll = function(){
    // console.log(document.documentElement.scrollTop, document.body.scrollTop);
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML重点】CSS盒模型

CSS盒模型1.CSS盒模型的组成CSS盒模型本质就是一种布局思想, 本质上是一个盒子, 封装周围的HTML标签, 每一个标签都可以看成是一个盒模型组成: 外边距(margin)、边框(border)、填充(padding)、实际内容(content)content: 设置width和height属性值来规定标签的content内容区域的大小。标签内容及子标签默认内容区域开始排列 padding: 定义标签边框与标签内容之间的空间, padding可以单独改变上、下、左、右边距, 也可以一
复制链接

扫一扫

专栏目录