[ CSS入门（三） | 青训营笔记（4）]

嘟嘟可er
82 阅读5分钟

默认盒模型 Snipaste_2023-01-25_22-27-02.png

width和height是content的宽和高，不含padding和border、margin(所以如果两个元素的宽度分别为70%和30%,则这两个元素实际占据的宽度超过了100%,不能并排显示，只能折行显示)

盒模型中的行级和块级

块级行级
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用

盒子是CSS中的概念，元素是html里的概念

块级元素行级元素
生成块级盒子生成行级盒子；内容分散在多个行盒(line box)中
body article div main section h1-6 p ul li 等span em strong cite code等
display:blockdisplay:inline

display属性

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

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内(in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align 决定一行内盒子的对齐水平
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素
  <div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div> 
/* div内是行级排版上下文*/
/*在Honorificabilitudinitatibus前换行*/
/* Inline /n box */

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;  /*一般不会在一个单词内换行，除非把overflow-wrap设置成break-word*/
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

块级排版上下文
  • Block Formatting Context(BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root;

BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC内盒子的 margin 不会与外面的合并
  • BFC不会和浮动元素重叠
<span>
  This is a text and 
  <div>block</div>
  and other text.
</span> /*spa标签内的内容以行为单位进行排版*/

<style>
  span {
    line-height: 3;
    border: 2px solid red; /*第一行没有右边框，第二行没有左边框*/
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

块级从上到下排，行级从左到右排

Flex 排版上下文

Flexbox: 一种新的排版上下文 可以控制子级盒子的

  • 摆放的流向（→ ← ↑ ↓）
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
    /*abc是块级元素，但在这段代码中从左到右摆放*/
  /*块级元素通常按宽度百分百放置，但这段代码中宽度没有100%*/
  .container {
    display: flex; /*container创建了一个flex布局的上下文*/
    /*子元素的行为受flex相关属性的控制*/
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

创建弹性容器

  • 给元素添加display：flex 使该元素变成了一个弹性容器(flex container),它的直接子元素变成了弹性元素(flex item),弹性子元素默认在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样可以填满可用宽度，但弹性子元素不一定填满其弹性容器的宽度

flex_container.png

  • display:inline-flex
与摆放方向有关的术语

  • Flex direction: row(→)，row-reverse(←)，column(↓)，column-reverse(↑)

  • 主轴：元素摆放的方向 侧轴：与元素摆放的方向垂直的方向

  • 主轴上用justify-content对齐

    • flex-start:左对齐，左边无空白
    • flex-end：右对齐，右边无空白
    • center: 居中,最左和最右有空白
    • space-between：居中,最左和最右无空白
    • space-around：最左端和最右端空白较少
    • space-evenly：最左、最右和块级元素之间空白一样大

  • 侧轴上用align-items对齐

    • flex-start：从容器顶端开始
    • flex-end: 从容器底端开始
    • center：从容器中间高度开始
    • stretch: 默认值，所有元素的高度和容器一样
    • baseline：基线对齐，所有子元素(text)按基线对齐

  • 对单独某个特定元素调整对齐方式 align-self

    • flex-start
    • flex-end

  • 通过order值从小到大的顺序从左到右或从上向下摆放元素

弹性 Flexibility

可以设置子项的弹性：当容器有剩余空间时会伸展，容器空间不够时会收缩

  • flex-grow：有剩余空间时的伸展能力
  • flex-shrink: 容器空间不足时收缩的能力
  • flex-basis：没有伸展或收缩时的基础长度

flex-grow有关示例

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2; /*a的弹性比b强*/  }

  .b {
    flex-grow: 1;
  } /*屏幕显示宽度-3x100,空余的空间按2:1分别分配给a和b*/
</style>

flex-shrink有关示例

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 400px;
  }

  .a {
    flex-shrink: 0;/*a元素不压缩*/
  }
</style>

a没被压缩 b和c都被压缩了

flex-grow flex-shrink等属性都可以缩写为flex 如下

Grid 排版上下文（网格布局）

flex是单一方向的布局方式 grid是“二维"的布局方式

display:grid

  • display:gird 使元素生成一个块级的Grid容器
  • 使用grid-template相关属性将容器划分为网络
  • 设置每一个子项占哪些行/列(可以占多个行和列)

关于图片和文字的布局方式：float 浮动

这种布局方式主要用来处理有关文字环绕图片方式的排版

<section>
  <img src="https://p4.ssl.qhimg.com/t017aec0e7edc961740.jpg" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left; /*使图片浮于左边,文字会绕开图片进行排列*/
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

脱离常规文档流进行绝对定位

position属性

  • static: 默认值，非定位元素
  • relative: 相对自身原本位置偏移，不脱离文档流
  • absolute: 绝对定位，相对非static 祖先元素定位
  • fixed: 相对于视口绝对定位
position:relative
  • 在常规流里布局
  • 紫色方块相对于自己原来的位置进行偏移，使用top\left\bottom\right设置偏移长度
  • 流内其他元素(蓝色方块)照常布局
positon:absolute
  • 脱离常规流
  • 相对于最近的非static祖先定位(只要不是relative的祖先就行 )
  • 不会对流内元素布局造成影响 
<h1>页面标题</h1>
<div class="container">
  <div class="box"></div>
  <p>段落内容段落内容 1</p>
  <p>段落内容段落内容 2</p>
  <p>段落内容段落内容 3</p>
  <p>段落内容段落内容 4</p>
</div>

<style>
  .container {
    background: lightblue;
  }

  .box { /*相对于根元素进行定位*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>

position:fixed
  • 脱离常规流
  • absolute找最近的父集非static元素进行定位，fix相对于窗口进行定位

随着页面的滚动，导航栏的宽度不变，因为被fixed了

avatar
文章
阅读
粉丝