网页开发学习笔记八: css 盒子模型

  • 边框 border
    • border-top-style: solid;　　 实线

　　　　　　　　　　　　　　  dotted;　 点绩

　　　　　　　　　　　　　　  dashed;　虚线　

    • border-top-color　　边框颜色
    • border-top-width　  边框宽度
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        .box{
            width: 300px;
            height: 400px;
            background: #999;
            border-top-style: solid;
            border-top-color: red;
            border-top-width: 5px;
            border-bottom-style: dashed;
            border-bottom-color: green;
            border-bottom-width: 10px;
        }

    </style>
</head>
<body>

    <div class="box">AAAAA</div>

</body>
</html>
  • 边框的连写属性: 没有顺序要求, 线型为必写项
    • border-top: 5px solid red;
  • 边框合并　　border-collapse: collapse;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        table{
            width: 300px;
            height: 500px;
            border: 1px solid red;
            /*边框合并*/
            border-collapse: collapse;
        }

        td{
            border: 1px solid red;
            text-align: center;
        }

    </style>
</head>
<body>

    <table cellspacing="0">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

</body>
</html>
  • 获取焦点
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        
        .username{
            /*去掉默认边框*/
            border: 0 none;
            /*去掉选中时边框的状态*/
            outline-style: none;
            background: #ccc;
            border: 1px dashed green;
        }

　　　　　.username:foucs{
　　　　　　　background: red;
　　　　　}

    </style>
</head>
<body>

</body>
</html>

 

  • 获取光标焦点　　label for id
<babel for="username">用户名:</label>
<input type="text" class="username" id="username"> <br><br>

 

  • 内边距 padding
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        
        .box{
  /*        padding-left: 20px;
            padding-right: 30px;
            padding-top: 40px;
            padding-bottom: 40px;*/
            width: 500px;
            height: 300px;
            background: red;

            /* 上 下 左 右 各20px */
            padding: 20px;

            /* 上 下 20px, 左 右 30px */
            padding: 20px 30px;

            /* 上 20px, 左 右 30px, 下 10px */
            padding: 20px 30px 10px;

            /* 上 右 下 左 */
            padding: 20px 30 10px 50px;
        }

    </style>
</head>
<body>

    <div class="box">AAAAA</div>

</body>
</html>
    • 内边距撑大盒子的问题
      • 内边距影响盒子的宽度
      • 边框影响盒子的宽度
      • 盒子宽度 = 定义的宽度 + 边框宽度 + 左右内边距
      • 继承的盒子一般不舍被撑大

 

  • 外边距 padding
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: 4000px;
            margin-left: 30px;
            margin-right: 30px;
            margin-top: 40px;
            margin-bottom: 50px;

            // 外边距的连写属性
            margin: 20px 30px 40px, 50px;
        }
        
    </style>
</head>
<body>

    <div class="box">AAAAA</div>


</body>
</html>

 

  • 外边距 padding
    • 垂直方向外边距合并
      • 两个盒子垂直, 一个设置上外边距, 一个设置下外边距, 取得设置较大
    • 嵌套的盒子外边距塌陷
      • 给父盒子设置边框
      • 给父盒子 overflew: hidden; 　　　

 

posted @ 2017-03-04 22:45  小小聪明屋  阅读(176)  评论(0)  编辑  收藏  举报