盒子模型

2022/4/20 6:13:47

编程Tag： 模型边框 width color border Solid 盒子 200px

本文主要是介绍盒子模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           /* 
           width和height是内容区
           元素中的所有子元素和文本内容都在内容区中排列
           */
           width: 200px;
           height: 200px;
           background-color: yellow;

           /* 
           边框 属于盒子的边缘
                设置边框至少三个样式
                边框宽度border-width
                边框颜色border-color
                边框样式border-style
                边框的大小会影响整个盒子的大小
           */

           border-width: 10px;
           border-color: red;
           border-style: solid;
       }
           
    </style>
</head>
<body>
    <!-- CSS
            css将页面中的所有元素都设置为了矩形的盒子
            盒子的组成
                内容区content
                内边距padding
                外边距margin
                边框border
     -->

     <div class="box1"></div>
</body>
</html>

盒子模型-边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
          
           width: 200px;
           height: 200px;
           background-color: rgb(0, 255, 247);


           /* 要设置边框三个必须写，但是border-width有默认值，不写也有 */
           /* 
           border-width可以指定四个方向 上右下左 顺时针
           三个值：上 左右 下
           两个值：上下 左右
           一个：上下左右

           除了border-width
           还有border-xxx-width left top right top
           */
           border-width: 10px,20px;
           border-color: rgb(119, 255, 0);
           border-style: solid;
           /* 
           border-color也可以指定四个方向的颜色 上右下左 顺时针

           border-color如果不写默认使用color值
           */

           /* 
           border-solid 同样可以四个值
            solid实线
            dotted点状虚线
            dashed虚线
            double双线
           */
        
        /* border简洁模式 没有先后顺序 还有border-xxx*/
           border:10px orange solid;
        border-right: none;
       }
           
    </style>
</head>
<body>
  

     <div class="box1"></div>
</body>
</html>

这篇关于盒子模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

盒子模型

相关编程文章