《CSS世界》笔记

275 阅读2分钟

1.CSS诞生是解决什么问题?

为图文信息展示服务。

2.CSS如何在众多样式表中脱颖而出?

层叠特性,流特性

3.CSS长度单位

(1)相对长度

  • 相对字体:em,ex,rem,ch

m仅仅是字体大小。ex与字体的x-高度有关的大小。rem根元素的em大小,html默认font-size:16px。ch 字符0的宽度。

  • 相对视区:vh,vw,vmin,vmax

(2)绝对长度:px,pt,cm,mm,pc

px屏幕像素。

4.未定义行为 定义、原因

定义:当某个浏览器出现与其他浏览器不一样的样式表现。

原因:W3C规范中并没有对某种场景作出具体的约束。

5.li前为什么会有『项目符号』即『标记盒子 marker box』?

知识点:li --> display:list-item;

原因:marker box用于容纳项目符号

6.display理解

元素分为 块级 和 内联。

中间的不男不女的,就是 inline-block。

理解:box-sizing: content-box(默认值)。可以理解为 有两个盒子,外在盒子和内在盒子(width,height作用其上。流也是表现在内在盒子上的。)。

块级元素:block。可以理解为block-flow。

内在盒子表现特性为 流动性。所以flow更恰当,而不是block。

内联元素:inline。可以理解为inline-inline

7.块级元素的流表现

不可以理解为width:100%,这个是不准确的。

流动性是magin,border,padding,content自动分配水平空间的机制。

根据流动性,我们应遵循『无宽度,无图片,无浮动』。

8. 何为格式化宽度?

在position:absolute/fixed中,绝对定位元素的宽度即可以由内部尺寸决定,也可以由外部尺寸决定。

外部尺寸决定:left/right和 top/bottom存在其中某一对时,会产生格式化宽度,绝对定位元素的宽度大小相对于最近的具有定位特性(position不是static)的祖先元素计算。

格式化宽度具有流动性,自动分配水平垂直空间。也具有包裹性,可以自动换行。

文字少则水平垂直居中,文字多则左对齐。利用『包裹性』。

<style>
        .a{
            display: block;
            width: 100px;
            height: 100px;
            margin: 10px;
            padding:5px;
        }
        .box{
            text-align: center;
        }
        .content{
            display: inline-block;
            text-align: left;
        }
    </style>
</body>
<body>
    <div class="box">
        <span class="content">都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的都是收费的</span>
    </div>
</body>

9.首选最小宽度

可以实现 『凹凸』

10.最大宽度

white-space: no-wrap; 。连续内联盒子的宽度

11.margin背景色永远是透明的

12.CSS流体布局下的宽度分离原则

width不能与padding/border共存。