css初探知识总结

Bertha 。 2022-07-15 13:00 215阅读 0赞

# css初探知识总结 #

css(层叠样式表)用来规定HTML文档的呈现形式。  
主要记录了自己新接触的属性和之前并没关注的属性。包括：css的长度和vertical。

*  css的长度  
    css的长度分为绝对长度和相对长度。  
    1：css支持的绝对长度有五个  
    in–英寸 / cm–厘米 / mm–毫米  
    pt–磅(1磅等于1/72英寸) / pc–pica(1pica等于12磅)  
    如果事先知道内容呈现的方式（如供打印的文档），绝对单位很有用处。  
    2：相对长度 相对长度的规定和实现都比绝对长度更复杂，相对单位的测量需要依托其他类型的单位。  
    五款主流浏览器支持的相对单位：  
    em–与元素字号挂钩 / ex–与元素字体的“x高度”挂钩  
    rem–与根元素的字号挂钩 / px–css像素（假定显示设备的分辨率是961dpi）  
    %–另一属性的值的百分比  
    3：font-size中对应height中em的是rem。  
    4：使用百分比单位回遇到两个麻烦。一是并非所有的属性都能用百分比。二是对于能用百分比单位的属性，那个百分比挂钩的其他属性各不相同。  
    5：calc–算式作值

width:calc(80% - 20px);
    width:-moz-calc(80% - 20px);
    width:-webkit-calc(80% - 20px);

算式包含在关键字calc之后的括号中，在其中可以混合使用各种单位进行基本算数运算。  
calc()的运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：  
–使用“+”、“-”、“\*” 和 “/”四则运算；  
–可以使用百分比、px、em、rem等单位；  
–可以混合使用各种单位进行计算；  
–表达式中有“+”和“-”时，其前后必须要有空格，如”widht: –calc(12%+5em)”这种没有空格的写法是错误的；  
–表达式中有“\*”和“/”时，其前后可以没有空格，但建议留有空格。  
–浏览器的兼容性  
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。

*  vertical-align ——->垂直对齐  
    在制作搜索框的时候，发现了一个问题，本来在chrome里好好的，到了ie里却有了瑕疵。  
    chrome:  
    ![chrome][]  
    IE  
    ![ie][]  
    部分代码如下：

紧急求救后获得了一个单词 ——“vertical”。  
利用sublime提示找到了：vertical-align 。  
百度后找到了参数：  
vertical-align:  
长度：通过距离升高（正值）或降低（负值）元素。’0cm’等同于’baseline’。  
百分值%：通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。’0%’等同于’baseline’  
baseline 默认：元素的基线与父元素的基线对齐。  
sub：降低元素的基线到父元素合适的下标位置。  
super：升高元素的基线到父元素合适的上标位置。  
top：把元素的顶端与行中最高元素的顶端对齐。  
text-top：把元素的顶端与父元素内容区域的顶端对齐。  
middle：元素的中垂点与父元素的基线加1/2父元素中字母x的高度 对齐。  
bottom：把元素的顶端与行中最高元素的底端对齐  
text-bottom：把元素的底端与父元素内容区域的底端对齐。  
inherit：采用父元素相关属性的相同的指定值。

然后根据参数设置，为元素增加了vertical-align:top；IE就能正常显示了。  
![这里写图片描述][20161117155733188]

[chrome]: /images/20220715/a910c5314dfb4de4ac81c09a7c198fe9.png
[ie]: /images/20220715/134514012bb64e55bff767849277e3e5.png
[20161117155733188]: /images/20220715/6b48f8141f74474fb77eec80439dd689.png