CSS 시작에 대해 자주 묻는 질문-HTML 튜토리얼-php.cn

이전 작성: 이 글에서는 CSS의 세 가지 주요 특징인 계단식 배열, 상속, 우선 순위를 간략하게 소개합니다. 마진, 패딩, 플로팅 및 여러 지식 포인트 배치도 가능합니다. 레벨에 국한되어 심도 있게 다루지는 않습니다. 학습 요약용으로만 사용됩니다.

1. 세 가지 특징

1) 계단식: 스타일이 동일한 태그 및 동일한 가중치와 충돌하는 경우 이후 스타일이 이전 스타일을 덮어씁니다.

2) 상속: 상위 요소의 스타일을 설정할 때 에 기본적으로 스타일이 없으면 하위 요소는 상위 요소의 스타일에 영향을 받습니다. 너비와 높이는 상속될 수 없습니다.

상속 가능한 속성 :
◇텍스트 색상 상속 가능 color
◇텍스트 관련 속성 상속 가능
◆줄 높이(line-height) 상속 가능
◆text-align

특수 상황:

태그는 기본적으로 상위 요소의 색상에 영향을 받지 않습니다.

nav를 만들 때 li에 대한 태그 색상을 설정하는 것은 브라우저의 기본 스타일에 영향을 받기 때문에 작동하지 않는 것이 일반적입니다 color: -webkit-link .

h1-h6 기본 단위는 em입니다. 특정 크기는 제품 작동

이 필요합니다.

3) 우선순위:

태그 선택기<클래스 선택기선택기< 인라인 스타일 <중요

2, 여백 기능:

1) 세로 여백 병합(더 큰 쪽을 선택)

2) 세로 여백 붕괴?

해결책:

상위 요소에 테두리를 설정합니다.
overflow:hidden을 상위 요소로 설정(bfc 트리거)

3, 패딩값의 특수성

블록 수준 요소에서 기본 하위 요소에 너비가 설정되지 않은 경우 현재 하위 요소의 패딩 값을 설정해도 현재 하위 상자의 너비에는 영향을 미치지 않습니다. ("상속된" 상자 패딩 값은 영향을 받지 않습니다)

4, 플로트

왜 float를 사용하나요?

그림 텍스트 감싸기 효과 디자인으로 시작하여 현재는 레이아웃 및 네비게이션 제작에 주로 사용됩니다

수레는 언제 청소해야 하나요?
1. 상위 컨테이너에 높이가 설정되지 않았습니다.
2. 상위 컨테이너의 모든 하위 요소가 부동 소수점으로 설정되었습니다.

수레를 청소하는 방법은 무엇인가요? (4가지 공통 요소는 다음과 같습니다.)
1. 클리어: 둘 다
2. 오버플로 설정: 상위 요소에 대해 숨김(상위 요소가 위치하지 않음)
3. 의사 요소 사용

.clearfix 
:after{
content: "";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

로그인 후 복사

4,디스플레이: 테이블;

.clearfix:before,
.clearfix:after{
clear: both;
display: table;
/*表格模式*/
}
.clearfix{
  zoom: 1;
  /*兼容ie6*/
}

로그인 후 복사

定位：

1，静态（static）标准流下的显示方式，可转换成其他定位方式
2，绝对（absolute）：
1）标准流下的盒子，设置绝对定位以body 为参照
2）除了父盒子设置static ，其他定位方式，子盒子以父盒子为参照
3）绝对定位的元素脱标
4）实现模式转换的效果
使用场景：1，盒子压盒子 2，绝对定位可以使用margin padding
3，相对（relative）：相对自己作为参照，不会脱标
使用子绝父相
4，固定（fixed）：
1）以body标签可视区域作为参照
2）脱标
3）实现模式转换的效果
层级：
1）定位的元素有层级关系
2）只有给定位的元素才能设z-index
特点：
1）元素设置定位后有个默认的z-index ：auto（除去static）
2）z-index 值相同元素后来居上
3）z-index 值越大当前的元素层级越高
4）父元素的z-index值越大当前的元素层级越高简单

绝对定位如何居中？

◆通过设置left:50% ; 父元素宽度的一半
◆设置margin-left: -元素自己宽度一半；

双飞翼布局

目的：加载文档时先加载中间区域，再加载左右两边

特点：两侧固定，中间自适应

	<div class="container">
		<div class="columns mainbox">
			<div class="inner">
				我看见个会计课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个会计课件发卡
				机看见看见我看见个会计 课件发卡机看见看见我看见个会计课件发卡机看见看见我看见个
				会计课件发卡机看见看见我看见个会计课件发卡机看见看见
			</div>

		</div>
		<div class="columns leftbox"></div>
		<div class="columns rightbox"></div>
	</div>

로그인 후 복사

<span style="color: #008080"> 1</span> <span style="color: #800000"><style>
</span><span style="color: #008080"> 2</span> <span style="color: #800000">        body </span>{
<span style="color: #008080"> 3</span> <span style="color: #ff0000">            min-width</span>:<span style="color: #0000ff"> 1000px</span>;
<span style="color: #008080"> 4</span>         }
<span style="color: #008080"> 5</span>         
<span style="color: #008080"> 6</span> <span style="color: #800000">        .columns </span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">            float</span>:<span style="color: #0000ff"> left</span>;
<span style="color: #008080"> 9</span>         }
<span style="color: #008080">10</span>         
<span style="color: #008080">11</span> <span style="color: #800000">        .container </span>{
<span style="color: #008080">12</span> <span style="color: #ff0000">            height</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">            border</span>:<span style="color: #0000ff"> 1px solid red</span>;
<span style="color: #008080">14</span>         }
<span style="color: #008080">15</span>         
<span style="color: #008080">16</span> <span style="color: #800000">        .mainbox </span>{
<span style="color: #008080">17</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 100%</span>;
<span style="color: #008080">18</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> yellow</span>;
<span style="color: #008080">19</span>         }
<span style="color: #008080">20</span>         
<span style="color: #008080">21</span> <span style="color: #800000">        .inner </span>{
<span style="color: #008080">22</span> <span style="color: #ff0000">            margin</span>:<span style="color: #0000ff"> 0 300px 0 250px</span>;
<span style="color: #008080">23</span> <span style="color: #ff0000">            word-break</span>:<span style="color: #0000ff"> break-all</span>;
<span style="color: #008080">24</span>         }
<span style="color: #008080">25</span>         
<span style="color: #008080">26</span> <span style="color: #800000">        .leftbox </span>{
<span style="color: #008080">27</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 250px</span>;
<span style="color: #008080">28</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> red</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -100%</span>;
<span style="color: #008080">30</span>         }
<span style="color: #008080">31</span>         
<span style="color: #008080">32</span> <span style="color: #800000">        .rightbox </span>{
<span style="color: #008080">33</span> <span style="color: #ff0000">            width</span>:<span style="color: #0000ff"> 300px</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">            background</span>:<span style="color: #0000ff"> blue</span>;
<span style="color: #008080">35</span> <span style="color: #ff0000">            margin-left</span>:<span style="color: #0000ff"> -300px</span>;
<span style="color: #008080">36</span>         }
<span style="color: #008080">37</span> <span style="color: #800000">    </style></span>

로그인 후 복사