Loading

2,CSS

CSS盒子模型

  • IE盒模型 border-box

    width和height是盒子最终的尺寸(添加box-sizing:border-box )
  • 标准盒模型 content-box
    width和height只是内容的尺寸(默认)
width  height  background-color  border  padding margin  (box-sizing)

CSS布局实践

display

定义了元素生成的显示框类型，常见属性值有：block、inline、inline-block、inherit、none、flex.

  • div标签默认的display属性是block，通常称为块级元素
    • 常见的块级元素<div>、<h1>~<h6>、<p>、<ul>、dl、<table>、<address>、<form>等)
  • span标签默认的display属性是inline,称为行内元素
    • 设置宽高不会起作用( margin 和 padding 的值都只对左右起作用)
    • 不可以包含块级元素，只能包含行内元素和文本
    • 常见的行内元素有：<a>、<b>、<label>、<span>、<img>、<em>、<strong>、<i>、<input>等
    • <img>标签设置宽高可以影像图片大小，这是因为 img 是可替代元素 ??
  • inline-block 即具有块级元素可以设置宽高的特性，又具有行内元素不换行的特性，但元素间会有间隙，消除看这个.
  • inherit表示从父元素继承display属性
  • none表示这个元素不显示，也不占用空间位置
  • flex布局(弹性布局)
    • Flex布局中的元素具有可伸缩性
    • 通过设置父元素的 display 属性为display: flex | inline-flex;,其子元素便有了伸缩性.
position

用来定义元素的定位机制。常用的属性值有：

  • relative：相对定位，相对于元素的正常位置进行定位；
    • 不添加额外属性( left , right , top , bottom 等),它表现的如同 static 一样
    • 添加额外属性会使元素偏离正常位置，并且可能覆盖相邻元素
  • absolute：绝对定位，相对于除 static定位以外的父级/祖先元素进行定位；
    • 如果祖先元素都没有设置定位属性，absolute 会找到最上层即浏览器窗口进行定位
  • fixed：固定定位，相对于浏览器窗口进行定位，网站中的固定 header 和 footer 就是用固定定位来实现的；
    • 页面广告应该就是这样的吧
  • static：默认值，没有定位属性，元素正常出现在文档流中；
  • inherit：继承父元素的 position 属性值。
float

float 属性定义元素在哪个方向浮动。

  • 常用属性值有left、right,即向左浮动和向右浮动。
  • "高度塌陷":子元素溢出到父元素外
    • 不设置float属性，不给父元素设置宽高时， 父元素的宽高会被子元素的内容撑开(如果给父元素设置了宽高，并且宽高小于子元素时也会有 高度塌陷)
    • 设置float属性时，不给父元素设置宽高，父元素不会被子元素撑开，称之为"高度塌陷"
img
　　　　　　　　(浮动的子元素不能撑开父元素)
[!清除浮动的方法](https://www.yuque.com/fe9/basic/ecdg1z)

经典布局示例

　　大多网站会将页面分为几部分：header (头部)、footer (尾部)
、nav (侧边栏) 、section (核心内容部分)

  • 两栏布局

    • 基础代码
    <head>
    <style type="text/css">
          .left{
              width:100px;
              height: 150px;
              background-color:#FFB5BF;
          }
          .right{
              height:150px;
              background-color: #94E8FF;
          }
      </style>
  </head>
  <body>
      <div class="container">
          <div class="left">left</div>
          <div class="right">right</div>
      </div>
  </body>
    效果图 - 设置 display 为 inline-block - container.font-size->0 消除间距 - right.width-> calc计算宽度 - 使用float -1 - left.float->left - right.margin-left->100px ,为左侧留空间 - container.overflow->hidden - 使用浮动 -2(.right形成BFC？) - left.float->left - right.overflow->auto 形成BFC - container.overflow->hidden - 使用absolute - container.position->relativea - left.position->absolute - right.margin-left->100px 为左侧留空间

  • 三栏布局

    • 圣杯布局 
      <head>
  <style type="text/css">
        body{
            min-width:630px;  /* 保证窗口缩小时仍能展示 */
        }
        .center{
            width:100%;
            height:150px;
            background-color: #94E8FF;
        }
        .left{
            width:100px;
            height: 150px;
            background-color:#FFB5BF;
        }
        .right{
            height:150px;
            width:200px;
            background-color: #8990D5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
    效果图 ###### 思想：使用浮动布局，用 padding 为左右元素留空间，灵活使用 margin 的负值和相对定位上元素移动到相应的位置。 - 三栏添加左浮动 - 移动 margin-left，但会覆盖 center - container 预留位置 padding-left/right - left 、right 相对移动 - 双飞翼布局 - 多加了 div：container-center ，没有padding
Flex布局
基本概念图 上图便是一个 Flex布局的大致架构了，图中的囊括概念有几点： - Flex 布局是一整个模块，其中父元素称为 flex container，意为容器；子元素称为 flex item，意为项目； - Flex 布局中有两条看不见的轴线：主轴（main axis）和交叉轴（cross axis）。默认的主轴是平行的，交叉轴是垂直于主轴的； - 主轴的开始位置叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end； - 子元素在主轴方向上的大小称为 main size，在交叉轴方向上的大小称为 cross size。
容器属性 ( content )

定义为Flex布局的容器 display: flex | inline-flex
容器属性：

  • flex-direction 方向
    • row (主轴，水平，起点在左侧)
    • row-reverse
    • column
    • column-reverse
  • flex-wrap 换行
    • nowrap (不换行)
    • wrap
    • wrap-reverse
  • flex-flow (flex-direction 和 flex-wrap)
    • row no-wrap
  • justify-content 项目在主轴上的对齐方式
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
  • align-items 项目在交叉轴上的对齐方式
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch
  • align-content 多行时垂直方向的对齐方式
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch
项目属性( item )
  • order
    • 排列顺序，defailt: 0
  • flex-grow
    • 存在空间剩余时，放大比例，default: 0
    • 所有项目为1时，平分剩余空间
  • flex-shrink
    • 空间不足时，缩小比例，set 1:等比缩小，set 0 :不缩小
  • flex-basis
    • default: auto
      -分配空间
  • flex
    • flex-grow、flex-shrink、flex-basis 默认值时 0 1 auto
    • 还有两个快捷值 auto(1 1 auto )和 none （0 0 auto )
  • align-self
    • 定义单个项目与其他项目不一样的对齐方式，可以覆盖 align-items
    • default : auto (继承父元素的align-items属性值，无父元素时等同 stretch)
简单实例 - 三栏布局

flex-grow: 1 　　　　ｓ order=-1

推荐阅读：Flex 布局教程：实例篇。

Flex 浏览器兼容性问题
posted @ 2025-03-12 22:29  一起滚月球  阅读(13)  评论(0)    收藏  举报