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

css的盒模型，

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

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

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

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

关于定位

position: static, relative, absolute, fxied,

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

同时如果需要被定位的元素，是与内容区域同级别的，那么会产生的层叠的效果，
如果不是同级别的，那么产生的是将上面的内容区域全部顶上去的效果。

<style>

.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;

<style>

.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>

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

<style>

.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>

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

css的盒模型，

关于定位

kkw凯凯王

引用和评论

请求的取消，我滴天这怎么实现

网页设计的垂直居中

CSS团队协作规范

前端开发工具

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

面向企业级前端应用的开发框架 UI5 的发展简史介绍