css邊框，盒子模型、浮動、定位

阿新 • • 發佈：2022-12-03

邊框，盒子模型、浮動、定位

一、邊框

border-width  : 邊框寬度
border-style  : 邊框樣式
    1.solid  實線
    2.none   無邊框
    3.dotted  點狀虛線邊框
    4.dashed  矩形虛線邊框
border-color  : 邊框顏色
通常情況下這樣寫：
  border: 2px solid cornflowerblue;
圓角邊框：
  border-radius: 50%;

二、display屬性

用於HTML元素顯示效果
行內標籤是無法設定長寬的，只有塊級可以設定
display:none;可以隱藏某個元素，隱藏的元素不會佔用任何空間
visibility:hidden;可以隱藏某個元素，但是隱藏的元素會佔用空間，會任然影響佈局

display:block; 預設佔滿整個頁面的寬度，如果設定了寬度，則會用margin
填充剩下的部分：
display:inline; 按行內元素設定，此時再設定元素的width,heigth
display:inline-block; 使元素具有 行內元素和塊級元素的特點

三、背景案例

background-attachment:fixed;屬性
background-attachment設定背景影象是否固定或者隨著頁面的其他部分滾動
屬性值：
fixed:背景圖片不會隨著頁面的滾動而滾動
scroll：背景的圖片隨著頁面的滾動而滾動，這個屬性是預設的
local:背景圖片會隨著元素內容的滾動而滾動
inherit:指定background-attachment的設定應該從父元素繼承

四、盒子模型

盒子模型：盒模型，框模型
css將頁面彙總所有的元素的都設定為一個個矩形的盒子。將元素設定為矩形的盒子後，對頁面的佈局就變成了將不同的盒子擺放到不同的位置，每一個盒子，都有以下幾個部分:
內容區(content):所有的元素
邊框(border):設定邊框
內邊距(padding):指的是盒子內容和邊框之間的距離
外邊框(margin):指的是盒子和盒子之間的距離

1.邊框（border） ：元素設定邊框
可以分別設定四個邊框的寬度：
設定四個值：  上 右 下 左
設定三個值：  上 左右 下
設定兩個值：  上下 左右
設定一個值：  上下左右
border-xxx-width:可以設定某一個邊框的寬度
一般這樣寫：border: 2px solid cornflowerblue;

2.內邊距（padding）：指的是盒子的內容和邊框之間的距離
一共有四個方向：
   1.padding-top
   2.padding-right
   3.padding-left
   4.padding-bottom
padding:10px 20px 10px 20px;
設定的順序也是：上右下左

3.外邊距(margin):決定當前盒子和其他盒子的距離(盒子的可見框大小)
外邊距不會影響可見框的大小，而是影響盒子的位置
盒子有四個方向的外邊距：
margin-top:上邊距，也可以設定負值
margin-right:右邊距，一般情況下沒有效果
margin-bottom:下外邊距，設定一個正值，其下面的元素會向下移動，擠別人
margin-left:左外邊距，設定正值，元素向右移動   
margin:10px 20px 10px 20px;
設定的順序也是：上右下左
也可以設定：margin:0 auto;

五、浮動

1.浮動
   在我們佈局的時候用到的一種技術，能夠方便我們進行佈局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調整位置
2.浮動原理
    使當前元素脫離普通流，相當於浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動的邊緣
3.屬性
    left  ------>>   元素向左浮動
    right  ------>>   元素向右浮動
    none  ------>>   預設值。元素不浮動，並會顯示在其在文字中出現的位置。
    inherit  ------>>   規定應該從父元素繼承 float 屬性的值。
4.浮動帶來的影響
    浮動的元素是脫離正常的文件流，會造成父標籤塌陷
5.解決浮動帶來的影響的解決方法
  .clearfix:after{
      content:'';
      display:block;
      clear:both;
  }
哪個塌陷了給哪個新增上就好了

六、溢位屬性

overflow:visible  預設值，內容不會被修剪，會呈現在元素框之外
overflow:hidden   內容會被修剪，並且其餘內容是不可見的
overflow:scroll   內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容
overflow:auto     內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容,右側和底部都有滾動條
overflow:inherit   規定應該從父元素繼承overflow屬性的值
overflow（水平和垂直均設定）
overflow-x（設定水平方向）
overflow-y（設定垂直方向）

七、定位

標籤在預設情況下是無法通過定位的引數來移動
針對移動有四種方法：
1.static(靜態)：標籤預設的狀態，無法定位移動
2.relative(相對定位)：基於標籤原來的位置
3.absolute(絕對定位)：基於某個定位過的父標籤做定位
4.fixed(固定定位)：基於瀏覽器固定不變

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .d1 {
        height: 100px;
        width: 100px;
        background-color: cornflowerblue;
        position: relative;
        left: 100px;
      }
      .d2 {
        height: 100px;
        width: 100px;
        background-color: crimson;
        position: relative;
        /*left: 100px;*/
      }
      .d3 {
        height: 100px;
        width: 100px;
        background-color: goldenrod;
        position: absolute;
        left: 300px;
      }
      .d1 {
        height: 100px;
        width: 100px;
        background-color: darkblue;
        position: fixed;
        right: 100px;
      }
  </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2">
      <div class="d3">
      </div>
    </div>
    <div class="d4"></div>
</body>
</html>

八、z-index

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。要讓z-index起作用有個小小前提，就是元素的position屬性要是relative，absolute或是fixed。

z-index無論設定多高都不起作用情況，這種情況發生的條件有三個：
1、父標籤 position屬性為relative；
2、問題標籤無position屬性（不包括static）；
3、問題標籤含有浮動(float)屬性。
eg:z-index層級不起作用，浮動會讓z-index失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .cover{
        background-color: rgba(127,127,127,0.6);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 999;
      }
      .modal {
        height: 200px;
        width: 500px;
        background-color: white;
        z-index: 1000;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -350px;
        margin-top: -300px;
      }
    </style>
</head>
<body>
   <div>我在最底下</div>
   <div class="cover"></div>
   <div class="modal">
     <form action="">
       <p>username:<input type="text"></p>
       <p>password:<input type="password"></p>
     </form>
   </div>
</body>
</html>

九、簡易部落格頁面搭建

html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cnblog</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-left">
        <!--   頭像     -->
        <div class="blog-avatar">
         <img src="1.png" alt="">
       </div>
<!--        標題-->
        <div class="blog-title">
            <span>這是一篇好書推薦</span>
        </div>
        <div class="blog-info">
            <span class="blog-info1">&nbsp;&nbsp;&nbsp;&nbsp;生活，其實是沒有好壞的，那只是我們在短暫的幾十年光景裡的一種生命體驗。每一寸光陰，都值得收藏。僅此一次的分分秒秒，我們應該怎麼去對待？</span>
        </div>
        <div class="blog-link">
            <ul>
                <li><a href="">更多的美文</a></li>
                <li><a href="">聯絡我們</a></li>
                <li><a href="">向我們投稿</a></li>
            </ul>
        </div>
        <div class="blog-course">
            <ul>
                <li><a href="">《小王子》</a></li>
                <li><a href="">《雲邊有個小賣部》</a></li>
                <li><a href="">《月亮與六便士》</a></li>
            </ul>
        </div>

    </div>

    <div class="blog-right">
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活著》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
            </div>
            <div class="article-end">
                <span>#探尋活著的意義</span>
                <span>#心態平和地面對人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活著》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
            </div>
            <div class="article-end">
                <span>#探尋活著的意義</span>
                <span>#心態平和地面對人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活著》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
            </div>
            <div class="article-end">
                <span>#探尋活著的意義</span>
                <span>#心態平和地面對人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活著》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
            </div>
            <div class="article-end">
                <span>#探尋活著的意義</span>
                <span>#心態平和地面對人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活著》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
            </div>
            <div class="article-end">
                <span>#探尋活著的意義</span>
                <span>#心態平和地面對人生</span>
            </div>
        </div>
        <div class="article-list">
            <div class="article-title">
                <img src="2.png" alt="" class="img1">
                <div class="title">
                    <span>《活著》</span>
                </div>
                <div class="date">
                     <span>2022/12/02 </span>
                </div>

            </div>
            <div class="article-desc">
                <span>講述了主人公福貴一生的榮與辱、起與落、盛與衰</span>
            </div>
            <div class="article-end">
                <span>#探尋活著的意義</span>
                <span>#心態平和地面對人生</span>
            </div>
        </div>



        </div>
    </div>
</body>
</html>

/*頁面通用的樣式*/
body{
    margin: 0;
    background-color: #eeeeee;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
    padding-left: 0;
}
/*首頁左側樣式*/
.blog-left{
    float: left;
    width: 20%;
    height: 100%;
    background-color: cadetblue;
    position: fixed;
    left: 0;
    top: 0;
}
.blog-avatar{
    border: 4px solid aliceblue;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 37px ;
    /*margin: 18px auto;*/
    overflow: hidden;
}
/*使得圖片放全*/
.blog-avatar img{
    max-width: 100%;
}
.blog-title ,.blog-info{
    color: black;
    text-align: center;
    margin: 37px auto;
}
.blog-info1 {
    border: 2px solid white;
    margin: 8px;
}
.blog-link,.blog-course{
    text-align: center;
    margin: 50px auto;
}
.blog-link ul>li,.blog-course ul>li{
    padding: 8px;
}
.blog-link a,.blog-course a{
    color: black;
    font-size: 16px;
}
.blog-link a:hover,.blog-course a:hover{
    color: darkgrey;
}
/*右側樣式*/
.blog-right{
    float: right;
    width: 80%;
    height: 100%;
}
.article-list{
    background-color: white;
    margin: 20px 50px 20px 20px;
    box-shadow: 20px 20px 20px rgba(0,0,0,0.5);
    border-left: 5px solid cadetblue;
}
.article-list .article-title .img1{
    /*float: left;*/
    max-width: 100%;
    border: 4px solid aliceblue;
    width: 120px;
    height: 120px;
    border-radius: 30%;
    margin: 17px ;
    /*margin: 18px auto;*/
    overflow: hidden;
    transition: all 0.2s linear;
}

.article-list .article-title .img1:hover{
    transform: scale(0.9);
    transition: all 0.2s linear;
}

.blog-right .article-list .article-title .title {
    float: right;
    font-size: 38px;
    margin-top: 8vh;
    padding-right: 90vh;
}

.blog-right .article-list .article-title .date {
    float: right;
    font-size: 18px;
    margin-top: -12vh;
    margin-right: 5vh;
    /*padding-right: 70vh;*/
}


/*.article-list .article-title .title{*/
/*    font-size: 38px;*/
/*    !*float: left;*!*/
/*    margin-top: 0;*/
/*    padding-left: 10px;*/
/*}*/


/*.article-list .article-title .date{*/
/*    font-size: 18px;*/
/*    font-weight: bolder;*/
/*    float: right;*/
/*    margin: 40px 40px;*/
/*}*/

.article-desc {
    font-size: 20px;
    font-weight: lighter;
    text-indent: 20px;
    border-bottom: 1px solid black;
}

.article-end {
    padding: 10px 10px 10px 20px;

}