这些是读书笔记，记录你认为重要的或者不懂的知识点。第一章“流”：其实是CSS世界中的一种基本定位和布局机制。可以理解为现实世界中的一套物理规则。“流”与现实世界中的“水流”具有相同的表现。“流体布局”：指利用元素的“流动”特性实现的各种布局效果。Chapter22.1术语1.Attributes属性对应我们书写或说话时CSS的中文名称。例如：这个元素是99像素高。2.价值观大多与数字挂钩。一些常用的类型：整型值，比如z-index:1值，比如1.5percentageinline-height:1.5em,比如50%lengthvalueinpadding:50%,比如99px颜色值，比如#9993。KeywordsKeywords是指CSS中非常关键的词，这里的词指的是英文单词。4.变量目前在CSS中可以称为变量的还比较有限。5、长度单位CSS中的单位包括时间单位（如s、ms）和角度单位（如deg、rad等），最常见的自然是长度??单位（如px、em等）。).需要注意的是2%后面的百分号%不是长度单位！因为2%是一个完成的值，是一个整体，你肯定认为0.02是一个值，没错，2%也是一个值。+lengthunit=长度单位分为相对长度单位和绝对长度单位。1)相对长度单位。相对长度单位又分为相对字体长度单位和相对视口长度单位。相对字体长度单位如em和ex，还有CSS3新世界中的rem和ch（字符0的宽度）。相对视口长度单位，例如vh、vm、vmin和vmax。2）绝对长度单位：最常见的是px，还有pt、cm、mm、pc等。6、函数符号值以函数的形式指定（即括号中的那个），主要用于表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等。7.属性值属性冒号后的所有内容统称为属性值。例如1pxsolidrgb(0,0,0)可以称为一个属性值，它由“值+关键字+函数符号”组成。属性值也可以由单个内容组成。例如1forz-index:1也是一个属性值。8.声明属性名加上属性值就是声明，例如：color:transparent;9.声明块声明块是用花括号（{}）包裹的一系列声明，例如：{height:99px;color:transparent;}10选择器出现在规则或规则集中，后跟声明块，例如.voculary{height:99px;}11.选择器选择器是用来定位目标元素的东西。类选择器：指以点“.”开头的选择器。许多元素可以应用相同的类选择器。“课堂”为分享而生。ID选择器：“#”强制转换，权重相当高。ID通常指的是唯一元素。属性选择器：指包含[]的选择器，如[title]{}、[title="css-world"]{}、[title^="css-world"]{}、[title~="css-world"]{},[title$="css-world"]{}等伪类选择器：一般是指前面带英文冒号(:)的选择器，比如：first-child或者：last-child等伪元素选择器：两个连续冒号的选择器，如::first-line::first-letter、::after和::before。12.关系选择器关系选择器是指根据元素与其他元素的关系来选择元素的选择器。常用的符号有空格、>、~、+等，都是非常常用的选择器。后端选择器：选择所有符合规则的后代元素。空间串联。相邻背景选择器：只选择符合规则的子元素，忽略孙元素和曾孙元素，因为它也被称为“子选择器”。>连接。兄弟选择器：选择当前元素之后的所有兄弟元素。～连接。相邻兄弟选择器：只选择与当前元素相邻的常规兄弟元素。+连接。13.@rules@rules是指一些以@字符开头的规则，如@media、@font-face、@page或@support等。2.2“未定义的行为”当一个浏览器的行为不同或与其他浏览器的行为不同时，称为“未定义的行为”。Chapter3在功能上，块级负责结构，内联负责内容。3.1块级元素《块级元素》：块级元素，常见：。注意：“块级元素”和“显示：块；”不是一个概念。比如元素默认显示值为list-item，元素默认显示值为table，但它们都是“块级元素”，因为它们符合的基本特性块级元素，即一个水平流上只能单独显示一个元素，多个块级元素换行显示。正是因为“块级元素”具有换行特性，所以理论上可以配合clear属性来清除浮动的影响。每个元素由两个盒子（一个外盒和一个内盒，也称为“容器盒”）组成。外框负责元素是可以一行显示，还是只能换行显示；内盒负责宽度、高度和内部展示。取值为块元素的框实际上是由外部的“块级框”和内部的“块级容器框”组成，取值为inline-block的元素是由外部的“行内框”和一个外部的“块级容器盒”，值为inline的元素是一个内外兼具的“行内盒”。3.1.1为什么列表项元素有项目符号？所有块级元素都有一个主块级框，而列表项除此之外还有一个附加框。附加框，学名标记框（markerbox），专门用来放圆点、数字等项目符号。每个元素都有两个盒子，一个外盒子和一个内盒子。外框负责元素是可以一行显示，还是只能换行显示；内框负责宽度、高度和内容呈现。内盒在专业上称为“货柜盒”。根据显示属性值的不同，取值为block的元素的盒子实际上是由外部的“块级盒子”和内部的“块级容器盒”组成的，取值为inline-block的元素为由外部“内联框”组成。box”和内部的“块级容器盒”，值为inline的元素是一个内外的“行内盒”。width/height作用于内部盒，即“容器盒”。3.2具体width/height作用详解Width/height作用于内盒，也就是“容器盒”。3.2.1隐藏width:autoWidth:auto;4种不同宽度，充分利用可用空间。例子：这些元素的默认宽度是父容器的100%。收缩和包裹。典型的例子有浮动，绝对定位，inline-block元素，或者表格元素。为了便于理解，可以是称为“包裹”。收缩到最低限度。这最有可能出现在表格布局为自动的表格中。当每列空间不够时，文字能打多少就打多少，但中文单词可以随意打断，英文单词不能打断。超出容器限制。除非有明确的宽度相关设置，以上三种情况都不会主动超出父容器的宽度。还有一些特殊情况，比如white-space:nowrap。尺寸也分为内部尺寸和外部尺寸。以上4种情况，只有第一种，即
的默认宽度显示为100%，即“外部尺寸”，其余均为“内部尺寸”。而这仅有的“外在维度”，才是“流”的本质。一、外形尺寸及流体特性(1)正常流通宽度。没有宽度，没有图像，没有浮动。没有广度：更少的代码、更少的计算、更少的维护。所谓的流动性并不是显示100%宽度那么简单，而是一种在margin/border/padding和content内容区域之间自动分配水平空间的机制。(2)格式宽度。只出现在“绝对定位模型”中，即position属性值为absolute或fixed的元素中。默认情况下，绝对定位元素的宽度是“wrapped”的，宽度是由内部尺寸决定的，但是有一种情况是宽度是由外部尺寸决定的：当left的属性值/right或top/bottom同时存在时，元素的宽度表示为“格式化宽度”，其宽度是相对于最近的具有定位特性的祖先元素计算的（position属性值不是静态的）。2.内部尺寸和流体性质所谓内部尺寸简单的说就是元素的尺寸是由内部元素决定的，而不是由外部容器决定的。如何快速判断一个元素是否使用了“内部尺寸”：假设这个元素中没有内容，宽度为0，也就是应用的“内部尺寸”。它有3个表现形式：（1）封装。“包”不仅是“包”，更是“适”。所谓“自适应”是指元素的大小由内部元素决定，但总是小于“包含块”容器的大小（除非容器大小小于“首选最小宽度”元素）。换句话说，在“wrapping”元素中有一种max-width:100%覆盖的感觉。所以，对于一个元素来说，如果它的display属性值为inline-block，那么即使里面的内容再多，只要是普通的文本，宽度也不会超过容器。“包装”对实际开发有什么影响？页面上某个模块的文字内容是动态的，可能是几个词，也可能是一句话。然后，我希望当文字少的时候，显示在中间，当文字超过一行的时候，显示在左边。
文字内容-添加文字-添加文字.box{padding:10px;背景色：#cd0000；text-align:center;}.content{display:inline-block;text-align:left;}(2)首选最小宽度。指元素最适合的最小宽度。如果外层容器的宽度为240像素，假设宽度为0，那么里面的inline-block元素的宽度是多少？是0吗？不，在CSS的世界里，图片和文字比布局更重要，此时显示的宽度就是“首选最小宽度”。具体规则如下：东亚字符（中文）的最小宽度为每个汉字的宽度。西方字符的最小宽度由特定的连续英文字符单元决定。可替换元素（如图像）的最小宽度是元素内容本身的宽度。(3)最大宽度。是元素可以具有的最大宽度。如果里面没有块级元素或者块级元素没有设置宽度值，那么“max-width”实际上就是最大的连续行内框的宽度。（“连续行内框”是指一个或一堆元素都是行内级别的，中间没有任何换行标签
或其他块级元素。）3.2.2width的作用详解背景保证金总是透明的。width设置和性能不合理的现象可以概括为两点：1）失去流动性对于块元素，如果width:auto;，元素会像水一样充满整个容器，一旦设置了width的具体值，然后元素的移动性将被阻止。2）与现实世界表现不一致的麻烦。包括padding或border是由CSS性能导致的，它使元素的宽度变大。如何避免？其中一种方法是使用书写约束，例如使用“宽高分离原则”。3.2.3CSS流体布局下的宽高分离原则所谓宽高分离原则是指CSS中的width属性与影响宽度的padding/border（有时还有margin）属性不共存。1、为什么要分离宽高在前端领域，说到分离，一定要便于维护。比如风格和行为的分离，前后端分离，或者这里的“宽高分离”。2.可能面临的挑战“宽高分离”多加了一层标签，HTML的成本变高了。这是正确的。但实际上，如果不考虑替换元素，世界上绝大多数网页只需要一个宽度设置。但是，话又说回来，“无宽度”的网页布局需要深厚的CSS积累才能驾驭自如！！！有没有不需要计算，不需要额外嵌套标签的实现？没错，就是可以改变宽度效果细节的box-sizing属性。3.2.4修改宽/高box-sizing的功能细节1，box-sizingbox-sizing的作用顾名思义就是“盒子尺寸”。box-sizing实际支持如下：.box1{box-sizing:content-box;}/*默认值*/.box2{box-sizing:padding-box;}/*Firefox曾经支持*/.box3{box-sizing:border-box;}/*全栈支持*/.box4{box-sizing:margin-box;}/*从不支持*/width应用于内容框，所以margin，在border和padding元素之后，元素宽度=content+padding+border+margin。1、box-sizing的作用，顾名思义，就是“盒子大小”。2、为什么box-sizing不支持margin-boxmargin背景总是透明的。3、如何评估*{box-sizing:border-box}存在问题：1）这种方式容易产生不必要的消耗。应谨慎使用通配符，因为它们会选择所有标记元素。对于普通的内联元素（非图片等替换元素），无论box-sizing的值是多少，对其渲染性能没有影响。因此，这些元素没有不必要的消耗；同时，一些元素，比如searchtype搜索框默认的box-sizing是border-box，因此，*对于searchtype也是不必要的消耗。2）这种方法并不能解决所有问题。box-sizing不支持margin-box，只有当元素没有水平margin时，box-sizing才能真正实现免计算，“宽高分离”等策略可以彻底解决所有宽度计算问题3.2.6关于height:100%height和width之间的一个明显区别是对百分比单位的支持。对于width属性，即使父元素的宽度为auto，也支持其百分比值；但是，对于height属性，如果父元素的高度是auto，那么只要子元素在文档流中，它的百分比值就完全被忽略了。例如div{width:100%;//这是多余的height:100%;//这是无效的，这个div的高度始终为0，即使父级已填充内容。}//需要以下设置html,body{height:100%;}要使百分比高度值起作用，其父级必须具有有效的高度值！！（或者使用绝对定位）1.为什么height:100%无效规范说：如果没有显式指定包含块的高度（即高度由内容决定），元素没有绝对定位，计算的值为自动。要知道auto和百分比的计算，肯定不算：'auto'*100/100=NaN但是宽度的解释是：如果包含块的宽度取决于元素的宽度，那么结果layout在CSS2.1Defined中未定义。2.如果元素支持height:100%效果1）设置一个明确的高度值。2）使用绝对定位。这时候height:100%就会有一个计算值，即使祖先的身高计算为auto。需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的。不同的是，绝对定位的宽高百分比计算是相对于paddingbox的，也就是说paddingsize值会在That中计算，而非绝对定位的元素是相对于contentbox计算的。3.3CSSmin-width/max-width和min-height/max-height轶事3.3.1min-width/max-widthforfluids为了防止图片在移动端过大影响体验，有通常是以下max-width限制：img{max-width:100%;height:auto!important;}height:auto是必须的，否则如果原图有设置高度，当max-width生效时，图片会被Horizo??ntal压缩。将高度强制设置为auto，可以在保持图片原有比例的情况下，保证宽度不超过。3.3.3超越!important，超越maximum在CSS世界中，min-width/max-width和min-height/max-height属性之间，以及width和高度。这套规则可以用更通俗的一句话来概括：超越！重要的，超越最伟大的。1.超越！重要的超越！important的意思是max-width会覆盖width，这种覆盖不是普通覆盖，而是超覆盖。它涵盖到什么程度？max-width>!important>直接在元素的样式属性中设置CSS声明。2.Exceedingthemaximum超出最大值是指min-width覆盖了max-width。3.4内联元素3.4.1哪些元素是内联元素1、从定义上，首先要明白这一点：“内联元素”中的“内联”特指“外部框”和“显示为内联的元素”不是一个概念！inline-block和inline-table都是“行内元素”，因为它们的“外框”是行内框。2、从性能上看，典型的特点是可以与文字一行显示。有一个疑问：浮动元素好像也可以和文字同级显示。难道浮动元素也处于克制的水平？不是，实际上浮动元素和后面的文字并没有显示在一行中，浮动元素已经在文档流之外了。证据是当后面有足够的文本时，文本不会在浮动元素下方，而是继续在后面。这意味着浮动根元素和后面的文本不在同一行，而是站在一起。事实是。浮动元素生成“块框”。3.4.2内联世界的深入基础——内联盒模型1）内容区。内容区域是指围绕文本的不可见框。它的大小只受角色本身的特性控制。它本质上是一个字符框；但是有些元素，比如图片之类的替换元素，显然不是文本，也没有字符框这种东西。类，所以对于这些元素，内容区可以看作是元素本身。2)内嵌框。行内框并不是以块的形式显示内容，而是以一行的形式显示。这里的“行内框”其实指的是元素的“外框”，用来判断元素是内向还是块级。盒子又可以细分为“行内盒”和“匿名行内盒”两种：如果外部包含行内标签（、和等），则属于“行内盒”（用实线框标示）；如果是纯文本，则属于“匿名内联框”（用虚线框标记）。3）线框框。每一行都是一个“行框”（用实线框标示），每个“行框”由一个“行内框”组成。4）包含框标签是一个“包含框”（用实线框标示），由“行框boxes”逐行组成。3.4.3Ghostblanknode“Ghostblanknode”是inlinebox模型中一个非常重要的概念。具体是指：在HTML5文档声明中，内联元素的所有解析和渲染表现，就像每个行框前面都有一个“空白节点”。这个“空白节点”始终是透明的，不占用任何宽度，无法通过脚本看到或获取。它就像一个幽灵，但它确实存在并且表现得像一个文本节点。注意这里有一个前提，文档声明必须是HTML5文档声明（）。这个“ghostblanknode”实际上在规范中有提到。“鬼空节点”其实是一个盒子，只不过是一个假想的盒子，名字叫“支柱”，中文直译为“柱子”。每个“行框”前面都有一个宽度为0的行内框，同时具有元素的字体和行高属性。
