web前端新手小白第五天的日常更新_web设置默认值黑色-CSDN博客

本文链接：https://blog.csdn.net/m0_72174649/article/details/125448119

今天学的东西与昨天相比学的没有那么多了，但也要慢慢消化，总体来说这个星期接触和学到的东西真的特别多得认真地去揣摩。还是分享一下今天学到的东西吧：

1:border-width 默认值一般是3px

使用border-width可以分别指定四个边框的宽度

可以跟多个值

4个值上右下左

3个值上左右下

2个值上下左右

1个值上下左右

除了border-width，CSS中还提供了四个border-xxx-width

xxx的值可能是top right bottom left

专门用来设置指定边的宽度

2:border-color 设置边框的颜色默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

补充小箭头的写法

3:border-style 设置边框的样式

* 可选值：

* none，默认值，没有边框

* solid 实线

double 双线

dashed [dæʃt] 虚线

* dotted ['dɔtid] 点状边框

* style也可以分别指定四个边的边框样式，规则和width一致，

* 同时它也提供border-xxx-style四个样式，来分别设置四个边

* border

* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

* - 而且没有任何的顺序要求

* - border一指定就是同时指定四个边不能分别指定

* border-top border-right border-bottom border-left

* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

-->

   .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        border: 10px red solid;
        /* padding-top:50px ;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px; */
        padding:10px ;
      }

      /*
			 * 创建一个子元素box2占满box1，box2把内容区撑满了
			 */
       .box2{
         width: 100%;
         height: 100%;
         background-color: pink;
       }
    
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>
<!-- 				
/*
 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
 	一共有四个方向的内边距，可以通过：
 		padding-top
 		padding-right
 		padding-bottom
 		padding-left
 			来设置四个方向的内边距

 总结：
 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
 	盒子的大小由内容区、内边距和边框共同决定
*/


/*
* 使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
-->