写代码啦
CSS基础知识
回复数(0) 浏览数(9)
{{topic.upvote_count || 0}} 编辑 回复

在正式复习之前,强推几个不错的学习css的网站:MDN网站,css tricks,张鑫旭博客
好,下面开始正式复习

文档流

流动方向

  1. 内联元素:从左向右流动,同一元素可能占两行
  2. 块元素:从上向下流动
  3. 内联块元素:也是从左向右排列,不过不会一个元素占两行
    ### 宽度
  4. 内联元素:宽度是由元素内容宽度决定的,不能用width设置宽度
  5. 块元素:默认宽度 auto,不是100%;可用width设置宽度
  6. 内联块元素:默认宽度时内容宽度,可用width设置宽度
    ### 溢出
    如果内容宽高大于容器宽高时,溢出
    设置overflow,来对溢出内容进行处理
    overflow可选值
    visible:显示溢出内容
    hidden:隐藏溢出内容
    scroll:内容无论超不超出容器,容器上都有滚动条
    auto:容器会根据内容多少,添加滚动条
    #### 补充:脱离文档流的两种方法
    position:absolute;
    float:left/right;
    (脱离文档流,会使父元素产生高度塌陷)
    ### 盒模型
    主要的两种盒模型:内容盒,边框盒
    盒模型包括四部分:content,padding,border,margin
    如果设置
    css style{ box-sizing:content-box; width:500px;/*这个width就是content的width*/ }
    内容盒 内容盒
    如果设置
    style{ box-sizing:border-box; width:500px;/*这个width是content.width+padding.width+border.width=500px*/ }
    内容盒中设置的宽度就是content的宽度
    边框盒中设置的宽度时content.width+padding.width+border.width的总和
  7. margin
    margin会出现兄弟元素之间的margin合并
    以及父元素与子元素之间的margin会合并
  8. 如何消除margin合并呢?
    消除兄弟元素间的margin合并:设置display:inline-block
    消除父子元素间的margin合并:设置
  9. 给父元素加border
  10. 给父元素加padding
  11. overflow:hidden
  12. display:flex;

### CSS页面布局

  • 布局分类

    • 固定宽度
    • 不固定宽度
    • 响应式布局
      ### float布局
      在子元素中加上float:left
      在父元素中加上class = "clearfix"
      style{
      .clearfix::after{
      content:"";
      display:block;
      clear:both;
      }
      }
      ### flex布局
    • container容器(父元素)
    • display:flex;
    • flex-direction:row/row-reverse/column/column-reverse
    • flex-wrap:wrap(默认)/nowrap/是否换行/
      flex-direction和flex-wrap这两个属性可缩写成flex-flow:flex-direction flex-wrap
    • justify-content(水平方向的位置):flex-start/end/center/space-between/space-around
    • align-items(垂直方向的内容):center/flex-end/stretch/flex-start
    • align-content(垂直方向多行内容):flex-start/flex-end/center/stretch/space-between/space-around
      items 属性

      第一个item元素

      1

      在css中
      style{
      .item:first-child{

      }
      .item:nth-child(n){

      }
      item:last-child{
      order:1;
      }
      }
      order 默认均为0
      如果设置order则按order的大小顺序由大到小排序(可正可负)
      order:1

    • flex-grow:1;(对空间的占有)默认是0

    • flex-shrink:数字;
      数字越大,当空间不足时,缩小越多,默认是1,0表示不变瘦

    • flex-basis:默认auto,功能类似width,优先级比width高
      上述三个flex可缩写成:flex: flex-grow flex-shrink flex-basis
      中间用空格隔开
      align-self:可以单独设置某个item

      总结:

      align-content:决定行与行之间的间隔
      align-items:决定元素整体在容器的什么位置,只有一行时,align-content不起左右

    • vertical-align:只对行内元素,表格单元格生效,内容居中
      可取值:baseline/top/middle/bottom/text-top/sub

      grid布局

      常用属性
      1. grid-template-rows:分几行
      2. grid-template-columns:分几列
      3. grid-row-start:1;(指第一条线)
      4. grid-row-end:4;
      5. grid-column-start:1;
      6. grid-column-end:5;
      上述5.6可以合并成grid-column:1/5;
      上述3.4.5.6可以合并成grid-areas:grid-row-start/grid-column-start/grid-row-end/grid-column-end
      7. grid-gap:12px;
      8. grid-template-areas:可以直接分成几个部分

      本文版权有本人和饥人谷所有

{{topic.upvote_count || 0}}

在正式复习之前,强推几个不错的学习css的网站:MDN网站,css tricks,张鑫旭博客
好,下面开始正式复习

文档流

流动方向

  1. 内联元素:从左向右流动,同一元素可能占两行
  2. 块元素:从上向下流动
  3. 内联块元素:也是从左向右排列,不过不会一个元素占两行
    ### 宽度
  4. 内联元素:宽度是由元素内容宽度决定的,不能用width设置宽度
  5. 块元素:默认宽度 auto,不是100%;可用width设置宽度
  6. 内联块元素:默认宽度时内容宽度,可用width设置宽度
    ### 溢出
    如果内容宽高大于容器宽高时,溢出
    设置overflow,来对溢出内容进行处理
    overflow可选值
    visible:显示溢出内容
    hidden:隐藏溢出内容
    scroll:内容无论超不超出容器,容器上都有滚动条
    auto:容器会根据内容多少,添加滚动条
    #### 补充:脱离文档流的两种方法
    position:absolute;
    float:left/right;
    (脱离文档流,会使父元素产生高度塌陷)
    ### 盒模型
    主要的两种盒模型:内容盒,边框盒
    盒模型包括四部分:content,padding,border,margin
    如果设置
    css style{ box-sizing:content-box; width:500px;/*这个width就是content的width*/ }
    内容盒 内容盒
    如果设置
    style{ box-sizing:border-box; width:500px;/*这个width是content.width+padding.width+border.width=500px*/ }
    内容盒中设置的宽度就是content的宽度
    边框盒中设置的宽度时content.width+padding.width+border.width的总和
  7. margin
    margin会出现兄弟元素之间的margin合并
    以及父元素与子元素之间的margin会合并
  8. 如何消除margin合并呢?
    消除兄弟元素间的margin合并:设置display:inline-block
    消除父子元素间的margin合并:设置
  9. 给父元素加border
  10. 给父元素加padding
  11. overflow:hidden
  12. display:flex;

### CSS页面布局

9
回复 编辑

热门主题