02-CSS基础与进阶-day5_2018-09-03-21-25-22

冷不防 2022-01-05 11:39 120阅读 0赞

盒子模型（重点）  
1 HTML的元素可以看成一个矩形的盒子，每个盒子都是由内容、内边距、  
外边距、边框组成  
网页布局的本质-----很多矩形盒子组合而成  
2 Box Model  
**width 内容的宽**  
 **height 内容的高**   
 **border 边框**  
 **css3关于边框多了一属性 border-radius 圆角边框**   
 **padding 内边距**

**05圆角边框.html**

**![1603260-20190618215444198-981086280.png][]**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           div {
         
                  width: 180px;
                  height: 180px;
                  border: 1px solid red;
           }
    
           div:first-child {
         
                  border-radius: 10px; /*表示4个角是相同的10p弧度*/
           }
    
           div:nth-child(2) {
         
                  /* border-radius: 90px;  */
                  border-radius: 50%;
           }
    
           div:nth-child(3) {
         
                   border-radius: 10px 30px; /* 左上角 右下角 是10px 右上角 左下角是30px*/
           }
    
           div:nth-child(4) {
         
                   border-radius: 10px 30px 60px; /* 左上角 10px  右上角 左下角是30px 右下角是60px*/
           }
    
           div:nth-child(5) {
         
                   border-radius: 10px 20px 30px 40px; /* 左上角 10px  右上角 20px 右下角是30px 左下角是40px*/
           }
    
           div:nth-child(6) {
         
                   border-radius: 90px;
                height: 100px;
           }
    
           div:last-child {
         
                  border-radius: 100px 0;
           }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/HiJackykun/p/11048075.html

[1603260-20190618215444198-981086280.png]: /images/20211229/1711e2aba46145af881d2bcdebd3d53a.png