CSS基础巩固

原创 2018年04月15日 19:11:14

盒模型

宽40%,padding 10px的盒子

方案一:IE盒模型 box-sizing: border-box

<div style="width: 40%;padding: 10px"></div>

方案二:W3C盒模型 box-sizing: content-box

<div style="width: 40%">

    <div style="padding: 10px"></div>

</div>

方案三:CSS 表达式

<div style="width: calc(40% - 20px); padding: 10px"></div>

display

block-level块级:block\table\flex\grid (div,p)

inline-level行内:inline (a,span,label)

inline-block-level行内块级: inline-block\inline-table\inline-flex\inline-grid (image, object, video, embed, textarea, input, audio, canvas, applet)

inline-block-level元素之间会有间隙,可以用浮动来去除间隙

position

包含块(Containing block):一个元素的包含块是这个元素width\height\padding\margin\border百分比值的基数, 偏移量left\right\top\bottom的基点

初始包含块ICB (initial containing block): 根节点的包含块,起点viewport左上角,尺寸等于viewport

static元素的包含块:块级祖先元素的content box

relative元素的包含块:块级祖先元素的content box,但偏移量的基点不是它的包含块,而是文档流当前位置

absolute元素的包含块:有定位祖先元素的padding box,直到ICB

float

浮动对display的影响

1、对flex\inline-flex元素 不起作用

2、inline\inline-block -> block

3、inline-table -> table

4、table-row\table-column\table-cell\table-caption\table-row-group\table-column-group\table-header-group\table-footer-group -> block

margin: auto

水平方向上:block元素的margin box宽度默认是整行,确定content box的宽度后,设置margin:0  auto,margin会自动占满整行,两边平分

垂直方向上:{

    position: absolute; top: 0; bottom: 0; // 确定margin box高度

    height: 100px; // 确定 content box 高度,高度不确定,可以设置为fit-content

    margin: auto 0; // 垂直方向margin自动沾满,上下平分

}

垂直方向上margin合并

垂直方向上的块级元素之间margin会合并,块级元素和浮动元素之间会合并,浮动元素之间不会合并

第一行子元素(非BFC,非inline-table\inline-caption)的margin-top作用在父元素(无border和padding)外部,并和父元素的margin-top合并。margin-bottom同理

行框(line box)

实际font-size: text-top~text-bottom,文字的实际显示高度可能比设置的font-size大

实际行高(行框高):top~bottom,可能比line-height的值大

每行的行框高一样的情况下计算行距:

行距:top~text-top + text-bottom~bottom = top~text-top * 2 = 实际行高 - 实际font-size

半行距:行距/2 = top~text-top

一行文字的高度 = 行框高

多行文字的高度 = 行框高 * 行数 - 行距

行框高计算

一个元素内的每一行的行框高都可能不一样,某一行的行框高取以下五个行高来源的最大值

1、当前元素的实际font-size

2、当前元素line-height。默认为normal,会比实际font-size大一点。设为1或100%则等于实际font-size。

3、这一行inline类型子元素的实际font-size

4、这一行的inline类型子元素的line-height。未设置line-height,则从父元素(当前元素)继承。如果继承来的是数字或normal,那么基准是子元素的font-size。如果继承来的是%,那么基准是父元素的font-size。

5、这一行的inline-block类型子元素的margin box高度 + 这个子元素与当前元素之间的垂直方向错位。inline-block元素只会和一行inline元素同行。vertical-align为baseline时会和当前元素有错位。

格式化上下文(Formatting Context)

BFC元素(block formatting context)

1、根元素

2、float 不是 none

3、position: absolute, fixed

4、display: inline-block\flex\inline-flex\grid\inline-grid\table-cell\table-caption\flow-root

5、overflow 不是 visible

6、column-count 或 column-width 不为 auto

7、column-span:all

8、contain: layout\content\strict

BFC元素与普通元素的区别

1、普通元素的第一行子元素的margin-top作用在父元素(无border和padding)外部,BFC元素的则作用在内部。margin-bottom同理。

2、普通元素的浮动子元素不会撑高父元素,BFC元素的则会

3、普通元素不会横向避开浮动元素,BFC元素则会

FFC(Flex Formatting context)

flex容器(flex container)

用于一维布局

{

    display: flex\inline-flex

    flex-direction: row(默认值),row-reverse, column, column-reverse // 主轴(main axis)方向

    flex-wrap: nowrap(默认值),wrap(向下盘绕),wrap-reverse(向上盘绕) // 盘绕方式

    flex-flow: flex-direction flex-wrap // 合写形式

    justify-content: // 一根主轴上项目的分布方式

        flex-start(默认值,向主轴起点main start靠拢)

        flex-end(向主轴终点main end靠拢)

        center(向主轴中点靠拢)

        space-between(两侧贴边,平均分隔)

        space-around(项目间两等份间距,项目与边框一等份间距)

    align-items:  // 一根主轴上项目的对齐方式

        flex-start(在交叉轴起点cross start上对齐)

        flex-end(在交叉轴终点cross end上对齐)

        center(居中对齐)

        stretch(默认值,伸展未设置高度的项目)

        baseline(以项目的第一行行框的baseline对齐)

    align-content:  // 多根主轴在容器里的分布方式

         flex-start(向交叉轴起点靠拢)

         flex-end(向交叉轴终点靠拢)

         center(向交叉轴中点靠拢)

         stetch(默认值,多根主轴平均铺满容器)

          space-between(两侧贴边,平均分隔)

          space-around(主轴间两等份间距,主轴与边框一等份间距)

}

flex项目(flex item)

{

    失效属性:float\clear\vertical-align

    order: 数字  // 排列序号,默认0

    flex-grow: 数字 // 放大比例,默认0

    flex-shrink: 数字 // 缩小比例,默认1

    flex-basis: 尺寸 // 项目在主轴方向上的尺寸,默认auto

    flex: flex-grow flex-shrink flex-basis // 合写形式

    align-self: align-items 有的值 // 用来覆盖容器设置的align-items

}

GFC(grid formatting context)

用于二维布局

网格容器(grid container)

{

    display: grid\inline-grid

    grid-column-gap: 尺寸 // 列网格线(column grid lines)宽度

    grid-row-gap: 尺寸 // 行网格线(row grid lines)高度

    grid-gap: grid-column-gap 和 grid-row-gap 合写

    grid-template-columns: 100px 30% auto 1f; // 每一列的宽度,1f表示剩余空间的1等份

    grid-template-rows: 100px 100px; // 每一行的高度

    justify-items: start\end\center\stretch // item在网格单元(grid cell)中横向分布方式

    align-items: start\end\center\stretch // item在网格单元中纵向对齐方式

    justify-content: start\end\center\stretch\space-around\space-between\space-evenly // 列在容器中的分布方式

    align-content: start\end\center\stretch\space-around\space-between\space-evenly // 行在容器中的分布方式

    /* 合并网格单元方法一 */

    grid-template-areas: "area1 area1 area2" "area1 . area2" // 设置每一个网格单元分别属于哪个网格区域(grid area),点表示不属于任何区域

    grid-template: grid-template-columns、grid-template-rows、grid-template-areas 的合写

}

网格项目(grid item)

{

    grid-area: area1 // 网格区域名称

    /* 合并网格单元方法二 */

    grid-column-start: 1 // 起始列网格线序号

    grid-column-end: 2 // 结尾列网格线序号

    grid-row-start: 1  // 起始行网格线序号

    grid-row-end: 2  // 结尾行网格线序号 

    grid-column: grid-column-start 和 grid-column-end的合写

    grid-row: grid-row-start 和 grid-row-end的合写

    justify-self: 用于覆盖justify-items

    align-self: 用于覆盖 align-items

}

多列布局

columns容器

{

    column-width: 列宽

    column-count: 列数

    column-gap: 列距

    column-rule: 列边框

    columns: clumn-width 和 column-count的合写

}

布局

关于本文作者:@蔡剑涛原文:https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA前言在刚刚过去的第四届CSS大会上,不少人提到了布局的问题。那么这篇很适合...
  • sinat_38992528
  • sinat_38992528
  • 2018-04-18 10:30:02
  • 136

RGB-YCrCb

今天对颜色一些格式转换有些不明白的地方,在网上找了一些文章,感谢原作者,现张贴如下:颜色空间是一个三维坐标系统,每一种颜色由一个点表示。在 RGB 颜色空间中,红,绿,蓝是基本元素。RGB 格式是显示...
  • suiyunonghen
  • suiyunonghen
  • 2009-02-04 12:44:00
  • 8588

Java 基础知识巩固

一、反射的基本使用      1、反射的目的是通过字节码获取类的实例或者类里面属性和方法。      2、反射的步骤:            1)获取class类。 类名.class对象名.get...
  • chenwiehuang
  • chenwiehuang
  • 2017-01-03 17:18:21
  • 631

java基础巩固----集合

集合: 存储对象数据 的集合容器。 单例集合 ----------| Collection  单例集合 的根接口 ----------------| List 如果是实现了List接口的集合类,具备...
  • yuexianchang
  • yuexianchang
  • 2016-11-28 14:52:09
  • 762

javaScript----基础巩固全面学习

1.     JavaScript简介   1.1. JavaScript由来 Netscape 发明了 JavaScript     JavaScript由Netscape 在1995年发明...
  • yuexianchang
  • yuexianchang
  • 2016-11-29 08:25:03
  • 1263

PHP-基础(基础巩固)

在做项目的时候,有时候写一个功能要去试两三遍,  自己也发现了, 有些东西都是模模糊糊知道,原因都是基础知识掌握的不够扎实,趁平时有时间, 把PHP的基础知识又总结了一遍,相信以后写项目少去不少麻烦....
  • xueling022
  • xueling022
  • 2015-07-12 17:44:09
  • 414

php基础知识巩固

数据类型的转换: php的数据类型主要有:整型int、浮点型float、字符串string、布尔型bool、数组array、对象object 以上数据可以相互转换。 我们知道,php的输出形式有...
  • yuanqishaonv
  • yuanqishaonv
  • 2016-08-24 18:13:33
  • 273

java基础巩固之试题练习(一)

试题内容: 1.java中 String str = "hello world"下列语句错误的是 str+=' a' int strlen = str.length str=100...
  • u013793732
  • u013793732
  • 2015-12-25 13:22:49
  • 767

前端学习1(html基础巩固)

大一学习的知识真的忘的差不多了,这次学习就相当于巩固,并在此基础上完成作业。加油 基本概念 This is a heading 标题前后自动加入空行 段落前后也自动加入空行 ...
  • u013014553
  • u013014553
  • 2017-01-22 03:37:46
  • 181
收藏助手
不良信息举报
您举报文章:CSS基础巩固
举报原因:
原因补充:

(最多只允许输入30个字)