css布局

嗨慢走
104 阅读5分钟

布局是什么？

把页面分成一块一块的，按左中右，上中下排列

布局的分类

  • 两种

     固定宽度布局，一般宽度为960/1000/1024px
 不固定宽度，主要靠文档流的原理来布局

  • 本身的

     文档流本身就是自适应的，不需要加额外的样式

  • 第三种布局

     响应式布局
 意思就是pc上固定宽度，手机上不固定宽度
 也就是一种混合布局

布局的两种思路

  • 从大到小

     先地下大局
 然后完成每一个小布局

  • 从小到大

     先完成小布局
 然后组合而成大布局

布局需要用到哪些属性

1640613586819(1).png

float布局

  • 步骤

     子元素上加float:left和width
 父元素是哪个加.charfix
 .charfix的写法
 .charfix:after {
     content: "";
     diaplay: block;
     clear: both;
 }
 img的下空隙问题用 vertical-align: middle;
 注意，必要的时候可以用margin 负数解决

  • 经验

     有经验者会留一些空间或者最后一个不设width
 不逊要响应式，因为手机上没有ie，这个布局是专门为ie准备的
 ie6/7存在双倍margin bug 解决方法有两种如下
 一将错就错，针对ie6/7把margin减半
 二神来一笔，加一个display；inline-block

实践

  • 不同的布局

     用float做两栏布局(如顶部条)
 用float做三栏布局（如内容区）
 用float做四栏布局（如导航）
 用float做平局布局（如产品展示区）

  • 经验

     加上头尾，即可满足所有pc压面要求
 手机页面不用float布局
 float要要程序员自己是只宽度，不够灵活
 float用来应付ie足以

flex布局

  • 父元素设置为容器

1640615383845(1).png

  • 让一个元素变成容器
 .container {
     diaplsy: flex;/* inline-flex */
 }
  • 改变items流动方向（主轴）

1640615763539(1).png

 .container {
     flex-direction: row | row-reverse | column | column-reverse
 }
  • 转变这行

1640616120679.png

 .container {
    flex-wrap:nowrap | wrap | wrap-reverse
 }
  • 主轴对齐方向
 .container {
    justify-content:flex-start | flex-end | center |space-between | space-around | space-evenly
 }

1640616578037.png

  • 次轴对齐（默认次轴是纵轴）
 .container {
   align-items: stretch | flex-start | flex-end | center |baseline
 }

1640616962902.png

  • 多行内容
 .container {
   align-content: flex-start | flex-end | center | stretch | space-between | space-around
 }

1640617747701.png

flex items有哪些属性

 order；属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
 flex-grow；属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
 flex-shrink；属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
 flex-basis；属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
 flex；属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
 align-self；属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  • order属性

     .item {
   order: <integer>;
 }

1640618857715.png

  • flex-grow属性

     ​
 .item {
   flex-grow: <number>; /* default 0 */
 }
 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

1640618996072.png

  • align-self 属性

     .item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
 }

1640619158202.png

重点

 记住这些代码就够用了
 display: flex
 flex-direction: row | column
 flex-wrap: wrap
 justify-content: center | space-between
 align-mtems: center
 这些工作中就够用了

grid布局

  • 概述：网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了

  • 设置容器

     .content {
     display: grid; 父元素设置为容器
 }

  • 设置网格

     .comtent {
     grid-tmplate-columns: 40px 50培训 auto 40px 50px; 设置列数好宽度
     grid-template-rows：20% 100px auto; 设置行数河宽度
 }

1640701407489.png

 简写创建一个两行两列的网格
 .comtent {
     grid-tmplate；1fr 50px / 20% 80% ;
 }
  • 项目itmes的属性
 设置行列的范围
 .times{
     grid-column-start；2;开始位置
     grid-column-end；2;结束位置
     grid-row-start；2;
     grid-row-end；2;
 }
 若仅使用grid-column-start，网格默认只占一列。然而，你可以使用grid-column-end属性将网格拓展到多列。
 相反的方向 可以设置grid-column-start和grid-column-end为值。
 移动。使用span关键字指定 ，span值为正值。
 grid-column：start/end是grid-column-start和grid-column-end两个属性一个缩写形式，要用'/'分开就好。例子grid-column: 2 / 4
 比如说：;就会设置网格项从第二列开始，到第四列结束。
 grid-row：start end 是grid-row-start和grid-row-end两个属性的缩写形式
 grid-area属性是grid-column和grid-row的简写。接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。举个例子如下所示：grid-area: 1/1/3/6;。
 order属性来重写的顺序默认值为0
  • 单位
 grid-template-columns不仅仅只接受百分比的值，也接受像像素或em这样的长度单位。你甚至可以将不同的长度单位混合使用。
 网格系统也引入了一个新的单位，分数fr。每一个fr单元分配一个可用的空间。比如说，如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。

\

avatar
文章
阅读
粉丝