02-CSS基础与进阶-day5_2018-09-03-20-20-37

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

浮动

定位

01网页的本质.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
</head>
<body>
    <div>div盒子</div>
    <hr />
    <div>主体部分</div>
</body>
</html>

02盒子模型之border.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
              width: 200px; /*内容的宽*/
              height: 200px;/*内容的高*/
              border-width: 8px; /*边框粗细*/
              border-color: red; /*边框颜色*/
              /* border-style: solid; *//*边框样式实线 用的最多*/
              /* border-style: dashed;  虚线*/
              /* border-style: dotted; 点线*/
              border-style: double; /* 双线*/
              border: 10px solid pink;
       }
    </style>
</head>
<body>
    <div>我是一个盒子</div>
</body>
</html>

03边框写法总结.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input {
            border: 0; /*没有边框*/
        }

        .uname {
            border-width: 1px;
            border-style: solid;
            border-color: green;
        }

        .nc {
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: pink;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: brown;
        }

        .email {
            border-left: 1px solid red;
            border-right: 1px solid #ccc;
        }

        .tel {
            /* border: 2px solid skyblue; */
            border-left: 2px solid skyblue;
            border-top: 2px solid skyblue;
            border-right: 2px solid skyblue;
            border-bottom: 2px solid skyblue;
        }
    </style>
</head>
<body>
    <label for="">用户名:<input type="text" class="uname"></label><br /><br />
    <label for="">昵称:<input type="text" class="nc"></label><br /><br />
    <label for="">邮箱:<input type="email" class="email"></label><br /><br />
    <label for="">手机:<input type="tel" class="tel"></label>
</body>
</html>

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

02-CSS基础与进阶-day5_2018-09-03-20-20-37

猜你喜欢