search

easonhuang123 / blog

用issues写博客
41 stars 5 forks source link

css学习笔记 #11

Open easonhuang123 opened 6 years ago

easonhuang123 commented 6 years ago

css学习笔记

盒子模型

结构：content + padding + border + margin

基本分类

关于margin

absolute

脱离文档流，相对于已定位的父元素进行移动，当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位

fixed

脱离文档流，不随着滚动条的移动而改变位置，相对于浏览器窗口，对于IE78需要DOCTYPE

relative

相对于自身位置移动，原位置还保留在文档流中，内容发生了移动

static

position默认值

sticky

z-index

网上看到一个不错的比喻：

你可以把同一层级的层叠上下文元素看做是两个不同的人，不同的人有不同的高度，你可以比较两个人的高度，但是你不能说手长身高就更高一点吧。

样式引入方式

::after {
    content: "";
    display: table;
    clear: both;
}

块与内联

计算法则

布局

css布局考察的知识点比较综合，基本就是使用上了所有css的基础技巧，以下是一些比较常见的场景总结。

水平居中

方法一： 定宽 + margin: 0 auto

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.child{
    width: 100px;
    margin: 0 auto;
}
</style>

方法二： 行内元素 inline-block + text-align

<div class="txtCenter">xxx</div>
<div class="imgCenter"><img src="xxx" /></div>

<style>
div.txtCenter{
    text-align:center;
}
.imgCenter{
    text-align:center; 
}
</style>

方法三： display: table + margin: 0 auto

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.parent{
    display:table;
}
.child{
    margin: 0 auto;
}
</style>

方法四： 父元素display: flex + justify-content: center

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.parent{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    justify-content: center;/*指定水平居中*/
}
</style>

垂直居中

方法一： display: table-cell + vertical-align: middle

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
</style>

方法二： 父元素display: flex + align-item: center

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.parent{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}
</style>

方法三：对单行文本使用 line-height

<div class="parent">
       xxx
</div>

<style>
.parent{
    height: 300px;
    line-height: 300px;
}
</style>

方法四： 对图片使用 line-height + vertical-align

<div class="parent">
       <img src="xxx"/>
</div>

<style>
.parent{
    height: 300px;
    line-height: 300px;
}
img{
    vertical-align: middle;
}
</style>

方法五： 绝对定位 margin: auto 0

<div class="parent">
       <p class="child">我是子元素</p>
</div>

<style>
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
</style>

🌞居中万金油

方法：position: absolute + top + left + transform: translate()

<div class="parent">
       <div>xxx</div>
</div>

<style>
.parent{
    position: relative;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

图片文字对齐

方法一： 图片作为背景图片 background-image background-repeat background-size


<style>
.testTXT {
    height:60px;
    line-height:60px;
    padding-left:65px;
    background:url(xxx) no-repeat left center
}
</style>

<div class="testdiv">
    <div class="testTXT">
        <span>XXXX</span>
    </div>
</div>

方法二： 图片固定宽高，父容器相对定位，子容器绝对定位

<style>
.img {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    position: relative;
}

.img img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}
</style>

<div class="img">
    <img src="xxx" />
</div>

方法三： 图片宽高自适应，使用line-height，text-align，vertical-align，max-width,max-height

<style>
.img {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

.img img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}
</style>

<div class="img">
    <img src="xxx" />
</div>

方法四： css3 display:box

.img {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;
    display: -o-box;
    -o-box-align: center;
    -o-box-pack: center;
    display: -ms-box;
    -ms-box-align: center;
    -ms-box-pack: center;
    display: box;
    box-align: center;
    box-pack: center;
}

.img img {
    width: 100px;
    height: 100px;
}

<div class="img">
    <img src="xxx" />
    <span>xxx</span>
</div>

参考文章

完美实现文字图片水平垂直居中

多列布局

方法一： float + overflow: hidden

方法二： columns-width columns-count（IE10以下不支持，需要添加前缀）

方法三： flex （也需要加入兼容语法）

参考文章

CSS布局之多列布局

圣杯布局 && 双飞翼布局

参考文章

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

flex

基础属性说明 参考文章

A Complete Guide to Flexbox

使用实例

参考文章

flex的使用实例

兼容性问题

Can I use

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

grid

参考文章

CSS：Grid 布局

浮动

浮动

https://www.jianshu.com/p/07eb19957991

清除浮动

  • 原因
  • 浮动元素脱离文档流，影响页面结构
  • 父元素高度无法撑开 
    
.clearfix {
zoom: 1;
}

.clearfix::after { content: ''; clear: both; height: 0; visibility: hidden; display: block; }

## **BFC**
* 块级格式化上下文

* 触发条件
    * float不为none

    * overflow不为visible
    * display 为table-cell，table-caption，inline-block
    * position为absolute，fixed
    * fieldset元素
* 功能
    * 自我独立，内部元素不会影响外部元素

    * 会包含浮动元素
    * 同一个BFC的margin重叠

>  参考文章
>
> ⚠️ [前端布局基础概述](https://mp.weixin.qq.com/s/X9i_7BX-32EZlxsYP6MxEg)

## **css3**
* 边框图片，圆角

    * Border-radius

    * &-image
* 背景
    * Background-image

    * &-size
    * &-origin（位置区域content-box/border-box/padding-box）
    * &-clip（裁剪描绘区域）
    * 多重背景
* 渐变色
    * Linear-gradient(angle,color1 10%,color2 30%,..)

    * Radial-gradient
    * 兼容性，添加前缀
* 文本效果
    * Text-shadow

    * Box-shadow
    * Text-overflow
    * Word-wrap (break-word,强制断开分行）
    * Word-break（keep-all,break-all 是否换行）
    * 一行省略

display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: n;


* columns

* 2D/3D转换
    * transform
        * Matrix 矩阵变换

        * translate平移
        * scale缩放
        * rotate旋转
        * skew倾斜
* 过渡
    * transition
* 动画
    * @keyframes

    * animation

## **单位**

* px

* em 当前字体大小
* rem 根节点字体大小
* vh, vw, vmin, vmax 视窗单位
* ex, ch 给予特殊字体的单位
    * ex em的一半，字体的中间标志，可以上下用于微调

    * ch 数字0的宽度

## **BEM**

* box--body

* box__body

## **命名空间**

## **媒体查询**

* 设置Meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”/>

@media (max-width: 960px) and (min-width: 600px) {…}



## **响应式设计**

* rem适应屏幕大小

* 媒体查询
* flex流式布局
* 响应式图片<picture>

## **Css解析过程**

CSS 解析完毕后生成CSSDOM Tree，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

## **css优化**

* 雪碧图，利用背景图片位移

* 对类名的设计与选择
    * 避免不必要的重复

    * 避免！important
    * 避免链式，后代选择符
* 预处理
    * less，sass
* 后处理
    * postCSS
* 兼容
    * *{margin:0 ; padding: 0;}
    * Hack 
        * _color ——IE6
        * *color ——IE6/7
        * color: red\9 ——IE8及以下
    * 24位PNG在IE6不支持
        * 用8位PNG
        * 准备专门的一套
    * A标签顺序
        * Link
        * visited
        * hover
        * Active 
    * 透明度
        * opacity： 0.8
        * filter: alpha(opacity=80) ——IE
        * filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80); //IE6的写法
    * 盒子模型
    * 边距问题
        * 浮动双倍
        * Img图片存在边距
    * 各种前缀
    * flex

## **css变量**
> https://mp.weixin.qq.com/s/wFz0PsOGaLb9KDGfEJuLaA