[ CSS补档叁 | 青训营笔记]

Phoenix_chaser
91 阅读2分钟

这是我参加「第五届青训营」伴学笔记创作活动的第6天

height

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

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

ps:（设置顺序为上右下左）\color{blue}ps:（设置顺序为上右下左）

bjjjh.png

border

样式

  • dotted(点线)
  • solid（实线）
  • none（无）
  • dashed（虚线）

粗细

颜色

bjjjjjjjjh.png feature：四个边框颜色不一样时会相切\color{pink}feature：四个边框颜色不一样时会相切

blue：可以把宽度和高度都设为0来产生三角形\color{blue}blue：可以把宽度和高度都设为0来产生三角形

可以这样设置，将内容width,height设为0,然后四个边框不同颜色

bzj.png

然后再调成透明

bjz2.png

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度，百分数，auto
  • 百分数相对于容器宽度

居中操作

bzj3.png

margin collapse

边距合并（取两者中较大的边距）

border-box

bijiiz.png 效果对比如下\color{red}效果对比如下

1.png

  • border-box会让盒子占满整个页面
  • content-box会让内容占满整个页面

overflow(控制溢出的文字)

  • visble(默认，全可视)
  • hidden（隐藏）
  • scorll（滚动）

盒模型布局规则

块级

  • Block Level Box
  • 不和其它盒子并列摆放
  • 适用所有的盒模型属性

行级

  • Lnline Level Box
  • 和其它行级盒子一起放在一行或拆开成多行
  • 盒模型中的width,height不适用

块级元素

  • 生成块级盒子\color{red}生成块级盒子
  • body,article,div,main,section,h1-6,p,ul,li
  • display:block

行级元素

  • 生成块级盒子\color{blue}生成块级盒子
  • 内容分散在多个行盒（line box）中
  • span,em,strong,cite,code等
  • display:inline

display属性

  • block
  • inline
  • inline-block:本身是行级，可以放在行盒里，可以设置宽高，作为一个整体不会被拆散成多行
  • none：排版时完全被忽略

Normal Flow

2.png

行级排版上下文

  • Inline Formatting Context(IFC)
  • 只包含行级盒子的容器会创建一个IFC

IFC内的排版规则：

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素*
avatar
文章
阅读
粉丝