CSS에서 흔히 혼동되는 속성과 값의 차이점 (1)

CSS에는 많은 속성이 있으며 각 속성에는 수천 가지의 조합이 있습니다. 다양한 속성의 조합으로 다양한 스타일을 생성할 수도 있습니다. CSS는 정말 아름다운 스타일 디자인 언어입니다. 업무상 흔히 혼동하는 속성과 값을 정리하면 다음과 같습니다.

1. 단위가 있는 경우와 없는 경우의 줄 높이 차이:

행 높이가 상속될 수 있다는 것을 알고 있습니다. 상위 요소의 line-height 값에 단위가 없는 경우 하위 요소는 자체 글꼴 크기를 사용하여 줄 높이를 계산합니다(자식 요소의 line-height = 상위 요소의 line-height 값 * 하위 요소의 글꼴 크기). 상위 요소의 줄 높이 값에 단위가 있는 경우 상위 요소는 먼저 자체 글꼴 크기를 기준으로 줄 높이를 계산하고(절대 단위가 px인 경우 계산이 필요하지 않음) 하위 요소가 이를 상속합니다(자식 요소의 줄 높이) height = 상위 요소의 줄 높이).

(1) 상위 요소의 행 높이 값에 단위가 있는 경우:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>当哈罗德站在斑马线前按下行人按钮时——如果一直是她(莫琳，哈罗德的妻子)在做哈罗德该做的事，那么——“我是谁？”他就这样走过了邮局，连停都没有停下。原本很短的一段路由于内心的呼唤便再也无法停住脚步。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>一路上我记起了很多东西，很多我都没有意识到自己忘了的回忆，有戴维的，还有你和我的。我还记起了我的母亲，有些回忆很不容易，但大部分都很美。我很害怕，我怕有一天，或许很快，我就会把他们弄丢，这一次永远都找不回来了。”哈罗德泪流满面.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5em</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

위와 같이: 상위 요소의 글꼴 크기가 12px, 줄 높이가 1.5em, 하위 요소의 글꼴 크기가 22px인 경우 표시 효과는 다음과 같습니다.

위의 예에서 p의 줄 높이는 18px입니다. 상위 요소 div의 줄 높이인 1.5em = 12 * 1.5 = 18px를 상속하고 자체 글꼴 크기가 22px이기 때문입니다. 압착효과다. 또한, 텍스트가 차지하는 높이는 글꼴 크기와 직접적인 관계가 없지만, 텍스트가 차지하는 너비는 글꼴 크기의 값과 동일합니다.

(2) 상위 요소의 행 높이 값에 단위가 없는 경우:

<span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你以为走路是世界上最简单的事呢？只不过是把一只脚放到另一只脚前面。但我一直很惊讶这些原本是很本能的事情实际上做起来有多困难。而吃，吃也是一样的。说话也是。还有爱。这些东西都可以很难。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>我们大家都以为哈罗德徒步是因为很多年前他与奎妮有一段罗曼史。但那不是事实。哈罗德走这条路，是因为奎妮救了他，而他从来没有说过一句谢谢。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">body </span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #efefef</span>; }<span style="color: #800000;">
div </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;
}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 22px</span>; }

위와 같이: 상위 요소의 글꼴 크기가 12px, 줄 높이가 1.5, 하위 요소의 글꼴 크기가 22px인 경우 표시 효과는 다음과 같습니다.

위의 예에서 p의 줄 높이는 33px입니다. 상위 요소 div의 줄 높이 1.5를 상속하고 자체 글꼴 크기가 22px이므로 자체 줄 높이 값은 22*입니다. ​​1.5 = 33px 이면 첫 번째 경우에는 압착 효과가 발생하지 않습니다.

2. 디스플레이(디스플레이 모드)의 값은 사용 환경과 인라인 블록, 테이블, 플렉스의 차이입니다:

(1) 디스플레이: 인라인 블록;

요소가 디스플레이: 블록;에 표시될 때 너비를 정의하지 않는 효과는 너비를 다음과 같이 정의하는 것과 동일합니다. 너비: 100% 또는 너비: 자동; 상위 요소를 상속합니다. 너비 값은 100%(즉, 상위 요소와 동일한 너비)로 정의됩니다. 하지만 실제 프로젝트에서는 너비가 100%일 필요는 없지만 요소의 너비, 높이(또는 패딩) 및 기타 속성을 설정하고 싶을 때도 있습니다. 이때는 display:inline-block;

을 사용해야 합니다.

dom은 다음과 같습니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>成都王府井百货<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>成都王府井购物中心是北京王府井百货(集团)斥资4.5亿元打造的第一个购物中心项目。购物中心集购物、餐饮、娱乐、服务、文化、教育等多项功能于一身，建筑面积约10万平方米，共计5层营业。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="查看详情"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="look-details"</span><span style="color: #0000ff;">></span>查看详情<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.text > div </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 1.2rem</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.text a.look-details </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> .5rem 1rem</span>;<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> .8rem</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #e04728</span>;
}

위 상세보기 링크의 경우, display:inline-block;으로 정의하면 너비와 높이를 설정하지 않고 패딩만 설정하면 원하는 높이와 너비를 얻을 수 있습니다. 표시 효과는 다음과 같습니다.

그리고 상위 요소에 text-align: center;를 설정하면 수평 중앙 정렬이 가능합니다.

display: inline-block;으로 요소를 설정합니다. 이는 display: block;과 display: inline;의 효과를 모두 갖습니다. 높이를 설정하고 중앙에 배치하며 너비가 100%가 되는 것을 방지할 수 있습니다.

확장:

상위 요소 text-align: center; 하위 요소 display: inline-block은 일반적으로 뉴스 목록 페이지와 같은 페이지 매김 효과에 사용됩니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pagination"</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;"> 当前页面时，给 li 添加 active 类 </span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Previous"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&laquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="active"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>1<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>4<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>5<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> aria-label</span><span style="color: #0000ff;">="Next"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;">&raquo;</span><span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination:before,
.pagination:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>;
}<span style="color: #800000;">
.pagination:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }<span style="color: #800000;">
.pagination </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.pagination > li </span>{<span style="color: #ff0000;">            
    float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}<span style="color: #800000;">
.pagination > li > a </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> -1px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">消除两个 a 在一起时引起的双倍左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 6px 12px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px solid #ddd</span>;
}<span style="color: #800000;">
.pagination > li:first-child > a </span>{<span style="color: #ff0000;">
    margin-left</span>:<span style="color: #0000ff;"> 0</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">第一个 a 不需要消除左外边距</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-top-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-left-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li:last-child > a </span>{<span style="color: #ff0000;">
    border-top-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;<span style="color: #ff0000;">
    border-bottom-right-radius</span>:<span style="color: #0000ff;"> 4px</span>;
}<span style="color: #800000;">
.pagination > li > a:hover,
.pagination > li > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #23527c</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #ddd</span>;
}<span style="color: #800000;">
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus </span>{<span style="color: #ff0000;">
    z-index</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> default</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">当前这一页，让鼠标悬浮在 a 元素上时，显示为默认光标样式，给人感觉不能点击的效果</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> #337ab7</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> #337ab7</span>;
}

(2) 디스플레이: 테이블;

첫 번째 사례의 확장에서는 display: table을 사용했습니다. 이 요소는 앞뒤에 줄 바꿈이 있는 블록 수준 테이블로 표시됩니다. 테이블.

플로팅 요구사항을 클리어할 때 주로 사용됩니다. 요소에서 부동 소수점을 지워야 하는 이유는 정의된 높이가 없지만 하위 요소에 부동 소수점이 있기 때문입니다.

위 예시의 확장으로 ul.pagenation은 높이를 정의하지 않고 하위 요소에 float가 있으므로 float를 지워야 합니다. 플로트 클리어 방법은 다음과 같습니다.

<span style="color: #800000;">.parent-box:before,
.parent-box:after </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ""</span>; /*伪元素 before 和 after 的样式里必须添加 content 属性才会起作用*/
}<span style="color: #800000;">
.parent-box:after </span>{<span style="color: #ff0000;"> clear</span>:<span style="color: #0000ff;"> both</span>; }

这种清除浮动的方式， ie8 不支持。如果需要支持 ie6 - ie8，需要使用下面这种复杂一些的样式(这样的写法暂时不理解)：

<span style="color: #800000;">.clearfix::after </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> ” ”</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    visibility</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
.clearfix </span>{<span style="color: #ff0000;"> zoom</span>:<span style="color: #0000ff;"> 1</span>; }

(3). display: flex;

2009年，W3C 提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

菜鸟教程http://www.runoob.com/w3cnote/flex-grammar.html 中说得非常详细。

内容很多，但是我们平时一般会用到的就三个属性，display: flex; align-items: center; justify-content: center; 这三个属性都是用在父元素中，display: flex; 定义子元素的布局方式为弹性伸缩布局，align-items: center; 使子元素垂直居中，justify-content: center; 使子元素水平居中。