css盒模型

css盒模型

一、盒子组成

1.1margin

外边距重叠：2个盒子挨在一块，我们为2个盒子都加外边距时，默认情况上下外边距是不会叠加的, 会出现合并现象, 谁的外边距⽐较⼤就听谁的，⽔平⽅向上的外边距会叠加

子元素和父元素上边框重合：

1.给父元素加顶部边框或者内边距

2.overflow: hidden;父元素有了一个独立空间(BFC)

1.2border

当元素有了宽高后，在元素边缘产生边框

注意：默认情况下，边框是为影响盒子的大小！

1.3padding

盒子的边框和内容的边框之间的距离

注意：padding通常会影响盒子大小

二、盒子类型

2.1默认盒子模型w3c盒子

使⽤box-sizing属性可以改变盒⼦模型，取值“content-box”的盒⼦为默认盒⼦模型。

width 属性仅表示盒⼦内容所占的宽度

height 属性仅表示盒⼦内容所占的⾼度

2.2边框盒子IE盒子模型

盒子宽度=设置宽度，如果有内边距和边框都会被设置到宽度以内

2.3可以相互转换

box-sizing属性可以改变盒子模型：content-box，border-box

三、盒子背景样式

3.1background-color

专⻔⽤来设置标签的背景颜⾊的 取值: 具体单词 rgb rgba ⼗六进制

3.2backgroud-image

专⻔⽤于设置背景图⽚的 快捷键: bi background-image: url();

注意点: 1.图⽚的地址必须放在url()中, 图⽚的地址可以是本地的地址, 也可以是⽹络的地址 2.如果图⽚的⼤⼩没有标

签的⼤⼩⼤, 那么会⾃动在⽔平和垂直⽅向平铺来填充 3.如果⽹⻚上出现了图⽚, 那么浏览器会再次发送请求获取图

⽚

3.3background-repeat

专⻔⽤于控制背景图⽚的平铺⽅式的

取值: repeat 默认, 在⽔平和垂直都需要平铺 no-repeat 在⽔平和垂直都不需要平铺 repeat-x 只在⽔平⽅向平铺

repeat-y 只在垂直⽅向平铺

3.4background-position

专⻔⽤于控制背景图⽚的位置 格式: background-position: ⽔平⽅向 垂直⽅向;

取值 具体的⽅位名词

⽔平⽅向: left center right 垂直⽅向: top center bottom

background：速写

四、css布局

4.1标准文档流

块元素，内联元素，在有些属性的干扰下，元素可能会脱离文档流

4.1.1标准流排版

在默认情况下，网页元素的排列方式

4.1.2浮动流排版

浮动流只有⼀种排版方式, 就是水平排版. 它只能设置某个元素左对齐

或者右对齐

仅有两种方式：左浮动、右浮动

有浮起来的效果，脱离文档流，会影响下方不浮动的元素

浮动元素不会挡住没有浮动元素中的⽂字, 没有浮动的⽂字会⾃动给浮动的元素让位置,这个就是浮动元素字围现象

4.1.2.1清除浮动

• ps：伪元素方式最优

• #content::after{
              content: '';
              display: block;
              clear: both;
          }
  

• 清除浮动预设：
  清除浮动的元素必须是一个块级元素

• .c{
          clear: both;/*清除浮动*/
      }
      <div class="c"></div>
  

• 父元素有高度

4.1.2.2高度塌陷

当为⼦元素设置浮动以后，⼦元素会完全脱离⽂档流，此时将会导致⼦元素⽆法撑起⽗元素的⾼度

解决方法：1.清除浮动、

	    2.父元素设置高度

4.2定位（position）

1.静态定位：

Static：是所有元素的默认定位方式

2.相对定位：

Relative：相对定位就是相对于⾃⼰以前在标准流中的位置来移动，移动时，原来的位置还是占有的

3.绝对定位：

Absolute：当元素拥有绝对定位后，如果移动元素那么这个元素会脱离文档流

注意：在设置完绝对定位后，先观察父元素是否有定位，它会一级一级的往外去寻找，到body为止，父相对子绝对

4.固定定位：

fixed：使用方式与绝对定位基本一致

	元素可以跟随滚动条移动

5.粘滞定位：

sticky：不脱离文档流，可以吸附在某个元素上，滚动条移动时，父元素如果不消失，会一直显示，直到父元素消失为止

6.z-index：默认情况下都为0，我们可以通过设置z-index去控制元素的上下显示顺序

五、flex布局（弹性布局）

flex属性：

5.1容器属性

1.flex-direction

value：1.row：默认

      2.row-reverse：与row顺序相反

      3.column：纵轴排列

      4.column：与column顺序相反

2.flex-wrap：

value：1.nowrap：默认

      2.wrap：换行

      3.wrap-reverse：换行顺序相反

3.flex-flow：

flex-direction和flex-wrap的复合属性

4.justify-content：

value：1.flex-start：默认

      2.flex-end：右对齐

      3.center：居中

      4.space-between：顶格均分

      5.space-around：左右小中间大均分

      6.sapce-evenly：均分

5.align-items：

value：1.stretch：默认

      2.flex-start：顶部

      3.flex-end：底部

      4.center：居中

      5.baseline：文字基线

6.align-content（多行项目有效）：

value：1.flex-start：靠上

      2.flex-end：靠下

      3.center：居中

      4.sapce-between：定格均分

      5.space-around：上下中间大均分

      6.space-evently：均分

      7.strecth：默认

5.2元素属性

1.order：排序

2.flex-grow：空间剩余时放大比

3.flex-shrink：空间不够时缩小比

4.flex-basis：最小宽度

速写：flex

5.align-self（为单独一个元素设置纵轴排列方式）：

value：1.auto：默认

      2.flex-start：靠上

      3.flex-end：靠下

      4.center：居中

      5.strecth：默认

      6.stretch：拉伸