理解css|青训营笔记

小熊猫1
95 阅读8分钟

这是我参与「第四届青训营」笔记创作活动的的第2天

css盒模型

image.png css盒模型本质上是一个盒子，用来封装周围的html元素，它包括外边距（margin）、边框（border）、内边距（padding）和实际内容（content）。

内容content

css通过为元素设计width和height属性值来规定元素的content的内容区域大小。

width宽度

  • 取值为长度、百分数和auto
  • auto默认值，浏览器可计算出实际宽度
  • 长度px，如100px
  • 百分数相对于容器的content box宽度

height高度

  • 取值为长度、百分数和auto
  • auto取值由内容计算得出
  • 长度同宽度
  • 百分数相对于容器的content box高度（容器有指定高度时，百分数才生效）

边框border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色

border-width边框宽度

  • 作用

    • 设置所有边框长度，或者单独地为各边边框设置长度

  • 取值

    • 长度值
    • 不允许指定负长度值。

  • 语法

    • 空格隔开1-4个值

      • 1个值 设置所有边框宽度
      • 2个值 设置上下、左右
      • 3个值 设置上、左右、下
      • 4个值 设置上、右、下、左

    • 代码示例

      border-width:10px; border-width:10px 20px

border-style边框样式

  • 作用

    • 设置标签所有边框的样式，或者单独地为各边设置边框样式。

  • 取值

    • none 定义无边框
    • dotted 定义点状边框
    • dashed 定义虚线
    • solid 定义实线
    • double 定义双线 双线的宽度等于 border-width 的值

  • 语法

    • 空格隔开 1-4个值

      • 1个值 设置所有边框
      • 2个值 设置上下、左右
      • 3个值 设置上、左右、下
      • 4个值 设置上、右、下、左

    • 示例

      • border-style:solid;
      • border-width:solid dashed

  • 注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0

border-color 边框颜色

  • 作用：设置所有边框颜色，或者单独地为各边边框设置颜色

  • 取值

    • name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000"

  • 语法

    • 示例

      • border-color:red;
      • border-width:red blue;

    • 1-4个值 空格隔开

      • 1个值 设置所有边框
      • 2个值 设置上下、左右
      • 3个值 设置上、左右、下
      • 4个值 设置上、右、下、左

简写

定义四个边
  • 语法：border: 宽度 样式 颜色 空格隔开
  • border: 1px solid pink;
单个方向定义
  • 说明： 每个边框都可以设置样式宽度颜色 border-方向：宽度 样式 颜色 空格隔开
拆分语法

border-方向-width: border-方向-color border-方向-style

注意:边框会影响盒子实际大小，样式、宽度、颜色无书写顺序要求

内边距 padding

定义元素边框与标签内容之间的空间。 padding 可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

单个方向设置
  • padding-bottom 设置标签的下内边距。
  • padding-left 设置标签的左内边距。
  • padding-right 设置标签的右内边距。
  • padding-top 设置标签的上内边距。

（强调：padding会影响盒子的实际大小）

  • 取值

    • 先讲px,
    • 不可使用负值，
简写
  • 语法：padding空格隔开1-4个值
  • 规则：1个值：表示【四个方向】的内边距值 2个值：分别表示【上下，左右】的内边距值 3个值：分别表示【上，左右，下】的内边距值 4个值：分别表示【上，右，下、左】的内边距值

外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

单个方向定义

  • margin-bottom 设置标签的下内边距
  • margin-left 设置标签的左内边距
  • margin-right 设置标签的右内边距
  • margin-top 设置标签的上内边距

简写

  • 语法：空格隔开

  • 取值1-4个规则

  • 取值

    • px,
    • auto浏览器自动计算
    • 允许使用负值

  • 外边距应用

    • 外边距实现已知宽度的块级盒子居中(margin:auto)

image.png

外边距问题

  1. 嵌套块元素的垂直外边距塌陷(父子元素公用一个外边距)

  • 问题描述 ：当父元素没有padding,margin,border时,子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值

  • 解决方法

    • 给父元素设置边框或内边距（慎用）
    • 父元素overflow:hidden,改变渲染规则
  1. 相邻元素垂直外边距合并(两个外边距合并成一个)

  • 问题描述 ：当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值

  • 解决方法

    • 尽量只定义其中一个的margin值
    • 给其中一个盒子加父元素overflow:hidden,改变渲染规则

清除浮动的方法

  • 父元素固定高度法

    • 描述：给浮动元素的父元素固定高度
    • 缺点：不够灵活

  • 父元素overflow方法

    • 描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现
    • overflow:hidden/scroll/auto 触发BFC盒子的形成
    • 缺点：可能会隐藏内容或触发不需要的滚动条

  • 额外标签法

    • 描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both;
    • clear属性说明
      • 作用：清除浮动
      • 取值
        • left both right
        • 通常使用both, ==清除浮动影响的是只能块类型！！==
    • 缺点：代码冗余，影响代码可读性

  • 伪元素:after

    • 描述：给浮动标签的父标签添加 
      .clearfix:after{
     content:"";
     display:block;
     clear:both;
}
    • 优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用

定位的实现

使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置

定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位

边偏移定位元素的位置，使用“top”、“right”、“bottom”和“left”来描述。通常水平位置通过left或right控制，垂直位置通过top或bottom控制

  • 位置属性

    left：设置距离包含块左侧的距离 right：设置距离包含块右侧的距离 top：设置距离包含块顶部的距离 bottom：设置距离包含块底部的距离

  • 取值

    • 长度值：px/em等
    • 百分比：相对于包含块计算
    • auto 默认值
    • 允许使用负值

定位

postion:relative相对定位

相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。 它原本所占的空间不会改变。

基础特性

  • 不脱离文档流
  • 提升元素层级
  • 不定义偏移量时对元素基本没有影响

应用场景

通常作为定位父级配合绝对定位使用

postion:absolute绝对定位

没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位

基础特性

  • 脱离文档流
  • 提升元素层级

应用场景：

通常配合绝对定位使用（父相子绝）结合实际案例，如焦点图中的分页，翻页，视频网站中的 vip标签等

postion:fixed 固定定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

基础特性总结

  • 脱离文档流
  • 提升元素层级

应用场景：

相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏

postion:static静态定位

表示将元素放在文档布局流的默认位置，HTML元素的默认值，即没有定位，遵循正常的文档流对象。

  • 常用于重置 定位属性
  • 静态定位的元素不会受到 top, bottom, left, right影响。

定位特性的总结

定位类型是否脱离标准是否发生位置变化参考对象是否适合布局
staticnono没有不适合
relativeno(保留原来位置)yes自身初始位置不适合(1.微调2.辅助绝对定位)
absoluteyesyes初始是body,子决父相适合（压盖，anywhere）
fixedyesyes浏览器可视窗口适合（不随滚动条滚动的布局）

总结

本篇内容介绍了css盒子的一些知识,弹性盒和网格布局的属性就不一一说明啦

avatar
文章
阅读
粉丝