5-H5样式控制CSS-盒子模型

#盒子模型

上课·记录·疑问

错误在高宽指内容即网页元素的。

左。。。

Input  none;去点击后出现的输入框

input{

            outline: none;

        }

重置css

lh32

Pl.

Block?

课件

1边框说明表

2圆角边框

3盒子阴影

总结

代码

1边框样式

w宽度b边框

w、b:宽 线 颜色

<head lang="en">

    <meta charset="UTF-8">

    <title>边框</title>

    <style>

        

        .box{

           width: 298px;                 /* 盒子宽度298px*/

            border:1px solid #3a6587;    /* 设置盒子边框*/

        }

        h2{

            font-size:16px;

            background-color:#3a6587;

            height:35px;

            line-height:35px;

            color:#FFF;

        }

        form{

             background: #c8ece3;

         }

        div:nth-of-type(1) input{

            border: 3px solid black;     /* 第一个div下面的input元素设置边框3px 实线 黑色*/

        }

        div:nth-of-type(2) input{

            border: 1px dashed red;  /* 第二个div下面的input元素设置边框1px 虚线 红色*/

        }

        div:nth-of-type(3) input{

            border: 2px dotted red;   /* 第三个div下面的input元素设置边框2px 点线 红色*/

        }

    </style>

</head>

<body>

<div class="box">

    <h2>会员登录</h2>

    <form action="#">

        <div>

            <strong class="name">姓名：</strong>

            <input type="text"/>

        </div>

        <div>

            <strong class="name">邮箱：</strong>

            <input type="text"/>

        </div>

        <div>

            <strong class="name">电话：</strong>

            <input type="text"/>

        </div>

    </form>

</div>

</body>

2外边距margin

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body,h2{

            margin: 0;

        }

        .box{

           width: 298px;                 /* 盒子宽度298px*/

            border:1px solid #3a6587;    /* 设置盒子边框*/

            margin:0px auto;           /* 让整个盒子居中*/

        }

        h2{

            font-size:16px;

            background-color:#3a6587;

            height:35px;

            line-height:35px;

            color:#FFF;

        }

        div{

            margin-bottom: 6px;

        }

        form{

             background: #c8ece3;

         }

    </style>

</head>

3margin居中条件

10 auto

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            margin: 0 auto;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div>我是div元素</div>

</body>

</html>

2width

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

      span{

          width: 100px;

          margin: 0 auto;

          border: 1px solid red;

      }

    </style>

</head>

<body>

    <span>我是span元素</span>

</body>

</html>

4内边距padding-.||LR

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body,h2{

            margin: 0;

            padding: 0;

        }

        .box{

           width: 298px;                 /* 盒子宽度298px*/

            border:1px solid #3a6587;    /* 设置盒子边框*/

            margin:0px auto;           /* 让整个盒子居中*/

        }

        h2{

            font-size:16px;

            background-color:#3a6587;

            height:35px;

            line-height:35px;

            color:#FFF;

            padding-left:20px;      /* 让标题左边留点空隙*/

        }

        div{

            margin-bottom: 6px;

        }

        form{

             background: #c8ece3;

             padding:30px 10px;    /* 表单内部都设置空隙*/

         }

    </style>

</head>

<body>

<div class="box">

    <h2>会员登录</h2>

    <form action="#">

        <div>

            <strong class="name">姓名：</strong>

            <input type="text"/>

        </div>

        <div>

            <strong class="name">邮箱：</strong>

            <input type="text"/>

        </div>

        <div>

            <strong class="name">电话：</strong>

            <input type="text"/>

        </div>

    </form>

</div>

</body>

</html>

5盒模型尺寸WHPMB

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>盒模型尺寸</title>

    <style>

        div{

            width: 88px;

            height: 88px;

            padding: 5px;

            margin: 10px;

            border: 1px solid #000000;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

6box-sizing-未普及

计算盒子边框尺寸

不会往下掉的处理，即内部留出间隙

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>box-sizing</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            padding: 5px;

            margin: 10px;

            border: 1px solid #000000;

            box-sizing: border-box;/*优秀*/

            /*box-sizing: content-box;  /!* 默认值*!/*/

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

7border-radius左上对右下

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>border-radius的使用</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            border: 10px solid red;

           /*border-radius: 20px;        /!*四个角都是圆角，值一样*!/*/

            /*border-radius: 20px 40px;     /!*左上右下是20px，右上左下是40px*!/*/

            /*border-radius: 20px  10px  50px;     /!*左上是20px，右上左下是10px, 右下是50px*!/*/

            border-radius: 20px  10px  50px  30px;     /*左上是20px，右上左下是10px, 右下是50px*/

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

8border-radius制作特殊图形

1半圆50%左上右上0.50.500

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>border-radius制作半圆形</title>

    <style>

        div{

            background: red;

            margin: 30px;

        }

        div:nth-of-type(1){

            width: 100px;

            height: 50px;

            border-radius: 50px 50px 0 0;

        }

        div:nth-of-type(2){

            width: 100px;

            height: 50px;

            border-radius:0 0 50px 50px;

        }

        div:nth-of-type(3){

            width: 50px;

            height: 100px;

            border-radius:0 50px 50px  0;

        }

        div:nth-of-type(4){

            width: 50px;

            height: 100px;

            border-radius: 50px 0 0 50px;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

2扇形0.5 000

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>border-radius制作扇形</title>

    <style>

        div{

            background: red;

            margin: 30px;

        }

        div:nth-of-type(1){

            width: 50px;

            height: 50px;

            border-radius: 50px 0 0 0;

        }

        div:nth-of-type(2){

            width: 50px;

            height: 50px;

            border-radius:0 50px 0 0;

        }

        div:nth-of-type(3){

            width: 50px;

            height: 50px;

            border-radius:0 0 50px 0;

        }

        div:nth-of-type(4){

            width: 50px;

            height: 50px;

            border-radius: 0 0 0 50px;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

3圆形0.5

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>border-radius制作圆形</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            border: 4px solid red;

            border-radius: 50%;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

9box-shadow

box-shadow: inset 3px 3px 10px #06c;   

            /*内阴影*/

 /* box-shadow:  3px 3px 10px #06c;   */

             /*外阴影*/

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>box-shadow的使用</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            border: 1px solid red;

            border-radius: 8px;

            margin: 20px;

            /*box-shadow: 20px 10px 10px #06c;      /!*内阴影*!/*/

            /*box-shadow: 0px 0px 20px #06c;          /!*只设置模糊半径的阴影*!/*/

            box-shadow: inset 3px 3px 10px #06c;   /*内阴影*/

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

10清除默认样式CSS

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}

ol,

ul {

  list-style: none;

}

blockquote,

q {

  quotes: none;

}

blockquote:before,

blockquote:after,

q:before,

q:after {

  content: "";

  content: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

body,

button,

input,

select,

textarea {

  /* for ie */

  font: 12px/1 "微软雅黑", Tahoma, Helvetica, Arial, sans-serif;

  /* 用 ascii 字符表示，使得在任何编码下都无问题 */

  background: transparent;

}

a {

  text-decoration: none;

}

/* 伪元素 */

.clearfix::after {

  content: "";

  display: block;

  clear: both;

}

/* IE6,IE7 */

.clearfix {

  *zoom: 1;

}