2 CSS相关

海阔凭鱼跃学习笔记

已于 2022-11-27 12:11:05 修改

阅读量73

点赞数

分类专栏：前端学习笔记文章标签：前端 css

于 2022-11-22 22:05:42 首次发布

本文链接：https://blog.csdn.net/qq_37633967/article/details/127986647

版权

前端学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

系列文章目录

前言

提示：CSS相关知识

一、margin重叠

相邻元素的margin-top和margin-bottom会发生重叠

空白内容的<p></p>也会重叠

二、margin负值

margin-top 和 margin-left 负值，元素向上、向左移动

margin-right 负值，右侧元素左移，自身不受影响

margin-bottom 负值，下方元素上移，自身不受影响

三、BFC

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件：

float不是none
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex/inline-block

BFC的常见应用：清除浮动

四、float布局

1、圣杯布局和双飞翼布局的技术总结

使用float布局

两侧使用margin负值，以便和中间内容横向重叠

防止中间内容被两侧覆盖，一个用padding 一个用margin

2、清除浮动

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

.clearfix: {
    *zoom: 1; /* 兼容IE低版本 */
}

五、flex布局

常用语法

flex-direction（方向）
justify-content（横轴方向的对齐方式）
align-items（纵轴方向的对齐方式）
flex-wrap（换行方式）
align-self（子元素对齐方式）

六、定位

relative 依据自身定位
absolute 依据最近一层的定位元素定位

1.水平居中

inline元素：text-align: center;
block元素：margin: auto
absolute元素：left: 50% + margin-left 负值

2.垂直居中

inline元素：line-height 的值等于height值
absolute元素：top：50% + margin-top 负值

3.未知元素宽高，水平垂直居中

absolute元素：top: 50%; left: 50%; transform: translate(-50%,-50%)
absolute元素：top,left,bottom,right = 0 + margin: auto

七、line-height继承

写具体数值，如30px，继承该值

写比例，如 1.5，则继承该比例（<p>标签font-size16*1.5 = 24px）

body {
    font-size: 20px;
    line-height: 1.5;
}
p {
    font-size: 16px;
}

写百分比，如200%，则继承计算出来的（font-size20*200% = 40px）

body {
    font-size: 20px;
    line-height: 200%;
}
p {
    font-size: 16px;
}

八、响应式

px，绝对长度单位
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素font-size (例：100px=1rem;0.16rem=16px)
```
html {
    font-size: 100px;
}
div {
    font-size: 0.16rem;
    height: 1rem;
}
```
vh 网页视口高度的1/100
vw 网页视口宽度的1/100
vmax 取两者最大值；vmin 取两者最小值
window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度（浏览器去掉头尾）
document.body.clientHeight // body高度（页面内容高度）