css_18_盒子模型

一.盒子模型的组成

CSS 会把所有的 HTML 元素都看成一个盒子,所有的样式也都是基于这个盒子。

  • margin(外边距):盒子与外界的距离。
  • border(边框):盒子的边框。
  • border(边框):盒子的边框。
  • content(内容):元素中的文本或后代元素都是它的内容。
  • 注意:盒子的大小= content + 左右 padding + 左右 border。
    外边距 margin 不会影响盒子的大小,但会影响盒子的位置。

二.盒子的内容区

  • width :设置内容区域宽度
  • max-width :设置内容区域的最大宽度
  • min-width :设置内容区域的最小宽度
  • height :设置内容区域的高度
  • max-height :设置内容区域的最大高度
  • min-height :设置内容区域的最小高度

注意:

may-width、min-width 一般不与 width 一起使用。

max-height、 min-height 一般不与 height一起使用。

三.盒子的内边距

  • padding-top:上内边距

  • padding-right:右内边距

  • padding-bottom:下内边距

  • padding-left:左内边距

  • padding:复合属性

padding复合属性的使用规则:

  • padding: 10px;四个方向内边距都是 10px。
  • padding: 10px 20px; 上10px,左右20px 。
  • padding: 10px 20px 30px;上10px,左右20px,下30px。
  • padding: 10px 20px 30px 40px;(上、右、下、左)
  • 注意点:padding 的值不能为负数。

四.盒子的边框

复合属性:

  • border-style:边框线风格

solid:实线

dashed:虚线

dotted:点线

double:双实线

  • border-width:边框线宽度
  • border-color:边框线颜色
  • border:复合属性

各个方向:

  • border-left

border-left-style border-left-with border-left-color

  • border-right

border-right-style border-right-width border-right-color

  • border-left

border-left-style border-left-width border-left-color

  • border-right

border-right-style border-right-width border-right-color

  • border-top

border-top-style border-top-width border-top-color

  • border-bottom

border-bottom-style border-bottom-width border-bottom-color

五.盒子外边距

  • margin-left:左外边距
  • margin-right:右外边距
  • margin-top:上外边距
  • margin-bottom:下外边距
  • margin:复合属性
  • 注意:

1.子元素的 margin,是参考父元素的content计算的。(因为是父亲的content中承装着子元素)

2.上margin、左margin:影响自己的位置;下 margin、右margin:影响后面兄弟元素的位置。

3.块级元素、行内块元素,均可以完美地设置四个方向的 margin;但行内元素,左右margin可以完美设置,上下 margin 设置无效。

4.margin的值也可以是 auto,如果给一个块级元素设置左右 margin都为 auto,该块级元素会在父元素中水平居中。

5.margin的值可以是负值。

margin 塌陷问题

  • 方案一:给父元素设置不为0的padding。
  • 方案二:给父元素设置宽度不为0的border。
  • 方案三:给父元素设置css样式 overflow:hidden

margin合并问题

  • 方案:布局的时候上下的兄弟元素,只给一个设置上下外边距。
相关推荐
fruge3 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia12 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫13 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年32 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_33 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891135 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾36 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu39 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym43 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫44 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js