CSS的世界
2019-06-21 22:01:03 10 举报
AI智能生成
CSS世界笔记
作者其他创作
大纲/内容
一
所有例子都在github上
Github
二
选择器
类选择器,以点开头,可以多个元素同时使用。
ID选择器,一般指唯一元素,可指定多个元素,且像类选择器一样,但是不建议这个做。
属性选择器,带有[]的,如 [title] {}
伪类选择器,有一个英文冒号开头的,如::first-child等
伪元素选择器,有两个冒号开头的,如:::first-letter,::first-line,::before,::after
关系选择器
后代选择器,选择所有符合规则的后代选择器。空格连接。
相邻后代选择器,仅仅选择子元素,孙子后的元素都会忽略。>连接,适用于IE7以上。
兄弟选择器,当前元素后面同级符合规则的元素。~连接,适用于IE7以上。
相邻兄弟选择器,当前元素后相邻(只能相邻的,隔一个都不行)元素符合规则的元素。+连接,适用于IE7以上。
浏览器兼容性
WEB标准规范里未写明的行为由浏览器自由定义,所以出现浏览器兼容性。
焦点元素
像<a><button>这样元素,当使用tab键切换时可以被focus,表面虚框或者外发光。
非焦点元素
没有设置tabindex属性的<div><span>的普通元素。
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><p>这些元素宽度默认是父容器100%的宽度。
fill-available。
如<div><p>这些元素宽度默认是父容器100%的宽度。
fill-available。
2)、收缩和包裹。
典型代表就是浮动、绝对定位,inline-block元素和table元素。
英文是"shrink-to-fix",收缩到合适,也叫包裹性。CSS3中width_fit-content,就是这种宽度表现。
典型代表就是浮动、绝对定位,inline-block元素和table元素。
英文是"shrink-to-fix",收缩到合适,也叫包裹性。CSS3中width_fit-content,就是这种宽度表现。
3)、收缩到最小。
在table-layout为auto时最容易出现。每列宽度不够时文字能断就断,中文可以随便断但英文不可以。
也叫min-content。
在table-layout为auto时最容易出现。每列宽度不够时文字能断就断,中文可以随便断但英文不可以。
也叫min-content。
例如:3-3.html
4)、超出容器限制。
除了明确设置width,以上三种不会出现这种情况。
但是,当内容是很长的英文和数字,或内联元素设置了white-space:nowrap时就会出现超出容器限制的情况。
也叫 max-content
除了明确设置width,以上三种不会出现这种情况。
但是,当内容是很长的英文和数字,或内联元素设置了white-space:nowrap时就会出现超出容器限制的情况。
也叫 max-content
例如:3-4.html
尺寸
外部尺寸(Extrinsic Sizing) 宽度由外部元素决定。
内部尺寸(Intrinsic Sizing) 宽度由内部元素决定。
以上4种尺寸只有第一种<div>默认宽度为100%时是外部尺寸,其余都内部尺寸。
外部尺寸和流的特性
1)、正常流宽度。
流的特性就是当一个容器中倒入足量的水时,会平铺满整个容器。
页面中<div>元素表现就是这种特性,这就是block容器的流特性。
页面中<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
其宽度大小相对于最近具有定位特性(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。
如果要每个字符的宽度设置 word-break:break-all。
3、类似图片这样的替换元素就是元素内容本身。
例如:3-9.html
3)、最大宽度。
如果内部元素没有块级元素或是块级元素没有设置宽度,最大宽度就是最大的连续内联盒子的宽度。
例如:3-10.html
width值
容器盒子又由四个盒子组成,就是
content-box,padding-box,border-box,margin-box
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就会自动计算,
且流的特性,子元素也会自动铺满父元素。
所以加一层标签设置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时,具有流动性。
非替换元素宽度由外部元素决定,且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
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
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的高度。
内联盒子
不会让内容成块显示,而是排成一行。
实际指的是外在盒子。细分为内联盒子和匿名内联盒子。
实际指的是外在盒子。细分为内联盒子和匿名内联盒子。
内联盒子:外部包含内联标签如<span><a><em>等
匿名内联盒子:就是光秃秃的文字。如果文字前后有块级标签,则是匿名块级盒子。
行框盒子(inline box)
每一行就是一个行框盒子,每个行框盒子又是由一个个内联盒子组成。
包含盒子(container box),也叫包含块(container block),由一行一行的行框盒子组成。
空白节点(strut)
在HTML 5的文档声明中,内联元素的解析和渲染表现就是每个行框盒子前有一个空白节点。
永远透明,不占宽度,也无法通过脚本获取。
例如:3-16.html
display:inline
宽高不生效,margin垂直方向不生效,但是line-height生效。
四
替换元素
通过修改某个属性而呈现内容改变的元素;
如:<img><object><vedio><textarea><ifream><input>
如:<img><object><vedio><textarea><ifream><input>
内容外观不受页面上的CSS影响。
有自己的尺寸。大多数元素没有明确的尺寸下默认是 (不包含边框)300像素 x 150像素,如:<vedio><ifream><canvas>
少数是0,如<img>
少数是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上的尺寸。
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可以修改这种适配方式。
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。<br>在原生DOM API中写作offsetWidth,offsetHeight,也叫元素偏移尺寸。
元素内部尺寸
jQuery对应的$().innerWidth(),$().innerHeight()。包括padding但不包含border,也就是元素的padding-box尺寸。<br>在原生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一侧为剩余空间大小。<br>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的非替换元素的垂直方向无效。<br>而内联替换元素垂直方向有效,而不存在合并现象。
例如: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支持。
border-color:transparent,IE7支持。
等高实践
例如:4-27.html
五
x 字母
基线就是“x”字母的下边缘。
x-heigth的高度就是x字符的高度
vertical-align默认值就是基线 baseline。
middle是基线往上的1/2 x-height高度。
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则继承的是最终的计算值,且不会再计算。
数值继承的还是数值,子元素还会计算一次,而百分比或是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
六
收藏
0 条评论
下一页