Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础：框模型（盒模型）
Blogger Information
Blog 119
fans 3
comment 1
visits 94538
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基础：框模型（盒模型）
赵大叔
Original
921 people have browsed it

代码演示效果链接：

一、框模型（盒模型）相关知识

1、框模型（盒模型）五要素：width,height,padding,border, margin

2、padding、margin属性简写：padding/margin: 5px 10px 5px——第二个表示左右

3、border属性简写：border-right: 1px solid green—— 宽度 样式 前景色

4、小提示:

  • 轮廓outline: 位于 border 与 margin 之间,因为不占空间, 可暂时忽略
  • 轮廓没有针对各条边的属性,只能统一设置
  • 默认,内容区的背景色会延伸到内边距范围内,内边距是透明的
  • 外边距始终是透明的,可能透过它看到父元素
  • 内边距,边框不允许是负值, 而外边距允许

  • 内边距影响到盒子大小, 而外边距影响到盒子的位置

  • 边框颜色默认与内容区前景色相同,例如文本是黑色, 边框就是黑色

  • 如果边框是虚线,是可以透过边框线的间隙看到内容区元素的背景色

5、 调整元素框的大小

5.1 display属性

  • display: 属性, 默认值inline,适用所有元素, 不能继承
  • display 改变的是显示方式, 并不能改变元素的本质
  • 例如,块级元素不允许做为行内元素后代, 并不会因为它显示为行内块而改变

5.2 块级框

  • 块级框宽度,其实就是内容区宽度,由左内边界到右内边界的距离, 高度也一样
  • 元素内容宽度可以用box-sizing进行调整,默认为内容宽度(content-box)

5.3 box-sizing属性

  • box-sizing: 指示浏览器如何计算一个元素的总宽度和总高度
  • 盒模型中,元素的width/height默认只会应用到”内容区”
  • 当盒子中存在padding/border时,计算盒子总大小非常麻烦
序号 属性值 描述
1 content-box 默认值,width/height只应用到内容区
1 border-box width/height还包括padding,border
  • 即 width 总宽度是不变的, 宽度计算边界在边框上,所以 width=broder+padding+content
  • box-sizing: 适用于所有能设置 width 和 height 的所有元素
  • box-sizing: 通常只适用于块级, 也适合置换元素和行内块元素(因为都可以设置宽高)

6、 横向格式化

涉及七个属性

序号 属性 默认值 描述
1 margin-left auto 左外边距, 正负均可
2 border-left 0 左边框
3 padding-left 0 左内边距
4 width auto 内容区宽度, 必须正值
5 padding-right 0 右内边距
6 border-right 0 右边框
7 margin-right auto 右外边距, 正负均可
  • 这七个属性影响着块级框的横向布局
  • 本个属性相加应该等于父元素容纳块的宽度,而这个宽度就是父元素的 width 值
  • 七个属性中,只有内容区和左右外边距,允许设置auto,其它属性要么 0,要么具体值

7、纵向格式化

与横向格式化一样,也涉及七个属性

序号 属性 默认值 描述
1 margin-top auto 上外边距, 正负均可
2 border-top 0 上边框
3 padding-top 0 上内边距
4 height auto 内容区高度, 必须正值
5 padding-bottom 0 下内边距
6 border-bottom 0 下边框
7 margin-bottom auto 下外边距, 正负均可

二、 auto用法演示

  • 横向格式化时, 左右外边距值为auto时, 由浏览器根据父元素空间自动计算
  • 纵向格式化时, 上下外边距值为auto时, 浏览器会将它强制设置为0
  1. <!-- 横向格式化时`auto`-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>横向格式化时`auto`</title>
  7.     <style>
  8.         div {
  9.             width: 800px;
  10.             background-color: darkgray;
  11.         }
  13.         /*life/right-auto:由浏览器根据父元素空间自动计算*/
  14.         p {
  15.             margin-left: auto; /*左边由浏览器根据父元素空间自动计算*/
  16.             margin-right: 100px;
  17.             width: 200px;
  18.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div>
  25.     <p>更好更快</p>
  26. </div>
  28. </body>
  29. </html>
  31. <!-- 纵向格式化时上下外边距值为`auto`-->
  32. <!DOCTYPE html>
  33. <html lang="en">
  34. <head>
  35.     <meta charset="UTF-8">
  36.     <title>纵向格式化时上下外边距值为`auto`</title>
  37.     <style>
  38.         body {
  39.             width: 400px;
  40.         }
  42.         .one {
  43.             width: 100px;
  44.             height: 80px;
  45.             background-color: green;
  46.         }
  48.         /*纵向格式化时, 上下外边距值为`auto`时, 浏览器会将它强制设置为`0`*/
  49.         .two {
  50.             width: 100px;
  51.             height: 80px;
  52.             background-color: yellow;
  53.             /*margin-top: 10px;*/
  54.             margin-top: auto;
  56.         }
  58.     </style>
  59. </head>
  60. <body>
  61. <div class="one">1</div>
  62. <div class="two">2</div>
  63. </body>
  64. </html>

三、 flex布局知识

1、display: flex;设置容器为弹性容器

2、flex术语

2.1 flex-flow: row wrap;：设置容器水平排列，允许换行; flex-flow: cloum nowrap;：设置容器垂直排列，不允许换行;

2.2 justify-content:设置容器中弹性项目在主轴上的对齐方式：

  • justify-content: flex-start; 默认，左对齐
  • justify-content: flex-end; 右对齐
  • justify-content: center; 居中

分配主轴上剩余空间：

  • justify-content: space-between; 两端对齐
  • justify-content: space-around; 分散对齐
  • justify-content: space-evenly;平均对齐

2.3 align-items:设置项目在交叉轴上的排列方式

  • align-items:flex-start;默认，顶部
  • align-items:flex-end;下到上
  • align-items:center; 居中

2.4 align-content:设置项目在多行容器中在交叉轴上的对齐/排列方式

  • align-content:space-around;分散对齐
  • align-content: space-between;两端对齐
  • align-content: space-evenly;平均对齐

四、总结

本节重点掌握盒模行五要素及其属性的设置。
浮动和定位很少用，简单了解掌握一下。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：浮动在现代布局技术中, 基本上禁用了, 定位还是会用到的.. 相对定位基本上都用在定位父级上, 工作中, 绝对定位用得更多
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post