首页  思维导图  详情



 



CSS的世界

2019-06-21 22:01:03   10  举报





AI智能生成

CSS世界笔记

CSS

模板推荐

作者其他创作

大纲/内容

一

所有例子都在github上

Github

二

选择器

类选择器，以点开头，可以多个元素同时使用。

ID选择器，一般指唯一元素，可指定多个元素，且像类选择器一样，但是不建议这个做。

属性选择器，带有[]的，如 [title] {}

伪类选择器，有一个英文冒号开头的，如：:first-child等

伪元素选择器，有两个冒号开头的，如：::first-letter，::first-line，::before，::after

关系选择器

后代选择器，选择所有符合规则的后代选择器。空格连接。

相邻后代选择器，仅仅选择子元素，孙子后的元素都会忽略。>连接，适用于IE7以上。

兄弟选择器，当前元素后面同级符合规则的元素。~连接，适用于IE7以上。

相邻兄弟选择器，当前元素后相邻（只能相邻的，隔一个都不行）元素符合规则的元素。+连接，适用于IE7以上。

浏览器兼容性

WEB标准规范里未写明的行为由浏览器自由定义，所以出现浏览器兼容性。

焦点元素

像<a><button>这样元素，当使用tab键切换时可以被focus，表面虚框或者外发光。

非焦点元素

没有设置tabindex属性的<div>的普通元素。

compatible

:active在evt.preventDefault()后，Firefox不生产效

例如：2-compatible.html

三

块级元素

display: block/list-item/table，块级元素和display:block不是一个概念。

块级元素在水平流上只能显示一个，就是说具有换行特性

可以使用这个特性清除浮动

例如：3-1.html

盒子

每个元素都有两个盒子，一个是外在盒子，一个是内在盒子。

外在盒子主要负责元素是一行显示，还是换行显示，也就是块级元素，还是内联元素。

内存盒子也叫容器盒子，负责宽高，内容呈现。

width/heigth主要作用就在这个容器盒子。

按display值不同

block元素

外在：块级盒子，内在：块级容器盒子。

inline-block元素

外在：内联盒子，内在：块级容器盒子。

inline元素

内外都内联盒子。

inline-table

外在：内联盒子，内在：table盒子。

文字和表格在一行显示。

例如：3-2.html

width

默认值：width:auto

1)、充分利用可用空间。 如<div>这些元素宽度默认是父容器100%的宽度。 fill-available。

2)、收缩和包裹。 典型代表就是浮动、绝对定位，inline-block元素和table元素。 英文是"shrink-to-fix"，收缩到合适，也叫包裹性。CSS3中width_fit-content，就是这种宽度表现。

3)、收缩到最小。 在table-layout为auto时最容易出现。每列宽度不够时文字能断就断，中文可以随便断但英文不可以。 也叫min-content。

例如：3-3.html

4)、超出容器限制。 除了明确设置width，以上三种不会出现这种情况。 但是，当内容是很长的英文和数字，或内联元素设置了white-space:nowrap时就会出现超出容器限制的情况。 也叫 max-content

例如：3-4.html

尺寸

外部尺寸(Extrinsic Sizing) 宽度由外部元素决定。

内部尺寸(Intrinsic Sizing) 宽度由内部元素决定。

以上4种尺寸只有第一种<div>默认宽度为100%时是外部尺寸，其余都内部尺寸。

外部尺寸和流的特性

1)、正常流宽度。

流的特性就是当一个容器中倒入足量的水时，会平铺满整个容器。 页面中<div>元素表现就是这种特性，这就是block容器的流特性。

当设置display:block时不需要width:100%了

鑫三无准则：无宽度，无图片，无浮动。

外部尺寸的块级元素一旦设置了宽度（就算是width:100%也会失去，虽然默认是100%，所以最好不要设置）这种流的特性就丢失了。

这流的特性不是width:100%这么简单，而是margin/border/padding和content内容区域自动分配水平空间的机制。

例如：3-5.html

2)、格式化宽度。

这种宽度出现在绝对定位模型中，也就是position为absolute或是fixed时。

默认情况下，绝对定位的宽度是包裹性，由内部元素决定宽度就是定位元素。

有一种情况宽度由外部尺寸决定

对于非替换元素，当left/right 或top/bottom对立方位的属性值同时存在，元素宽度表现为“格式化宽度”。 其宽度大小相对于最近具有定位特性（position不为static）的祖先元素计算。 width=100% - left - right height=100% - top - bottom

例如：3-6.html

内部尺寸和流的特性

1)、包裹性。

包裹性也有自适性。就是元素尺寸由内部元素决定，最大宽度不会超出包含块（容器元素）的宽度，也就说最大宽度为外部元素的宽度。

<button>按钮元素就是典型代表

具体表现为：文字越多宽度越宽（内部尺寸特性），当文字足够多时会在容器宽度处自动换行（自适应特性）

按钮最大宽度就是容器的 240 像素

例如：3-7.html

实际开发应用：页面内容是动态的，当内容少时剧中，内容多时居左对齐

例如：3-8.html

2)、首选最小宽度。

如果外部容器的宽度为：width:0，里面的inline-block元素宽度就是首选宽度。

首选宽度最小宽度

1、东亚文字（如中文）就是每个汉字最小宽度。

2、西方文字，由英文单元决定，如单词的分隔符、空格，或是横线或是其他符号。 如果要每个字符的宽度设置 word-break:break-all。

3、类似图片这样的替换元素就是元素内容本身。

例如：3-9.html

3)、最大宽度。

如果内部元素没有块级元素或是块级元素没有设置宽度，最大宽度就是最大的连续内联盒子的宽度。

例如：3-10.html

width值

容器盒子又由四个盒子组成，就是 content-box，padding-box，border-box，margin-box

width的值是作用在content-box上的

如果设置有padding或border，元素的尺寸往往不止width的宽度，还要加上padding或是border。

margin-box都是透明的，设置background不影响

CSS流体布局下宽度分离。

由于元素尺寸是由四个盒子决定的，而width只作用于content-box。 所以加一层标签设置width，然后利用流体布局性，content-box/padding-box/border-box就会自动计算， 且流的特性，子元素也会自动铺满父元素。

box-sizing

改变width的计算方式，默认值是content-box

box-sizing:border-box

计算值包含content-box/padding-box/border-box

box-sizing:padding，这个值只有firefox支持，不建议使用。

替换元素的宽度由内部元素决定，display无论是inline还是block。所以不能设置display为block让其100%适应父元素，只能通过设置width:100%。 非替换元素宽度由外部元素决定，且display是block时，具有流动性。

由替换元素特性，如果此时替换元素需要padding时，会影响布局，因为width会加上padding，此时就可以使用box-sizing：border-box了。

input, textarea, img, video, object { box-sizing: border-box }

其他普通元素不必要使用

height

height: auto

默认值，就是子元素高度的累加。

还有一种就是格式化高度，这个和格式化宽度一样。 width=100% - left - right height=100% - top - bottom

例如：3-6.html

height:百分值

如果父元素的height为auto，只要子元素在文档流中，百分值完全被忽略。

要百分值生效

1)、设置显示高度。html, body { height: 100% }

2)、绝对定位。

绝对定位计算是相对于padding-box

非绝对定位计算是相对于content-box

例如：3-12.html

min-width/height max-width/height

初始值

min-*，是auto

max-*，是none

max-width比 !important的权重还要大

例如：3-14.html

min-width比max-width权限更大

例如：3-14.html

实践：展开收起时动画，由于高度内容可能是动态的，可以使用max-height和overflow:hidden

例如：3-15.html

内联元素

内联元素指的是外在盒子，和display:inline不是一个概念，inline-table/inline-block也是内联元素。因为它们的外在盒子也是内联盒子。

内联盒模型

内容区域

围绕文字，受字符控制，且看不见的盒子，本质上是字符盒子。

像图片这样的替换元素显示的不是文字，所以没有字符盒子，内容区域就是元素本身。

内容区域是看不见的，可以这样理解为

选中文本区域的背景色

图片一

在IE和Firefox这个显示能正确表示

在chrome不总是能正确显示，如在图文混排时显示过大。

基本盒子尺寸的content-box

em盒，也就是中文字符占1em的高度。

内联盒子

不会让内容成块显示，而是排成一行。 实际指的是外在盒子。细分为内联盒子和匿名内联盒子。

内联盒子：外部包含内联标签如<a>等

匿名内联盒子：就是光秃秃的文字。如果文字前后有块级标签，则是匿名块级盒子。

行框盒子（inline box）

每一行就是一个行框盒子，每个行框盒子又是由一个个内联盒子组成。

包含盒子（container box），也叫包含块（container block），由一行一行的行框盒子组成。

空白节点（strut）

在HTML 5的文档声明中，内联元素的解析和渲染表现就是每个行框盒子前有一个空白节点。

永远透明，不占宽度，也无法通过脚本获取。

例如：3-16.html

display:inline

宽高不生效，margin垂直方向不生效，但是line-height生效。

四

替换元素

通过修改某个属性而呈现内容改变的元素； 如：＜ｉｍｇ＞＜ｏｂｊｅｃｔ＞＜ｖｅｄｉｏ＞＜ｔｅｘｔａｒｅａ＞＜ｉｆｒｅａｍ＞＜ｉｎｐｕｔ＞

内容外观不受页面上的CSS影响。

有自己的尺寸。大多数元素没有明确的尺寸下默认是（不包含边框）300像素 x 150像素，如：<vedio><ifream><canvas> 少数是0，如<img>

在很多的CSS属性上有自己的一套规则。如替换元素的基线是元素下边缘。

所有替换元素都是内联元素

display

<input><textarea>在Firefox上返回的是inline，而chrome、ie，返回的是inline-block.

值为inline/inline-block/block，尺寸计算规则都是一样的。

尺寸计算规则

1)、固有尺寸，就是内容本身的尺寸，如图片本身的大小。 2)、HTML尺寸，就是HMTL原生属性设置的尺寸。如<img>里的width,height，<textarea>里的cols，rows等。 3)、CSS尺寸，就是CSS样式设置的尺寸，作用在content-box上的尺寸。

CSS尺寸的优先级最高，固有尺寸最低，HTML尺寸中间。

例如：4-1.html

如果固有尺寸含有固定宽高比例，同时仅设置高度或宽度时，未设置的宽度或高度还是按照原来的比例计算的。

例如：4-2.html

兼容性

在首屏以下的图片，异步加载时为了稳定布局给个固定的宽高。

<img>不设置src属性时不会请求资源，不设置是直接没有src属性，不是src=""，在有些浏览器下src=""时还会请求资源的。

然而firefox下的<img>没有src属性时不是替换元素，而是普通元素，且display是inline，不是替换元素的计算规则。

所以，<img>设置宽高时，firefox下有问题，这时可以设备成 display:inline-block，就没问题了。（低版本才有这个问题）

固有尺寸不会变

HTML和CSS尺寸不会影响替换元素内容的固有尺寸。

例如：4-3.html

那为什么HTML和CSS尺寸可以改变大小呢？

原因是改变的是替换元素的容器大小，而已内容默认是填充式的充满这个容器， 就算本身超出这个容器，最多也只能填满这个容器而已。

这种适配方式在CSS3前是不能改变的。 CSS3可以修改这种适配方式。

object-fit: fill，这是默认方式，即填充满容器。

object-fit: none，和非替换元素一样，内容尺寸不受控制。

object-fit: contain，图片保持比例，尽可能利用元素的空间，但又不超出的方式显示。

例如：4-4.html

替换元素和非替换元素

1)、只相差了一个 src 属性

如<img>没有了src属性和span一样只是一个内联元素。

Chrome，Firefox需要alt属性且有属性值才会表现出来和内联元素如，display: block时，只有alt="不为空",img才会展示出宽度。

但是IE下始终是替换元素，因为就算没有src属性，有一个默认的占位内容，一张完整的小图片。

实践，不兼容IE

例如：4-6.html

2)、只差了一个content属性

Chrome下所有元素都支持content，其他浏览器只有::before和::after下才支持。

例如：4-7.html

计算属性

counter-reset: name initVal [name initVal]

重置名称，可以多个。

counter-increment: name [step]

自增多少可以是负数，不指定是1，也可以多个计算。

counter(name)/counters(name, 分隔符)

都是输出。前者是单序号输出，后者是嵌套输出。

嵌套输出例如：4-10.html

padding

内联元素的padding在垂直上布局，和视觉都会有影响，但是只受到line-heigth，vertical-align影响。

这样在移动端可以添加点击区域，但不影响布局（只有line-height影响的情况下。）

例如：4-11.html

通过伪元素添加分隔符

例如：4-12.html

百分值在块级元素下是相对父元素width计算的。

等比例计算

例如：4-13.html

内联元素下高度和亮度不一样（幽灵空白节点），padding会断行。

实践

由于浏览器的按钮对应的padding不一样，可以用label模拟所有浏览器的高度一样的按钮

例如：4-14.html

小图标

例如：4-15.html

margin

元素尺寸相关

元素尺寸

jQuery对应的$().width()，$().height()，包括padding和border，也就是元素的border-box。 在原生DOM API中写作offsetWidth，offsetHeight，也叫元素偏移尺寸。

元素内部尺寸

jQuery对应的$().innerWidth()，$().innerHeight()。包括padding但不包含border，也就是元素的padding-box尺寸。 在原生DOM API中写作clientWidth，clientHeight，也叫元素可视尺寸。

元素外部尺寸

jQuery对应的$().outerWidth(true)，$().outerHeight(true)，包含padding/border/margin，也就是元素的margin-box尺寸，没有原生API。

外部尺寸可以有负值。

底部留白时，不要用padding，不同浏览器触发滚动不一样。要用margin给底部留白。

当元素的尺寸符合“充分利用可用空间”时，margin可以改变可视尺寸。

例如：4-17.html

实践

一列定宽，一列自适应

例如：4-18.html

列表两端对齐

列表右端的margin去掉。

例如：4-19.html

等高对齐

例如：4-20.html

margin无法改变内部尺寸，但可以改变外部尺寸。垂直方向上两个块级元素上下距离默认是0，然而margin-bottom:-999px，后面的元素上移了999px，而padding-bottom:999px，又低回来了。这一正负抵消，不影响布局，而视觉层的背景色却有999px.

margin在文档流垂直方向上会出现合并现象。

值为auto

1)、一侧为定值，一侧为auto，auto一侧为剩余空间大小。 2)、两侧为auto，平分剩余空间。

可以实例块级元素的左中右对齐和内联元素的text-align属性一样效果

例如：4-22.html

margin的默认值是0，而auto是计算剩余的空间，和0 不一样。

例如：4-22.html

触发margin:auto计算的是width或height为auto时，对应方向具有自动填充性。

而height为auto时没有，但是可以改流方向writing-mode: vertical-lr;如果这样width为auto时又不行了。

绝对定位的格式化高度和格式化宽度都具有填充性，因此可以做垂直水平剧中（IE8级上以）

例如：4-23.html

margin无效情形

display为inline的非替换元素的垂直方向无效。 而内联替换元素垂直方向有效，而不存在合并现象。

例如：4-24.html

表格的<td>或<tr>，或者display为table-cell或是table-row

margin合并时，改变小值且没超过大值。

绝对定位元素非定位方向，如设置top:10,left:10，此时的定位方向为top，left，所以margin-right和margin-bottom无效。

定高父元素的子元素margin-bottom或定宽父元素的子元素margin-right无效。

例如：4-24.html

border

border的默认大小为3px，不支持百分值。

solid:实线，dashed：虚线，dotted:点，double：双线，双线值永远相等，这就是默认值为3px的原因。

border-color不指定时，使用当前元素的color颜色，类似的还有outline，box-shadow，text-shadow

color:transparent，IE9支持。 border-color:transparent，IE7支持。

等高实践

例如：4-27.html

五

x 字母

基线就是“x”字母的下边缘。

x-heigth的高度就是x字符的高度

vertical-align默认值就是基线 baseline。 middle是基线往上的1/2 x-height高度。

内联元素默认是基线对齐

替换元素的对齐是元素下边缘

line-height

div的高度由line-heigth决定，而不是字体。

例如：5-1.html

行距=line-heigth - font-size

半行距是content-box - font-size(content-box上边缘到文字的上边缘)???

影响元素高度的有字体和字体大小，如chrome下默认字体span的是21px，firefox是19px

替换元素，块级元素不受line-heigth影响？？？。

line-heigth可以直接近似（文字垂直中线要比行框垂直中线低）垂直居中，不需要和heigth一起使用。（原因是行距是上下等分机制）

多行内容垂直居中，利用内联元素的vertical-align:middle，line-height对行框幽灵节点的影响。

例如：5-1.html

默认值是normal，不同浏览器或操作系统有不同的默认字体，而line-height的值和字体有关， 也就是说默认值时，在不同环境有不同的值，所以这个值要重置。

除了normal默认值外，还可以数值，百分比，长度单位，如果font-size都14px

line-heigth: 1.5，最终值是 line-heigth = 14 * 1.5 = 21px;

line-heigth:150%，最终值是 line-heigth = 14 * 150% = 21px;

line-heigth: 16px 或 1.5em(最终值是 line-heigth = 14 * 1.5 = 21px);

虽然数值，百分比，或是em作为单位最后的计算结果一样，但是作为可以继承的属性，子元素继承的结果是不一样的 数值继承的还是数值，子元素还会计算一次，而百分比或是em则继承的是最终的计算值，且不会再计算。

例如：5-2.html

vertical-align

值类型

baseline（默认值）,top, middle, bottom

text-top, text-bottom

super, sub

数值百分，20px , 2em ，20%（相对line-height计算）

起作用前提

内联元素以及display值为table-cell的元素

浮动和绝对定位会让元素块状化，vertical-align不起作用。

当div内只有一个img元素时，设置vertical-align：middle不生效，原因是幽灵节点高度太小，可以给div设置一个大的行高

例如：5-5.html

display:table-cell，作用在元素自身而不是子元素，所以在本元素设置vertical-align:middle才有效

例如：5-5.html

容器高度不等于行高的情况

例如：5-6.html

出现这种情况是因为：span元素里的字体大小为24px，span元素前面的幽灵节点的大小还是默认的大小，而line-height都是32px，由于字体越大基线越底，幽灵节点的基线比span元素的基线高，要基线对齐，彼此上下位移，导致高度超出line-height。

可以设置相同大小的字体就可以了，或者改成vertical-align:top对齐方式

块级元素，里有图片，块级元素的高度要比图片高度要高。

例如：5-6.html

出现这种情况也是line-heigtht和vertical-align，和幽灵节点的作用。

解决问题

让图片块状化，消除幽灵节点

让幽灵节点的半行距足够小，设置line-height:0就可以了，这样还可以让Img保留内联特性

当line-height为数值百分比时可以设置 font-size:0

由于默认是baseline，可以设置vertical-align其他属性，top,middle,bottom等。

inline-block元素

一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是margin的下边缘。 否则其基线就是元素里最后一行内联元素的基线。

例如：5-7.html

图标对齐实践

例如：5-9.html

水平垂直居中的弹窗

例如：5-10.html

六

 Collect

Get Started

我的世界观

 Collect

Get Started

世界互联网大会

 Collect

Get Started

大国的兴衰

 Collect

Get Started

淘世界系统架构





0 条评论

下一页