css盒子模型学习

duoduojimuduo

已于 2022-11-23 16:51:56 修改

阅读量66

点赞数

文章标签： css css3 html

于 2022-11-23 16:51:50 首次发布

本文链接：https://blog.csdn.net/duoduojimuduo/article/details/128003527

版权

盒子模型：

   把HTML中所有的布局元素（块元素/div）看成一个矩形的盒子

盒子模型的组成：内容区（content）、padding（内边距）、border（边框）、margin（外边距）
盒子真实的大小：内容区、边框、内边距                                                                   自己设置的宽高属性（width，height）是内容区的大小，不是盒子真实的大小                               1.边框：
border属性                   边框会影响盒子大小
border:边框粗细边框样式边框颜色;

三个值的顺序可以随意放置

边框粗细: 指定边框的大小数值px

边框颜色：指定边框的一种颜色
边框样式: 指定边框线条的样式

               solid 实线

               dashed 虚线

               dotted 点线

                       border-top                   1.先准备一个布局元素（div）

   边框可以在四个方向上都可以加                   border-bottom                   2.将布局元素的宽高属性都设置为0
                                   用边框画三角形
                       border-left                   3.设置边框，每个方向上的边框要求粗细都一样，每个边框的粗细都要大一点

                       border-right                   4.保留指定方向的边框，其他的三个方向上的边框设置成透明色

2.内边距：

   padding           内边距一定会影响盒子的大小

   内容区到边框的距离

   正常情况：   内边距增大，内容区大小不变，整个盒子变大，自己设置的宽高只是内容区大小

   盒子模型的怪异模式（box-sizing:border-box）:                   内边距增大，内容区减小，整个盒子大小不变，自己设置的宽高就是盒子的真实大小

   padding-bottom

   padding-top
               padding：上右下左;           方向是顺时针的，每个值和每个值之间用空格隔开
   padding-left
               padding：上左右下;
   padding-right                       内边距一定不能设置成负数
               padding:上下左右;


补充：鼠标样式
           pointer 鼠标的点击状态（小手）
   cursor
           default 鼠标箭头的状态（默认值）

           crosshair 十字线

           move 移动

           text 指示文本

           help 帮助状态

           wait 等待状态

           url(图片路径),defaullt           引入的图片最好是以ico结尾的图，大小最好不要超过32*32

3.margin外边距：
盒子和盒子之间的距离（调整盒子位置）                   外边距margin不影响盒子的大小
                                           外边距可以设置为负值
               margin-top
   外边距使用内边距一样
               margin-right
                           margin: 上右下左;           顺时针
               margin-left
                           margin：上左右下;
               margin-bottom
                           margin: 上下左右;