盒子模型，模块，内减模式/边框属性/内外边距/精灵图使用/外边距合并问题/阴影/盒子阴影/嵌套元素外边距塌陷

最新推荐文章于 2023-03-23 12:30:00 发布

喵帕斯_喵太

最新推荐文章于 2023-03-23 12:30:00 发布

阅读量331

点赞数

分类专栏：前端基础文章标签： html css css3

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115054071

版权

前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

盒子模块

四大部分

实际内容
内边距
边框
外边距
盒子模型内减模式常用!!!
box-sizing: border-box;
： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度

  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    div{
      width: 50%;
      height: 400px;
      float: left;

      /* 盒子模型 内减模式 => 内容减少的模式    */
      /* 
      它的宽度 等于 width:50%;

      50% =  内容 + padding + border 

       */
      box-sizing: border-box;
    }
    div:nth-child(1){
  
      background-color: aqua;
      border: 111px solid #000;
      padding: 30px;
    }
    div:nth-child(2){
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div>1</div>
  <div>2</div>
  
</body>
</html>

边框 border
border-width 边框宽度
- 边框粗细，单位是 px
border-style 边框样式
- solid 实现常用
- dashed 虚线少用
- none 没有边框
border-color 边框颜色
transparent 背景透明
边框可单独设置
border-top（right,bottom,left）: 1px solid #000;
边框圆角

border-radiuis: 20px; 
border-radiuis: 50%;

长方形都是用 px单位
想要实现胶囊效果那么就设置为高度的一半

外边距合并
相邻块级元素垂直外边距合并以最大的那个外边距生效
嵌套元素外边距塌陷

相邻块级元素垂直外边距合并
现象

相邻块级元素垂直外边距合并
解决方法

只给一个盒子添加外边距就可以了也就是合理的编写代码即可
或者给父级盒子加上overflow:hidder;（推荐）
嵌套元素外边距塌陷
现象
- 如果父子两个元素都是添加了上外边距那么以最大的为准
解决
- 给父元素添加了上边框(给父元素添加上外边距和上内边距推荐最符合语义)
- border:1px solid transparent 给父元素加外边框(会增加盒子大小）
- 给父元素加内边距 padding （会改变内边距）
- 给父元素添加overflow:hidden;（推荐）

内边距 padding

控制内容和边框之间的距离

div{
    padding:10px; /* 上 右 下 左 */ 
    padding:10px 20px; /* 上下 左右 */ 
    padding:10px  20px 30px; /* 上 左右 下 */ 
    padding:10px  20px 30px 40px; /* 上 右 下 左 */ 
    padding-top（right,bottom,left,）:20px;
}

外边距 margin

控制盒子于盒子之间的距离

div {
    margin:30px;
    margin:30px 40px 50px 60px;
}

注意：外边距 margin 书写方式跟内边距 padding 同理。

元素居中

行内元素或者行内块元素

只需要给他们的父元素添加一行代码

text-align:center;

块级元素

给它 自己 添加代码

margin: 0  auto;

精灵图的使用

 <title>Document</title>
  <style>
    div{
      background-color: aqua;
      width: 42px;
      height: 42px;
      background-image: url(图片路径);

      /* 设置背景图片位置 */
      background-position: 0px  0px;
      background-repeat: no-repeat;
      （background：url(图片路径) no-repeat 0px  0px;）此处复合写法

      /* 
      步骤:
      1 先设置好 盒子的大小  42 * 42 
      2 要设置好 背景图片位置
        1 自己用量图工具去测量 
        2 使用谷歌浏览器去调试  
       */
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

步骤

先设置好盒子的大小 0px * 0px
要设置好背景图片位置
1. 自己用量图工具去测量
2. 使用谷歌浏览器去调试

阴影

分为两种

实际开发当中,可以利用谷歌浏览器工具来调试页面

盒子阴影
文本阴影
盒子阴影

值	描述
h-shadow	必须，x 偏移量，允许负值
v-shadow	必须，y 偏移量，允许负值
blur	可选，阴影模糊半径
spread	可选，阴影扩散半径
color	可选，阴影颜色
inset	可选，内部阴影，直接写单词即少用

div {
    box-shadow: 2px 2px 2px 1px red;
    /*  x偏移 y偏移值 模糊值 外延值 颜色  */
}

文本阴影

值	描述
h-shadow	必须，x 偏移量，允许负值
v-shadow	必须，y 偏移量，允许负值
blur	可选，阴影模糊半径
color	可选，阴影颜色

div {
	text-shadow: 5px 5px 5px red;
	水平偏移 垂直偏移 模糊值 颜色
}
      / / / / / / / 分割线/

 <title>Document</title>
  <style>
    body{
      background-color: #999;
    }
    div {
      color:#999;
      font-size: 100px;
      /* 
      墓碑上的文字 有点凹凸
       */
      text-shadow: -1px -1px 1px #333,
       1px 1px 1px #fff;
    }
  </style>
</head>

<body>
  <div>凹凸曼</div>
</body>

</html>

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型，模块，内减模式/边框属性/内外边距/精灵图使用/外边距合并问题/阴影/盒子阴影/嵌套元素外边距塌陷

盒子模块四大部分实际内容内边距边框外边距边框 borderborder-width 边框宽度5pxborder-style 边框样式solid 实现常用dashed 虚线少用none 没有边框border-color 边框颜色black 黑色内边距 padding控制内容和边框之间的距离div{ padding:10px; /* 上右下左 */ padding:10..
复制链接

扫一扫