资讯专栏INFORMATION COLUMN

《css世界》- 详细重点笔记与技巧

赵连江 / 2028人阅读

摘要:概述在世界这本书中有一些黑魔法给列举出来,在结合自己的理解。篇幅有点长,希望大家能够坚持看完,一定会有收获以下是摘自每章内一些重要的概念与技巧。

概述
在《css世界》这本书中有一些“黑魔法”给列举出来,在结合自己的理解。篇幅有点长,希望大家能够坚持看完,一定会有收获!!!
以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等;

ps: 特别是 “line-height、vertical-align”内容需要反复仔细研究阅读

何为“流”
成为文档流,将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素 (引导元素排列和定位)
什么是流体布局
利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性,所以“流体布局”往往都是具有自适应性。
元素宽度按照分辨率宽度进行长度、宽度的调整,但布局不变
“未定义行为”
当某个浏览器中出现与其他浏览器不一样的行为或样式表现;
Web应用场景千变万化,Web标准也是不可能面面俱到的,也会存在规范描述以外的场景,此时,各大浏览器厂家只能根据自己的理解与喜好去实现,一旦个性化就会出现差异
currentColor 变量
当前的文字颜色;凡事需要使用颜色值的地方,都可以使用currentColor替换,比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等
div { color:#3c3c3c; border: 1em solid currentColor; }

currentColor-CSS3超高校级好用CSS变量

块级元素
默认情况下,块级元素会新起一行;占据其父元素(容器)的整个空间

块级盒子负责结构

内联盒子负责内容

应用
正是由于“块级元素”具有换行特性,因此理论上它都可以配合clear属性来清除浮动带来的影响
.clear:after {
  content: "";
   display: table; // 也可以是block,或者是list-item
  clear: both;
}
为什么 list-item 元素会出现项目符号
list-item(“附加盒子”)名“标记盒子”;因为生成了一个附加的盒子,学名“标记盒子”(marker box),专门用来放圆点、数字这些项目符号
display:inline-block 或者 display:xx-xx 理解(容器盒子)
元素都两个盒子,外在盒子和内在盒子;
外在盒子:外在的“内联盒子”(inline)
内在盒子:内在的“块级容器盒子”(block)
深藏不露的 width:auto 充分利用可用空间

这些元素的宽度默认是100%于父级容器的

收缩与包裹
浮动、绝对定位、inline-block元素或table元素
收缩到最小
出现在table-layout为auto的表格中;当每一列空间都不够的时候,文字能断就断,但中文是随便断的,英文单词不能断
超出容器限制
内容很长的连续的英文和数字,或者内联元素被设置了white-space:nowrap
“内部尺寸”和“外部尺寸”
“内部尺寸”:尺寸由内部元素决定
“外部尺寸”:宽度由外部元素决定
外部尺寸与流体特性 正常流宽度

这些元素的宽度默认是100%于父级容器;display:block;

流动性
宽度100%显示,

margin/border/padding和content内容区域自动分配水平空间

格式化宽度
触发条件

“绝对定位模”(position属性值为absolute或fixed的元素中

表现
绝对定位元素的宽度表现是“包裹性”,宽度由内部尺寸决定
特殊

当left/top或top/bottom对立方位的属性值同时存在,元素的宽度表现为“格式化宽度”,

宽度大小相对于最近的具有定位特性(position属性值不是static)的祖先元素计算

div { position: absolute; left: 20px; right: 20px; } 
div { position: absolute; top: 20px; bottom: 20px; } // 但不知道为什么不行 
内部尺寸与流体特性 包裹性
除了“包裹”(max-width:100%),还有“自适应性(元素尺寸由内部元素决定,但永远小于“包含块”容器的尺寸)”

著名的“按钮”元素:极具代表性的inline-block元素

按钮上的文字个数比较有限,没机会换行