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>