CSS布局+定位

随风而却
157 阅读7分钟

布局分类

两种

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

第三种

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

布局思路

从大到小

先定下大局，然后完善每个部分的小布局

从小到大

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

两种均可

新人推荐用第二种，因为小的简单

老手一般用第一种，因为熟练有大局观

float布局

步骤

子元素上加 float：left 和 width

在父元素上加.clearfix

.clearfix:after { content: ''; display: block; clear: both; }

因为使用了float 不是文档流了，使用.clearfix让他变回文档流格式

经验

有经验者会留一些空间或者最后一个不设width

不需要做响应式，因为手机上没有IE，而这个布局是专门为IE准备的

IE6/7存在双倍 margin bug，解决办法有两个

一是将错就错，针对IE6/7把margin 减半

二是神来一笔，再加一个displat：inline-block

为什么可以这样？你问我，我问谁

重点

float 应付IE足以

使用float 需要自己计算宽度，不灵活

有时候border会干扰你的宽度，他会干扰你2像素，那么你就使用outline

使用margin: 0 auto的话，如果你在外面使用了margin-top:10px，那么会不生效

使用 margin-left: auto; margin-right: auto; 进行左右居中，不会覆盖掉margin-top

如果你是一个块级元素并且你的宽度是固定的，那么你左边auto的外边距和你右边的auto外边距就会直接让你居中，只对块元素使用

如果你要做平均的布局呢，你只需要在布局中间加上一个x (margin-right: -12px)图成，x图成他多余的右边距覆盖，他的值呢就是没一个y的值附上去

flex布局

类型

display: flex or inline-flex;

flex与iinline-flex 的区别同block和inline-block差不多一样

flex container 下样式

流动方向(主轴):

flex-direction: column; // 元素从上到下
                column-reverse: // 元素从下放到上
                row: // 元素摆放的方向和文字方向一致,默认值，从左往右排
                row-reverse: // 元素摆放的方向和文字方向相反，从右往左排

换行:

flex-wrap: wrap; //折行
           nowrap; // 不换行（默认）
           wrap-reverse; // 最下到最上
// 缩写:
flex-flow: flex-direction flex-wrap; 
// 如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用

flex-direction flex-wrap的缩写:

// 如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用
flex-flow: flex-direction flex-wrap;

排列方式(主轴对齐方式):

justify-content: flex-start; // 元素和容器的左端对齐
                 flex-end; // 元素和容器的右端对齐
                 center; // 元素在容器里居中
                 space-between; // 元素之间保持相等的距离
                 space-around; //元素周围保持相等的距离
                 space-evenly; // 中分间距

侧轴对齐方式(单行):

align-items:flex-start; // 元素与容器的顶部对齐
            flex-end; 元素与容器的底部对齐
            center; // 元素纵向居中
            baseline; // 元素在容器的基线位置显示
            stretch; // 元素被拉伸以填满整个容器

侧轴对齐方式(多行):

align-items:flex-start; // 元素与容器的顶部对齐
            flex-end; // 元素与容器的底部对齐
            center; // 元素纵向居中
            baseline; // 元素在容器的基线位置显示
            stretch; // 元素被拉伸以填满整个容器

flex items 下样式

order: -1; // 某个元素的排列顺序；越小越靠前，默认为0
flex-grow: 1; // 设置或检索弹性盒子的扩展比率；越大分给这个元素就大点空间，默认为0
flex-shrink: 5; // 控制如何变瘦，一般写flex-shrink:0防止变瘦，默认是1
flex-basis:100px; // 控制基准宽度，默认是auto
// 缩写：
flex：flex-grow flex-shrink flex-basis;
// 如果写第二个必须带上最后一个，可写法：1，13，123
align-self: flex-end; // 某个子元素的排列方式，定制align-items，你可以和别人对接方式不一样

重点

记住这些代码：display:flex; flex-direction: row/column; flex-wrap: wrap; just-content: center / space-between; align-items: center;

经验

永远不要把width和height写死，除非特殊说明

用min-width、max-width、min-height、max-height fle和margin-xxx: auto 配合有意外的效果

Grid布局

flex 与 grid区别

一维布局用flex，适合做局部布局，比如导航栏组件。

二维布局用Grid，通常用于整个页面的规划。

grid container 下样式

display: grid | inline-grid;
// 列，参数为length,percentage,flex,max-content,min-content,minmax(min,max)
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto | 1fr 1fr 1fr; // 行，fr可以理解为份
grid-template-row: 240 repeat(4, 120); // repeat() 当你参数重复片段，可用于缩写
// 缩写：
grid-template: grid-template-rows / grid-template-columns;

// 行或列元素之间的间隙
grid-row-gap: 10;
grid-column-gap: 10;
// 缩写：
grid-gap: grid-row-gap grid-column-gap;

// 设置网格区域在CSS中的特定命名
grid-template-areas: "header header header header" "main main .sidebar" "footer footer footer footer";
// 指定当前元素所在的区域位置, 从grid-template-areas选取
grid-area: header;

image.png

grid items 下样式

order: -1; // 某个元素的排列顺序；越小越靠前，默认为0
grid-row-start: 1; // 行 开始
grid-row-end: 4; // 行 结束
grid-column-start: 1; // 列 开始
grid-column-end; 6; // 列 结束
// 可以接受两个值，需要用'/'分开
简写：grid-column：grid-column-start/grid-column-end; 
    grid-row：grid-row-start/grid-row-end;
// 顺序 行开始，列开始，行结束，列结束
缩写：grid-area：grid-row-start/grid-column-start/grid-row-end/grid-column-end;

CSS定位

补充盒模型 image.png 从div左边看：文本在border的上面，border在background的上面； background背景范围是border外边沿围成的区域

浮动元素比普通div高

当div变成float的时候，他脱离文档流

脱离文档流是是什么意思呢？

浮动元素脱离文档流：就是他比之前的高一点，他不在这个文档流里面，之前在文档流里面沾满了所以元素，他跳出来了，然后只比之前跳出来一点点，但是他已经不在影响文档流了，这就是float元素的真正含义

如果你是正常的文字，跟你在哪里无所谓，不管你是在div里面，还是本来就在最外面，我是按照文字出现的顺序覆盖的

position

  1. static：默认值，待在文档流
    • absolute是相对于祖先元素中最近的一个定位元素定位，什么是定位元素呢？
    • position不是static的，就是定位元素
    • 某些浏览器上如果不写top/left 会位置错乱
    • 善用left：100%；善用left：50%，加负margin 或 transform: translateX(-50%)
  2. relative：相对定位，升起来，但不脱离文档流
    • 场景：用于做位移；用于给absolute元素做爸爸
    • 配合z-index使用，z-index默认是auto，不创建新层叠上下文
  3. fixed：固定定位，定位基准是viewport(有诈)
    • 会被父类的其他某些元素影响到他shikou定位；
    • 手机上尽量不要用这个属性，坑多；
  4. sticky：粘滞定位
    • 当他快要离开文档流，就会像粘到这里；

经验

  1. 如果你写了absolute，一般都得补一个relative
  2. 如果你写了absolute或fixed，一定要补top和left
  3. sicky兼用性很差，主要用于面试装逼

层叠上下文

image.png 比喻：

  • 每个层叠上下文就是一个新的小世界
  • 这个小世界里面的z-index跟外界无关
  • 处在同一个小世界的z-index才能比较
  • 不正交的属性可以创建层叠上下文
  • z-index/flex/opacity/transform
  • 负z-index 也是没有办法逃出层叠上下文的

选择器

.item:first-child 作为第一个儿子的item

.item:nth-child(n) 作为第n个儿子的item

.item:last-child 作为最后一个儿子的item

avatar
文章
阅读
粉丝