CSS盒子模型和层元素

最新推荐文章于 2024-05-27 17:42:14 发布

hugo zeng

最新推荐文章于 2024-05-27 17:42:14 发布

阅读量262

点赞数 2

分类专栏： H5/JavaScript/CSS 文章标签：盒子模型层元素 CSS

本文链接：https://blog.csdn.net/qq_29118971/article/details/100544549

版权

H5/JavaScript/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

盒子模型

盒子模型针对CSS中每个元素

div{
      width:100px;
      height:100px;
      background-color: red;
      border:10px solid black;
      padding:100px;
}

Padding后加元素格式四元素上右下左

三元素上（左右）下

两元素上下、左右

也可以

Margin 、border 和padding同样拥有以上一样规则。

子父级关系

<html lang="en"">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <link  rel="stylesheet" type="text/css" href="lesson5.css" />
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="content">
                <div class="content1"></div>
            </div>
        </div>
    </div>

</body>
</html>

.content1{
    width:10px;
    height:10px;
    background-color:#0f0;
}


.content{
    width:10px;
    height:10px;
    padding:10px;
    background-color:#000;
}

.box{
    width:30px;
    height:30px;
    background-color:#0f0;
    padding:10px;
}

.wrapper{

   width:50px;
   height:50px;
   background-color:#000;
   padding:10px;
}

子集全部在父级width或者heigh中，包括margin（内容区域中），最后效果：

盒子之间关系

 <span class="demo">123</span>

 <span class="demo2">123</span>

CSS：

.demo{
       background-color:red;
       margin-right:10px;
}
.demo2{
       background-color:red;//并不涵盖margin
       margin-left:40px;
}

盒子模型计算

盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框

盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距

层元素

Position：定位让特定元素在特定位置出现

1. Absolute: 绝对定位，特点，脱离原来位置（层）进行定位，进入新层，在原来层位置上边就真空了，别人就可以占它的位置。

定位原则：相对于最近的有定位的父级进行定位，如果没有，相对于文档进行定位。

<div class="demo"></div>
<div class="box"></div>

CSS:

.demo{
       position:Absolute;
       width:100px;
       height:100px;
       background-color:red;
       opacity:0.5;
}

.box{
    width:150px;
    height:150px;
    background-color: green;

}

与之配合的（fixed、Absolute、Relative）：

Right（右边线距离浏览器右边）

left （左边线距离浏览器右边）

top （上边线距离浏览器右边）

bottom （下边线距离浏览器右边）

在此你可能会发现body 有一个天生的margin 8 px。（初始化所有标签最大的意义就是把 body的8去掉）

*{
margin:0;
padding:0;
}

2. Relative 相对定位保留原来位置,进入新层，进行定位

定位原则：相对于原来出生的位置进行定位

<div class="demo"></div>
<div class="box"></div>

CSS:

.demo{
       position:relative;
       left:100px;
       top:100px;
       width:100px;
       height:100px;
       background-color:red;
       opacity:0.5;
}

.box{
    width:150px;
    height:150px;
    background-color: green;

}

小结：一般情况用Relative，作为参照物，用Absolute进行定位。因为Absolute定位，原来位置不会保留。Relative是相对于出生位置定位，更适合做参照物，而Absolute可任意选择参照物，所以定位更灵活。

3. Fixed 固定定位（广告定位） Absolute是相对于文档而fixed是相对于可视区窗口


#ww{
position:fixed;
top:50%;
left:50%;
width:100px;
height:100px;
background-color:red;
margin-left:-50px;
}

问题：此处如果用 margin-right是无效的，并且如果用right， margin-left就无效。无定位也有同样情况（BFC）

 <div id="ww"></div>
 <div id="hh"></div>

#ww{
position:Absolute;
width:100px;
height:100px;
background-color:red;
margin-right:40px;/*无效*/
}


#hh{
position:Absolute;
left:100px;
width:102px;
height:102px;
background-color:green;
/*margin-right:-40px;无效*/

}

hugo zeng

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型和层元素

盒子模型盒子模型针对CSS中每个元素div{ width:100px; height:100px; background-color: red; border:10px solid black; padding:100px;}Padding后加元素格式四元素上右下左 ...
复制链接

扫一扫

专栏目录