kkw学习css的过程,第5天，关于盒模型与定位

时间 2020-05-21

标签 kkw 学习 css 过程 5天关于模型定位栏目 CSS 繁體版

原文原文链接

css的盒模型，

如今的默认的盒模型，包含了内容区域的宽高，内边距，边框，外边距。css

box-sizing:    设置盒子模型的解析模式，它有三个属性。 
content-box,   标注的模式，padding。
border-box,    border和paddind规划到内容种(怪异模式)。~~~~
padding-box,   将padding算入width范围。

对于属性的margin的属性，当设置三个值的时候code

h1 {margin: 0.25em 1em 0.5em;} 等价于 0.25em 1em 0.5em 1em

关于定位

position: static, relative, absolute, fxied, 文档

relative与absolute，须要结合一块儿使用，
还有一个定位方式，sticky，粘性定位。
简单的一句话，就是想让谁定住，那么就是给谁设置这个属性，同时，设置好须要定位的条件，好比top值是多少？it

同时若是须要被定位的元素，是与内容区域同级别的，那么会产生的层叠的效果，
若是不是同级别的，那么产生的是将上面的内容区域所有顶上去的效果。io

<style>class

.div1{
    height: 300px;
    border: 1px solid red;
    overflow: auto;
}
.h2{
    position: sticky;
    top: 0;
    font-size: 24px;
    /* background-color: #ffffff; */
}
.div2{
    height: 400px;
    border: 1px solid;
}
</style>
<div class="div1">
    <div>
        <h2 class="h2">一个标题</h2>
    <div class="div2">123456</div>
    <div class="div2">123456</div>
    <div class="div2">123456</div>
    </div>
    <div>
        <h2 class="h2">二个标题</h2>
    <div class="div2">123456</div>
    </div>
    <div>
        <h2 class="h2">三个标题</h2>
    <div class="div2">123456</div>
    </div>
   <div>
    <h2 class="h2">四个标题</h2>
    <div class="div2">123456</div>
   </div>
   <div>
    <h2 class="h2">五个标题</h2>
    <div class="div2">123456</div>
   </div>
</div>

还有一个，我用的比较少的定位方式
float： left,right,
浮动，左边浮动，或者右边浮动。
若是设置了左右浮动，那么须要在他们的底部元素进行，清除浮动的带来的文档位置错乱。由于浮动也脱离了文档流。
第一种方式：添加一个空的元素，给其设置clean:both;float

<style>margin

.div1{
    float: left;
    width: 400px;
    height: 300px;
    text-align: center;
    line-height: 400px;
    border: 1px solid;
}
.div2{
    float: right;
    height: 600px;
    width: 400px;
    text-align: center;
    line-height: 600px;
    border: 1px solid red;
}
.div3{
    clear: both;
}
.div4{
    border: 1px solid #364967;
    height: 100px;
    width: 100%;
}
</style>
<body>

    <div class="div1">
            左边的
    </div>
    <div class="div2">
        右边的
    </div>
    <div class="div3"></div>
    <div class="div4">

    </div>
</body>

第二个方式，采用伪类：
设置伪类的时候，须要采用一个对须要浮动的元素进行一层包裹static

<style>top

.main::after {
    content: ' ';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.div1 {
    float: left;
    width: 400px;
    height: 300px;
    text-align: center;
    line-height: 400px;
    border: 1px solid;
}

.div2 {
    float: right;
    height: 600px;
    width: 400px;
    text-align: center;
    line-height: 600px;
    border: 1px solid red;
}

/* .div3 {
    clear: both;
} */

.div4 {
    border: 1px solid #364967;
    height: 100px;
    width: 100%;
}

</style>

<body>

<div class="main">
    <div class="div1">
        左边的
    </div>
    <div class="div2">
        右边的~~~~
    </div>
    <div class="div3"></div>

</div>
<div class="div4">

</div>

</body>