首页 > 其他分享> 文章详细

4.CSS盒子模型

2022-09-03 17:00:28 阅读：173 来源： 互联网

标签：盒子 solid margin 模型边框 1px div border CSS

盒子模型

4.1 什么是盒子模型

margin：外边距

border：边框

padding：内边距

4.2 边框

1，边框的粗细

2，边框的样式

3，边框的颜色

 /*body总有一个默认的外边距*/
 body{
     margin:0;
     padding: 0;
     text-decoration: none;
 }
 /*border:粗细，样式，颜色*/
 h2{
     font-size:16px;
     
     line-height: 30px;
     margin:0;
 }
 #box{
     width: 300px;
     border:1px solid red;
 }
 form{
     background: blue;
 }
 div:nth-of-type(1)>input{
     border: 3px solid black;
 }
 div:nth-of-type(2)>input{
     border: 3px dashed yellow;
 }

4.3 内外边距

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--外边距的妙用：居中元素-->
     <style>
         /*border:粗细，样式，颜色
         margin: 0 auto;两个参数时候默认上下和左右，四个参数的时候默认上左下右
         margin:0 1px 2px 3px
         */
         #box{
             width: 300px;
             border:1px solid red;
             margin: 0 auto;
         }
         h2{
             font-size:16px;
             
             line-height: 30px;
             margin:0 1px;
         }
         form{
             background: blue;
         }
         input{
             border: 1px solid black;
         }
         div:nth-of-type(1){
             padding: 10px;
         }
     </style>
 </head>
 <body>
 <div id="box">
     <h2>会员登录</h2>
     <form action="#">
         <div>
             <span>姓名：</span>
             <input type="text">
         </div>
         <div>
             <span>密码：</span>
             <input type="text">
         </div>
         <div>
             <span>邮箱：</span>
             <input type="text">
         </div>
     </form>
 </div>
 </body>
 </html>

盒子的计算方式：margin+border+padding+内容宽度

4.4 边框圆角

4个角

 <!--左上  右上  右下   左下
 border-radius，一个参数时四个角，两个参数时左上，右下，四个值时左上，右上，右下，左下，顺时针方向
 -->
 <style>
     div{
         width: 100px;
         height: 150px;
         margin: 30px;
         border: 10px solid red;
         border-radius:50px 50px 0px 0px;
     }
 </style>

4.5 盒子阴影

 div{
     width: 100px;
     height: 100px;
     border: 10px solid red;
     box-shadow:10px 10px 100px yellow ;
 }

标签：盒子,solid,margin,模型,边框,1px,div,border,CSS
来源： https://www.cnblogs.com/cyh822blogs/p/16653019.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。