宽度的英文
-首次公开发行股票
2023年2月15日发(作者：培训小结)《css世界》的读书笔记
第三章流、元素与基本尺⼨
1.、等元素在使⽤键盘进⾏Tab键切换时可以被选中，即获取到焦点，表现为虚框或者外发光，这类元素为焦点元素；⾮焦点
元素、等没有设置tabindex属性，即⽆法被tab键获取。在ie6/7浏览器下，⾮焦点元素对:active置若罔闻。(这⾥涉及到
ie6，7的兼容性)
浏览器不⽀持伪元素的display值为list-item，即：:before、:after等伪元素。。。
:auto的4种不同宽度表现：（1）充分利⽤可⽤空间。即、默认宽度是⽗容器的宽度。（2）收缩与包裹。即、宽度等于内容的宽
度，⽽不是⽗容器的宽度。（3）收缩的最⼩。即：数字与英⽂单词不会像汉字⼀样轻易断开⽽跑到下⼀⾏，造成的效果如下图所⽰：
不过遇到必须要换⾏的情况可以使⽤word-break:break-all;只对英⽂起作⽤，以字母作为换⾏依据和word-
wrap:break-word;只对英⽂起作⽤，以单词作为换⾏依据来实现强制换⾏。（4）超出容器限制。和第三种情况⼀样，也可以通过设置white-space:nowrap强制
不换⾏。
5.“鑫三⽆准则”，即“⽆宽度，⽆图⽚，⽆浮动”，⽆宽度是为了保持“外部尺⼨”的流动性。
6.包裹性拥有⾃适应性，指的是元素尺⼨由内部元素决定，但永远⼩于“包含块”容器的尺⼨（除⾮容器尺⼨⼩于元素的“⾸选最⼩宽度”）。按钮是包裹性最好的
例⼦，也是极具代表性的inline-block元素。其中标签按钮会⾃动换⾏，标签按钮，默认white-space:pre,是不会换⾏的，需要将pre值重置为默
认的normal。除了inline-block元素，浮动元素以及绝对定位元素都具有包裹性，均有类似的智能宽度⾏为。
7.⾸选最⼩宽度，指的是元素最适合的最⼩宽度。当外部容器宽度为0时，内部元素的宽度分中⽂与英⽂两种情况，中⽂时最⼩宽度为每个汉字的宽度，英⽂时
宽度由特定的连续的英⽂字符单元决定，⼀般会终⽌于空格、短横线、问号以及其他⾮英⽂字符等。
8.宽度分离原则。就是css中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存。把它们分离开来，width独占⼀层标签，⽽
padding，border，margin利⽤流动性在内部⾃适应呈现。
-width和max-height的初始值为none，min-width/height的初始值为auto。
10.超越!important指的是max-width会覆盖width。超越最⼤指的是min-width覆盖max-width，此规则发⽣在min-width和max-width冲突的时候。
11.任意⾼度元素的展开收起动画技术。很多时候height的值是不固定的（即动态的），因此height使⽤的值是默认的auto，auto是个关键字值，并⾮数值，正如
height:100%的100%⽆法和auto相计算⼀样，从0px到auto也是⽆法计算的，因此⽆法形成过渡或动画效果。解决⽅法：在展开的css（即：.）
中的height:auto换成max-height:666px;并不⼀定要666，只需要设定为保证⽐展开内容⾼度⼤的值就可以。因为max-height值⽐height计算值⼤的时候，元素
的⾼度就是height属性的计算⾼度，也就是height:auto时候的⾼度值。这样，⼀个⾼度不定的任意元素的展开动画效果就实现了。有⼀点要注意，不要把max-
height的值设置太⼤，这样页⾯展开关闭会有延迟。
12.如何辨别内联元素。（1）从定义看：内联元素的内联特指“外在盒⼦”，和“display为inline的元素”不是⼀个概念！inline-block和inline-table都是“内联元素”，
因为他们的“外在盒⼦”都是内联盒⼦，所以即使它们的“内在盒⼦”分别为block和table等块状元素依然为内联元素。button按钮元素也是内联元素，因为其display
默认值是inline-block；img图⽚元素也是内联元素，其display默认值是inline。（2）从表现看：“内联元素”的典型特征就是可以和⽂字在⼀⾏显⽰。因此，⽂字
是内联元素，图⽚是内联元素，按钮是内联元素，原⽣表单控件等都是内联元素。