网站导航
> 文档中心 > CSS盒子模型

CSS盒子模型

网友: 文档中心 2022-05-10 15:46:23

文章目录

  • 1. 盒子模型的介绍
  • 2. 内容区域的宽度和高度
  • 3. 边框（border）
    • 3.1 连写形式
    • 3.2 单方向设置
  • 4. 内边距（padding）、外边距（margin）
    • 4.1 border或padding会撑大盒子
    • 4.2 清楚默认内外边距
    • 4.3 外边距折叠现象
    • 4.4 行内元素的内外边距问题

1. 盒子模型的介绍

  • 盒子的概念： 页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角更方便的进行布局。浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们形象地称之为 盒子
  • CSS中规定每个盒子分别由：内容（content）、内边距（padding）、边框（border）、外边距（margin）构成

2. 内容区域的宽度和高度

  • 作用： 利用width和height属性默认设置是盒子内容区域的大小
  • 属性： width / height
  • 常见取值： 数字 + px

3. 边框（border）

3.1 连写形式

  • 属性名： border
  • 属性值： 单个取值的连写，取值之间以空格隔开；如border:10px solid red;
  • 快捷键： bd+tab

3.2 单方向设置

  • 场景： 只给盒子的某个方向单独设置边框
  • 属性名： border - 方位名词
  • 属性值： 连写的取值
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> div{     height: 40px;     border-top: 3px solid #ff8500;     border-bottom: 1px solid #edeef0; } .box a{     width: 80px;     height: 40px;     /* 推荐先加上:可以看见文字所在位置 */     /* background-color: #edeef0; */     display: inline-block;     text-align: center;     line-height: 40px;     font-size: 12px;     color: #4c4c4c;     text-decoration: none; } .box a:hover{     background-color: #edeef0;     color: #ff8400; }    </style>    </head><body>    <div class="box">    <a href="#">新浪导航</a>    <a href="#">新浪导航</a>    <a href="#">新浪导航</a>    <a href="#">新浪导航</a>    </div></body></html>

4. 内边距（padding）、外边距（margin）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style> div{     /* width/height + border + padding */     width: 240px;     height: 240px;     background-color: pink;     border: 10px solid #000;     /* 4个方向的内边距 */     padding: 20px;     /* padding可以作复合属性 */     /* 4个值:  上   右   下   左 */     /* padding:  10px 20px 40px 80px; */     /* 3个值:  上  左右  下  */     /* padding: 10px 40px 80px; */     /* 2个值: 上下 左右 */     /* padding: 10px 40px; */   margin: 0 auto;     /* 用法同padding */     /* auto——版心居中 */ }    </style></head><body>    <div>文字内容</div></body></html>

4.1 border或padding会撑大盒子

  • 手动内减： 自己计算多余大小，手动在内容中减去；计算量大，很麻烦
  • 自动内减： 给盒子设置属性box-sizing:border-box；浏览器会自动计算多于大小，自动在内容中减去

4.2 清楚默认内外边距

  • 场景： body标签默认margin:8px；p标签默认有上下的margin；ul标签默认有上下的margin和padding-left…
  • 解决方法:
<style>* {margin: 0;    padding: 0;    }</style>

4.3 外边距折叠现象

合并现象

  • 场景： 垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值
  • 解决方法： 避免就好，只给其中一个盒子设置margin即可（若两个都设置了，自动取最大值）

塌陷现象

  • 场景： 互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动
  • 解决方法：
    1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
    2. 给父元素设置overflow：hidden
    3. 转换成行内块元素
    4. 设置浮动

4.4 行内元素的内外边距问题

如果想要通过margin或padding改变行内标签的垂直位置，无法生效；可以通过行高line-height来解决

网络标签：

相关问题