CSS的布局

文档流

文档流(normal flow),网页是一个多层的结构,一层摞着一层。

通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层。这些层中,最底下的一层称为文档流,文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。

对于我们来元素主要有两个状态:

  • 在文档流中;
  • 不在文档流中(脱离文档流)。

元素在文档流中有什么特点

块元素

  • 块元素会在页面中独占一行(自上向下垂直排列);
  • 默认宽度是父元素的全部(会把父元素撑满);
  • 默认高度是被内容撑开(子元素)。

行内元素

  • 行内元素不会独占页面的一行,只占自身的大小;
  • 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素。则元素会换到第二行继续自左向右排列(书写习惯一致);
  • 行内元素的默认宽度和高度都是被内容撑开。

盒子模型

盒模型、盒子模型、框模型(box model),CSS将页面中的所有元素都设置为了一个矩形的盒子。将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置。

每一个盒子都由一下几个部分组成

  • 内容区(content);
  • 内边距(padding);
  • 边框(border);
  • 外边距(margin)。

内容区(content),元素中的所有的子元素和文本内容都在内容区中排列。内容区的大小由widthheight两个属性来设置。

  • width:设置内容区的宽度;
  • height:设置内容区的高度。

盒子模型-边框

边框的宽度:border-width
边框的颜色:border-color
边框的样式:border-style

border-width: 10px;,默认值,一般都是 3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值:上、右、下、左
三个值:上、左、右、下
两个值:上、下、 、左右
一个值:上、下、左、右

除了border-width还有一组border-xxx-width
xxx可以是top right bottom left,用来单独指定某一个边的宽度。

border-width: 10px; 
border-top-width: 10px;
border-left-width: 30px;

border-color用来指定边框的颜色,同样可以分别指定四个边的边框。规则和border-width一样,border-color也可以省略不写,如果省略了则自动使用color的颜色值。

border-style 指定边框的样式

  • solid 表示实线
  • dotted 点状虚线
  • dashed 虚线
  • double 双线
border-width: 10px;
border-color: orange;
border-style: solid;

border-style的默认值是none表示没有边框。

border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求。

除了border以外还有四个border-xxx

  • border-top;
  • border-right;
  • border-bottom;
  • border-left。
border: solid 10px orange; 
border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red; 
border: 10px red solid;
border-right: none;

盒子模型-内边距

内边距(padding),内容区和边框之间的距离是内边距。

一共有四个方向的内边距:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

内边距的设置会影响到盒子的大小,背景颜色会延伸到内边距上。

一共盒子的可见框的大小,由内容区、内边距和边框共同决定,所以在计算盒子大小时,需要将这三个区域加到一起计算。

padding内边距的简写属性,可以同时指定四个方向的内边距。规则和border-width一样。

padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ;

盒子模型-外边距

外边距(margin),外边距不会影响盒子可见框的大小,但是外边距会影响盒子的位置。

一共有四个方向的外边距:

  • margin-top:上外边距,设置一个正值,元素会向下移动;
  • margin-right:默认情况下设置margin-right不会产生任何效果;
  • margin-bottom:下外边距,设置一个正值,其下边的元素会向下移动;
  • margin-left:左外边距,设置一个正值,元素会向右移动;
  • margin:也可以设置负值,如果是负值则元素会向相反的方向移动。

元素在页面中是按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动元素自身。而设置下和右外边距会移动其他元素。

margin的简写属性
margin:可以同时设置四个方向的外边距 ,用法和padding一样。margin会影响到盒子实际占用空间。

margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px;

盒子模型-水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定:

  • margin-left
  • border-left
  • padding-left
  • width
  • padding-right
  • border-right
  • margin-right

一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度(必须满足)

0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800

以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整。

  • 调整的情况
    • 如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足;
    • 这七个值中有三个值和设置为auto。
      width
      margin-left
      maring-right

如果某个值为auto,则会自动调整为auto的那个值以使等式成立。

  • 0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
  • 0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
  • 200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
  • auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
  • auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300

如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0。

  • 如果将三个值都设置为auto,则外边距都是0,宽度最大;
  • 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值。

所以我们经常利用这个特点来使一个元素在其父元素中水平居中,示例:

width:xxxpx;
margin:0 auto;

盒子模型-垂直方向的布局

子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出。
使用overflow属性来设置父元素如何处理溢出的子元素。

可选值

  • visible,默认值 子元素会从父元素中溢出,在父元素外部的位置显示;
  • hidden溢出内容将会被裁剪不会显示;
  • scroll生成两个滚动条,通过滚动条来查看完整的内容;
  • auto根据需要生成滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            overflow: auto;
        }

    
    </style>
</head>
<body>

    <div class="box1">
            在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。 这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上,告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。 枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝,不安了,仿佛想离去人间,避开枣树,只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子,却仍然默默地铁似的直刺着奇怪而高的天空,一意要制他的死命,不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声,夜游的恶鸟飞过了。 我忽而听到夜半的笑声,吃吃地,似乎不愿意惊动睡着的人,然而四围的空气都应和着笑。夜半,没有别的人,我即刻听出这声音就在我嘴里,我也即刻被这笑声所驱逐,回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响,还有许多小飞虫乱撞。不多久,几个进来了,许是从窗纸的破孔进来的。他们一进来,又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了,他于是遇到火,而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩,雪白的纸,折出波浪纹的叠痕,一角还画出一枝猩红色的栀子。 猩红的栀子开花时,枣树又要做小粉红花的梦,青葱地弯成弧形了……我又听到夜半的笑声;我赶紧砍断我的心绪,看那老在白纸罩上的小青虫,头大尾小,向日葵子似的,只有半粒小麦那么大,遍身的颜色苍翠得可爱,可怜。 我打一个呵欠,点起一支纸烟,喷出烟来,对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

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

盒子模型-外边距的折叠

垂直外边距的重叠(折叠),相邻的垂直方向外边距会发生重叠现象

兄弟元素

  • 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
  • 特殊情况:
    • 如果相邻的外边距一正一负,则取两者的和;
    • 如果相邻的外边距都是负值,则取两者中绝对值较大的。
  • 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理。

父子元素

  • 父子元素间相邻外边距,子元素的会传递给父元素(上外边距);
  • 父子外边距的折叠会影响到页面的布局,必须要进行处理。

行内元素的盒模型

行内元素的盒模型

  • 行内元素不支持设置宽度和高度;
  • 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局;
  • 行内元素可以设置border,垂直方向的border不会影响页面的布局;
  • 行内元素可以设置margin,垂直方向的margin不会影响布局。

display用来设置元素显示的类型,可选值:

  • inline将元素设置为行内元素;
  • block将元素设置为块元素;
  • inline-block将元素设置为行内块元素 ,行内块,既可以设置宽度和高度又不会独占一行;
  • table 将元素设置为一个表格;
  • none 元素不在页面中显示。

visibility用来设置元素的显示状态,可选值:

  • visible默认值,元素在页面中正常显示;
  • hidden元素在页面中隐藏不显示,但是依然占据页面的位置。
display: block;
visibility: hidden;

浏览器的默认样式

默认样式,通常情况,浏览器都会为元素设置一些默认样式。默认样式的存在会影响到页面的布局,通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)。

重置样式表:专门用来对浏览器的样式进行重置的。reset.css直接去除了浏览器的默认样式,normalize.css对默认样式进行了统一。

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/normalize.css">

布置练习

京东图片列表


<!DOCTYPE html>
<html>
<head>
    <title>图片列表</title>
</head>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            background-color: antiquewhite;
        }
         /* 设置外部ul的样式 */
         .img-list{
              /* 设置ul的宽度 */
              width: 190px;
              /* 设置ul的高度 */
              height: 470px;
              /* 裁剪溢出的内容 */
              overflow: hidden;
               /* 使ul在页面中居中(实际示例中不需要这么写)*/
               margin: 50px auto;
               background-color#F4F4F4;
              
         }
         /* 设置li的位置 */
         .img-list li:not(:last-child){
             margin-bottom: 9px;
         }
         /* 设置图片的大小 */
         .img-list img{
             width: 100%;
         }
        
    </style>
<body>
    <div>
        <ul class="img-list">
            <li>
                <a href="javascript:;"><img src="./img/01/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./img/01/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="javascript:;"><img src="./img/01/3.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</body>
</html>

京东左侧导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东的左侧导航</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>

        /* 设置body */
        body{
            /* 设置一个网页的背景,以使我们方便查看 */
            background-color: #bfa;
        }

        /* 设置菜单外部容器 */
        .left-nav{
            /* 设置宽度 */
            width: 190px;
            /* 设置高度 */
            height: 450px;
            /* 设置padding */
            padding: 10px 0;
            /* 设置一个背景颜色 */
            background-color: #fff;

            margin: 50px auto;
        }

        /* 设置菜单内部的item */
        .left-nav .item{
            height: 25px;
            /* 要让一个文字在父元素中垂直居中,只需将父元素的line-height设置为一个和父元素height一样的值 */
            line-height: 25px;
            /* 设置item的右内边距,将文字向内移动  */
            padding-left: 18px;
            /* 设置字体大小 */
            font-size: 12px;
        }

        /* 设置/的距离 */
        .item .line{
            padding: 0 2px;
        }

        /* 为item设置一个鼠标移入的状态 */
        .item:hover{
            background-color: #d9d9d9;
        }

        /* 设置超链接的样式 */
        .item a{
            /* 设置字体大小 */
            font-size: 14px;
            /* 设置字体的颜色 */
            color: #333;
            /* 去除下划线 */
            text-decoration: none;
        }

        /* 设置超链接的hover的样式 */
        .item a:hover{
            color: #c81623;
        }

    </style>
</head>

<body>

    <!-- 创建一个外部的容器 nav(div) div(div) ul(li)  -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="#">手机</a><span class='line'>/</span><a href="#">运营商</a><span class='line'>/</span><a href="#">数码</a>
        </div>

        <div class="item">
            <a href="#">电脑</a><span class='line'>/</span><a href="#">办公</a>
        </div>

        <div class="item">
            <a href="#">家居</a><span class='line'>/</span><a href="#">家具</a><span class='line'>/</span><a href="#">家装</a><span class='line'>/</span><a href="#">厨具</a>
        </div>

        <div class="item">
            <a href="#">男装</a><span class='line'>/</span><a href="#">女装</a><span class='line'>/</span><a href="#">童装</a><span class='line'>/</span><a href="#">内衣</a>
        </div>

        <div class="item">
            <a href="#">美妆</a><span class='line'>/</span><a href="#">个护清洁</a><span class='line'>/</span><a href="#">宠物</a>
        </div>

        <div class="item">
            <a href="#">女鞋</a><span class='line'>/</span><a href="#">箱包</a><span class='line'>/</span><a href="#">钟表</a><span class='line'>/</span><a href="#">珠宝</a>
        </div>

        <div class="item">
            <a href="#">男鞋</a><span class='line'>/</span><a href="#">运动</a><span class='line'>/</span><a href="#">户外</a>
        </div>

        <div class="item">
            <a href="#">房产</a><span class='line'>/</span><a href="#">汽车</a><span class='line'>/</span><a href="#">汽车用品</a>
        </div>

        <div class="item">
            <a href="#">母婴</a><span class='line'>/</span><a href="#">玩具乐器</a>
        </div>

        <div class="item">
            <a href="#">食品</a><span class='line'>/</span><a href="#">酒类</a><span class='line'>/</span><a href="#">生鲜</a><span class='line'>/</span><a href="#">特产</a>
        </div>

        <div class="item">
            <a href="#">艺术</a><span class='line'>/</span><a href="#">礼品鲜花</a><span class='line'>/</span><a href="#">农资绿植</a>
        </div>

        <div class="item">
            <a href="#">医药保健</a><span class='line'>/</span><a href="#">计生情趣</a>
        </div>

        <div class="item">
            <a href="#">图书</a><span class='line'>/</span><a href="#">文娱</a><span class='line'>/</span><a href="#">电子书</a>
        </div>

        <div class="item">
            <a href="#">机票</a><span class='line'>/</span><a href="#">酒店</a><span class='line'>/</span><a href="#">旅游</a><span class='line'>/</span><a href="#">生活</a>
        </div>

        <div class="item">
            <a href="#">理财</a><span class='line'>/</span><a href="#">众筹</a><span class='line'>/</span><a href="#">白条</a><span class='line'>/</span><a href="#">保险</a>
        </div>

        <div class="item">
            <a href="#">安装</a><span class='line'>/</span><a href="#">维修</a><span class='line'>/</span><a href="#">清洗</a><span class='line'>/</span><a href="#">二手</a>
        </div>

        <div class="item">
            <a href="#">工业品</a>
        </div>


    </nav>



</body>

</html>

网易新闻列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东的左侧导航</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>

        /* 设置body */
        body{
            /* 设置一个网页的背景,以使我们方便查看 */
            background-color: #bfa;
        }

        /* 设置菜单外部容器 */
        .left-nav{
            /* 设置宽度 */
            width: 190px;
            /* 设置高度 */
            height: 450px;
            /* 设置padding */
            padding: 10px 0;
            /* 设置一个背景颜色 */
            background-color: #fff;

            margin: 50px auto;
        }

        /* 设置菜单内部的item */
        .left-nav .item{
            height: 25px;
            /* 要让一个文字在父元素中垂直居中,只需将父元素的line-height设置为一个和父元素height一样的值 */
            line-height: 25px;
            /* 设置item的右内边距,将文字向内移动  */
            padding-left: 18px;
            /* 设置字体大小 */
            font-size: 12px;
        }

        /* 设置/的距离 */
        .item .line{
            padding: 0 2px;
        }

        /* 为item设置一个鼠标移入的状态 */
        .item:hover{
            background-color: #d9d9d9;
        }

        /* 设置超链接的样式 */
        .item a{
            /* 设置字体大小 */
            font-size: 14px;
            /* 设置字体的颜色 */
            color: #333;
            /* 去除下划线 */
            text-decoration: none;
        }

        /* 设置超链接的hover的样式 */
        .item a:hover{
            color: #c81623;
        }

    </style>
</head>

<body>

    <!-- 创建一个外部的容器 nav(div) div(div) ul(li)  -->
    <nav class="left-nav">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="#">手机</a><span class='line'>/</span><a href="#">运营商</a><span class='line'>/</span><a href="#">数码</a>
        </div>

        <div class="item">
            <a href="#">电脑</a><span class='line'>/</span><a href="#">办公</a>
        </div>

        <div class="item">
            <a href="#">家居</a><span class='line'>/</span><a href="#">家具</a><span class='line'>/</span><a href="#">家装</a><span class='line'>/</span><a href="#">厨具</a>
        </div>

        <div class="item">
            <a href="#">男装</a><span class='line'>/</span><a href="#">女装</a><span class='line'>/</span><a href="#">童装</a><span class='line'>/</span><a href="#">内衣</a>
        </div>

        <div class="item">
            <a href="#">美妆</a><span class='line'>/</span><a href="#">个护清洁</a><span class='line'>/</span><a href="#">宠物</a>
        </div>

        <div class="item">
            <a href="#">女鞋</a><span class='line'>/</span><a href="#">箱包</a><span class='line'>/</span><a href="#">钟表</a><span class='line'>/</span><a href="#">珠宝</a>
        </div>

        <div class="item">
            <a href="#">男鞋</a><span class='line'>/</span><a href="#">运动</a><span class='line'>/</span><a href="#">户外</a>
        </div>

        <div class="item">
            <a href="#">房产</a><span class='line'>/</span><a href="#">汽车</a><span class='line'>/</span><a href="#">汽车用品</a>
        </div>

        <div class="item">
            <a href="#">母婴</a><span class='line'>/</span><a href="#">玩具乐器</a>
        </div>

        <div class="item">
            <a href="#">食品</a><span class='line'>/</span><a href="#">酒类</a><span class='line'>/</span><a href="#">生鲜</a><span class='line'>/</span><a href="#">特产</a>
        </div>

        <div class="item">
            <a href="#">艺术</a><span class='line'>/</span><a href="#">礼品鲜花</a><span class='line'>/</span><a href="#">农资绿植</a>
        </div>

        <div class="item">
            <a href="#">医药保健</a><span class='line'>/</span><a href="#">计生情趣</a>
        </div>

        <div class="item">
            <a href="#">图书</a><span class='line'>/</span><a href="#">文娱</a><span class='line'>/</span><a href="#">电子书</a>
        </div>

        <div class="item">
            <a href="#">机票</a><span class='line'>/</span><a href="#">酒店</a><span class='line'>/</span><a href="#">旅游</a><span class='line'>/</span><a href="#">生活</a>
        </div>

        <div class="item">
            <a href="#">理财</a><span class='line'>/</span><a href="#">众筹</a><span class='line'>/</span><a href="#">白条</a><span class='line'>/</span><a href="#">保险</a>
        </div>

        <div class="item">
            <a href="#">安装</a><span class='line'>/</span><a href="#">维修</a><span class='line'>/</span><a href="#">清洗</a><span class='line'>/</span><a href="#">二手</a>
        </div>

        <div class="item">
            <a href="#">工业品</a>
        </div>


    </nav>



</body>

</html>

盒子的大小

默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定。
box-sizing:用来设置盒子尺寸的计算方式(设置widthheight的作用)。可选值:

  • content-box:默认值,宽度和高度用来设置内容区的大小;
  • border-box:宽度和高度用来设置整个盒子可见框的大小;
  • widthheight指的是内容区和内边距和边框的总大小。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px red solid;
            /* 
                默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定

                    box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
                        可选值:
                            content-box 默认值,宽度和高度用来设置内容区的大小
                            border-box 宽度和高度用来设置整个盒子可见框的大小
                                width 和 height 指的是内容区 和 内边距 和 边框的总大小
             */
            
            box-sizing: border-box;
        }
    
    </style>
</head>
<body>

    <div class="box1"></div>
    
</body>
</html>

轮廓阴影和圆角

box-shadow用来设置元素的阴影效果,阴影不会影响页面布局。

  • 第一个值:水平偏移量,设置阴影的水平位置,正值向右移动,负值向左移动;
  • 第二个值:垂直偏移量,设置阴影的水平位置,正值向下移动,负值向上移动;
  • 第三个值:阴影的模糊半径;
  • 第四个值:阴影的颜色。
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

outline用来设置元素的轮廓线,用法和border一模一样。轮廓和边框不同的点,就是轮廓不会影响到可见框的大小。

.box1:hover{
            outline: 10px red solid;
}

border-radius: 用来设置圆角,圆角设置的圆的半径大小。

border-top-left-radius:  
border-top-right-radius 
border-bottom-left-radius:  
border-bottom-right-radius:  
border-top-left-radius:50px 100px;

border-radius可以分别指定四个角的圆角:

  • 四个值 左上 右上 右下 左下;
  • 三个值 左上 右上/左下 右下 ;
  • 两个个值 左上/右下 右上/左下。
/* 将元素设置为一个圆形 */
            border-radius: 50%;

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!