[CSS 노트 10] CSS 스타일 설정 팁
- 黄舟원래의
- 2016-12-29 14:02:291077검색
1. 가로 중심 설정: 인라인 요소
실제 작업에서는 가로 중심을 설정해야 하는 경우가 많습니다. 예를 들어 기사 제목은 일반적으로 화면에 가로로 표시됩니다. 센터.
여기에는 두 가지 상황이 있습니다. 인라인 요소 또는 블록 요소는 고정 너비 블록 요소와 가변 너비 블록 요소로 나뉩니다. 오늘은 먼저 인라인 요소를 가로 중앙에 배치하는 방법을 알아 보겠습니다.
설정된 요소가 텍스트나 그림과 같은 인라인 요소인 경우 text-align:center를 상위 요소로 설정하여 가로 가운데 정렬이 이루어집니다. (상위 요소와 하위 요소: 다음 html 코드와 같이 div는 "부모 컨테이너에 가로로 중앙에 표시하고 싶습니다."라는 텍스트의 상위 요소입니다. 반대로 이 텍스트는 div의 하위 요소입니다.) 다음 코드:
html 코드:
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style> 2. 가로 중심 설정: 고정폭 블록 요소
설정할 요소가 블록 요소인 경우 텍스트를 사용하여- align: center는 작동하지 않습니다. 고정 너비 블록 요소와 가변 너비 블록 요소라는 두 가지 상황도 있습니다.
이 섹션에서는 먼저 고정 너비 블록 요소에 대해 설명하겠습니다. (고정 너비 블록 요소: 블록 요소의 너비는 고정된 값입니다.)
고정 너비와 블록의 두 가지 조건을 충족하는 요소는 "왼쪽 및 오른쪽 여백" 값을 ""로 설정하면 가능합니다. 자동" 중심. div 블록 요소를 가로 중앙에 설정하는 예를 살펴보겠습니다.
html 코드:
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>다음과 같이 작성할 수도 있습니다.
margin-left:auto; margin-right:auto;
참고 : "상하 여백" 요소를 마음대로 설정할 수 있습니다.
3. 수평 센터링 개요: 가변 너비 블록 요소의 방법 1
실제 작업에서는 "가변 너비의 블록 모양 요소"에 대해 중심을 설정해야 할 필요성에 직면하게 됩니다. , 웹 페이지 페이징 탐색과 같은 페이징 횟수는 불확실하므로 너비를 설정하여 유연성을 제한할 수 없습니다. (가변폭 블록 요소: 블록 요소의 폭은 고정되어 있지 않습니다.)
가변 폭을 갖는 블록 요소를 센터링하는 방법에는 세 가지가 있습니다. (현재 이 세 가지 방법이 많이 사용됩니다.)
1. 테이블 태그 추가
2. 표시 설정: 인라인 방법: 첫 번째 방법과 유사하게 표시 유형을 인라인 요소로 설정하고 가변 너비 요소의 속성을 설정합니다.
3. 상대 및 왼쪽:50 %: 상대 위치 지정을 사용하여 요소를 왼쪽으로 50% 이동합니다. 즉, 중앙 정렬 목적을 달성합니다.
이 섹션에서는 첫 번째 방법에 대해 설명합니다.
결합하기 위해 방법 1을 선택하는 이유는 무엇입니까? 테이블 태그는 테이블 태그의 길이 적응성을 사용합니다. 즉, 길이를 정의하지 않고 상위 요소 본문의 길이를 기본값으로 사용하지 않습니다. 테이블의 길이는 테이블 태그에 따라 결정됩니다. 그 안의 텍스트 길이에 따라) 고정 너비 블록 요소로 간주할 수 있으며, 고정 너비 블록 모양 여백을 사용하여 가로 중앙에 배치합니다.
1단계: 설정해야 하는 중앙 요소 외부에 테이블 태그(92cee25da80fac49f6fb6eec5fd2c22a, a34de1251f0d9fe1e645927f19a896e8, b6c5a531a458a2e790c1fd6421739d1c 포함)를 추가합니다.
2단계: 이 표의 "왼쪽 및 오른쪽 여백 중앙"을 설정합니다(고정 너비 블록 요소와 동일한 방법).
예:
html 코드:
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css 코드:
<style> table{ border:1px solid; margin:0 auto; } </style> 4. 가로 중심 정렬 요약: 변수 width 블록 요소 방법 2
이전 섹션에서 언급한 테이블 태그를 삽입하여 가로로 가변 너비의 블록 요소를 중앙에 배치할 수 있는 것 외에도 이 섹션에서는 이 효과를 얻기 위해 요소의 표시 유형을 For로 변경하는 두 번째 방법을 소개합니다. 인라인 요소의 경우 해당 속성을 사용하여 직접 설정하세요.
두 번째 방법: 블록 수준 요소의 표시 유형을 인라인 유형으로 변경(인라인 요소 표시로 설정)한 다음 text-align:center를 사용하여 센터링 효과를 얻습니다. 다음 예:
html 코드:
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li><li><a href="#">3</a></li> </ul> </div> </body>
css 코드:
<style>
.container{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/
.container li{ margin-right:8px; display:inline; } 3
</style>첫 번째 방법에 비해 이 방법의 장점은 추가할 필요가 없습니다. 의미 태그는 없지만 몇 가지 문제도 있습니다. 블록 요소의 표시 유형을 인라인으로 변경하여 인라인 요소로 전환하므로 길이 값 설정과 같은 일부 기능이 손실됩니다.
3. 가로 가운데 정렬 요약: 가변 너비 블록 요소에 대한 방법 3
이전 두 섹션에서 언급한 테이블 태그를 삽입하고 요소의 표시 유형을 변경하는 것 외에도 다음을 수행할 수 있습니다. 가변 너비 블록 요소 이 섹션에서는 이 효과를 달성하기 위한 수평 센터링 외에도 부동 및 상대 위치 지정을 설정하여 달성되는 세 번째 방법을 소개합니다.
방법 3: 상위 요소에 대해 float를 설정한 다음 상위 요소에 대해 position:relative 및 left:50%를 설정하고 하위 요소에 대해 position:relative 및 left: -50%를 설정하여 수평 중심 맞추기를 달성합니다. .
이렇게 이해할 수 있습니다. ul의 상위 레이어를 나누는 ul 레이어(즉, 아래 예의 div 레이어)의 상위 레이어 중앙에 이등분선이 있다고 가정합니다. CSS 코드는 ul 레이어의 가장 왼쪽 끝을 ul 레이어의 상위 레이어(div 레이어)의 이등분선과 정렬하는 반면, li 레이어의 CSS 코드는 ul 레이어의 가장 왼쪽 끝(div 레이어의 이등분선이기도 함)에 li 레이어를 정렬하여 li 레이어를 중앙에 배치합니다.
코드는 다음과 같습니다.
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li><li><a href="#">3</a></li> </ul> </div> </body>
css 코드:
<style>
.container{ float:left; position:relative; left:50% }
.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; }
.container li{ float:left; display:inline; margin-right:8px; }
</style>이 세 가지 방법은 매우 널리 사용되며 각각 고유한 장점이 있으며 단점은 특정 상황에 따라 사용할 수 있는 방법을 구체적으로 선택하십시오.
六、垂直居中：父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container"> hi,imooc! </div>
css代码：
<style> .container{ height:100px; line-height:100px; background:#999; } </style>七、垂直居中：父元素高度确定的多行文本一
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码：
table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
八、垂直居中：父元素高度确定的多行文本二
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>
css代码：
<style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
九、隐性修改display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{ position:absolute; width:200px; background:#ccc; } </style> 以上就是【CSS笔记十】CSS样式设置小技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！