盒子模型

黄色的海绵宝宝

已于 2022-07-18 20:14:48 修改

阅读量111

点赞数

文章标签： servlet java html

于 2022-07-18 20:13:06 首次发布

本文链接：https://blog.csdn.net/m0_70552412/article/details/125858833

版权

本文深入解析HTML中的盒子模型，包括边框、内边距、外边距的概念及其对元素布局的影响。通过实例展示不同属性设置后的效果，帮助开发者更好地掌握网页元素的样式控制。

摘要由CSDN通过智能技术生成

   文档流（normal flow）
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流

           元素在文档流中的特点
               块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
               内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
img

display

盒子模型

元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里
所以我们把所有的元素都想成盒子，矩形 */

/* 盒模型、盒子模型、框模型（box model）*/
/*
买个冰箱

内容区 content 冰箱
内边距 padding 泡沫
边框 border 快递盒
外边距 margin 控制盒子的位置冰箱离你的距离
*/

/* 1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容区的宽度
heigth 设置内容区的高度

盒子模型-边框

      2:边框（border）元素设置边框
           边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
           设置边框必须指定三个样式
边框的颜色、样式、大小

 .box {
        width: 0px;
        height: 0px;
        /* background-color: pink; */
        border-color:   transparent transparent transparent red;
        border-style: dashed;
        border-width:  60px ;
        /* border: blue  solid  10px; */
        /* border-top: red solid 10px;
        border-right: 10px solid  blue ;
        border-bottom: 10px solid yellow;
        border-left: solid green  10px; */
        /* border-right: none; */

2:边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式
边框的颜色、样式、大小

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

效果图：

1:border-width 默认值一般是1-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

最低0.47元/天解锁文章

黄色的海绵宝宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

文档流（normalflow）网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层文档流是网页最底层我们创建的元素默认情况下，都在文档流中元素分为两种状态在文档流中，脱离文档流元素在文档流中的特点块元素会独占一行块元素的宽度默认是父元素的100%块元素的高度默认是被内容撑开的内联元素（行内元素）不会独占一行宽度高度默认都是被内容撑开的，不能自己定义宽高行内块元素。......
复制链接

扫一扫