css属性的学习-CFANZ编程社区

outline-style

属性用于设置元素的整个轮廓的样式。样式不能是 none，否则轮廓不会出现。

.username {
        outline-style: none;  
    }

    <label for="username">用户名:</label><input id="username" class="username"/> <br />

当聚焦时候:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box例子</title>
    <style type="text/css">

        .username {
            border: 0 none; /* 去边框 */
            background: #ccc;
            border: 1px dashed red;
            outline-style: none;   /* 去掉轮廓线  */
        }

        .search{
            border: 0 none; /* 为了兼容性更好*/
            
            border:1px solid #999;
            background: url("./search.png") no-repeat right;
        }


    </style>
</head>
<body>
    
    <label for="username">用户名:</label><input id="username" class="username"/> <br />
    邮  箱: <input  class="email"/><br />
    搜索 : <input  class="search"/>
    
</body>
</html>

padding

padding-left | right | top | bottom
内边距撑大盒子的问题

影响盒子宽度的因素
内边距影响盒子的宽度

边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
继承的盒子一般不会被撑大包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。

padding: 20px;   上右下左内边距都是20px
padding: 20px 30px;   上下20px   左右30px
padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40
padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

margin

margin: 20px;    上下左右外边距20PX
margin: 20px 30px;   上下20px  左右30px
margin: 20px  30px  40px;     上20px  左右30px   下  40px
margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px

margin解释

margin-left | right | top | bottom
垂直方向外边距合并

两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。

嵌套的盒子外边距塌陷

原因：
解决方法:

1 给父盒子设置边框
2给父盒子overflow:hidden; bfc 格式化上下文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <style type="text/css">
  
        .box {
            width: 300px;
            height: 300px;       
            background-color: red;
            border: 1px solid red;
        } 

        .box1 {
            width: 100px;
            height: 100px;       
            background-color: orange;
            margin-top: 50px;
        }

    </style>
</head>
<body>
    
    <div class="box">
        <div class="box1">
           
        </div>
    </div>
    
</body>
</html>

<!DOCTYPE html >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <style type="text/css">
  
        .box {
            width: 300px;
            height: 300px;       
            background-color: red;
            overflow: hidden;

        } 

        .box1 {
            width: 100px;
            height: 100px;       
            background-color: orange;
            margin-top: 50px;
            
        }

    </style>
</head>
<body>
    
    <div class="box">
        <div class="box1">
           
        </div>
    </div>
    
</body>
</html>