06_CSS 입문 및 고급 기술 (4)

리뷰

• CSS : 스타일 레이어에 대한 책임, 스타일 시트를 계단식 캐스 케이 딩 스타일 시트. CSS2.1, CSS3의 최신 버전.

• CSS 선택기 : 어떤 요소를 더한 스타일보세요. 기본 선택의 세 가지 종류 : 라벨 P, ID 선택 # 아이디, 클래스 선택, 고급 선택기 사가지 : 자손 셀렉터 DIV, P, 교차 선택 div.haha 및 선택 DIV, P, 와일드 카드를 설정 *

ID 선택 : 전체 페이지 ID 고유;

클래스 선택 : 같은 클래스 라벨의 복수 걸릴 수 있습니다 :
<p class=”para1 spec”></p>

클래스 선택기는 고유의 페이지를 필요로하지 않는다
<p class=”para1 spec”></p>
<h3 class=”spec”></h3>

• 상속 :
  속성을 상속 할 수있는 : font-, 텍스트 - 색상의 시작 부분의 라인 -을.
  하지 상속 : background-color속성 상자 모델, 플로트, 위치

body{
   font-size:12px;
}

• 코팅 특성 :
  충족 충돌, 듣는. 아주 꽉지도가있다. ! 중요 무게 리프팅, 당신은 알아요! 향상시킬 수 있습니다 중요한 것은, 무엇을 올릴 수 없습니다? 가 중요한 선택을 제거 할 수없는 상속, 역도 상속 할 수 없습니다 :! 선택 선정!, 쓸모없는 중요한 쓰기까지, 가까이 더 가까이 : 예를 들어, 근접의 원칙에 영향을 미칠 수 없다

• 텍스트 속성 :

font-weight:bold;
font-weight:700;
font-style:italic;
text-decoration:underline;
font-size:12px;
line-height:24px;
font-family:”Consolas”,”Microsoft Yahei”,”SimSun”;
font:12px/24px ”Consolas”,”Microsoft Yahei”,”SimSun”;

• 박스 모델

width:200px;   /*盒子内容的宽度*/
height:200px;  /*盒子内容的高度*/
padding:10px;  /*内边距*/
border:1px solid red; 
margin:40px;

우리는 여기에 추가 강조 : 패딩 영역의 배경색을하고, 지식의 현재 수준, 당신은 패딩 줄 수 없다
혼자 로케일에게 색을,
padding: 10px 20px 30px 40px;
오른쪽, 아래, 왼쪽

padding:10px 20px 30px;
왼쪽의 아래

국경의 세 가지 요소 :

border-width:1px;
border-style:solid;
border-color:red;

우리는 분할을 계속할 수 있습니다 :
border-top-style:dashed;

세 가지 요소의 표현은 오른쪽 아래에 남아있을 수 있습니다 :
border-width:1px 2px 3px 4px;

• 플로트 : 우리는 과학적인 보고서가 없습니다, 일부 속성은 아직 모른다, 그것이 우리가해야 할 일을 중요하지 않습니다. 생산 측면을 옆에 : 우리가 이미 알고 있기 때문에하고있는 부동.

표준 문서의 흐름은 두 개의 요소들로 분할된다
block-level: 폭과 높이는, 제공 측 의해서도 측 수 등 DT 박사 DIV, H, P, 리튬으로서
inline-level: 폭이 높게 설정 될 수없고, 병렬 될 수있는 범위, A, B 등의 U, I
부동, 당신은 옆 요소뿐만 아니라 측면을 할뿐만 아니라, 폭과 높이를 설정할 수 있습니다.

부동의 본질에 대한 심층 이해

1. 표준 중 플로팅 요소의 흐름은 표준 분할 열의 흐름을 차단하지

: 세 방법 중 전체 표준 흐름
플로팅 :
float:left;
절대 위치 :
position:absolute;
고정 위치 :
position:fixed;

소자 플로팅 포인트 블록, 인라인 전혀 없다 표준 유출 갖는다.

전형적인 표준 스트림 인라인 요소 스팬되지만 부동 직접 블록의 폭과 높이를 설정하는 전송 될 수 없다.

<span class="no1">1</span>

    .no1{
        float: left;
        width: 300px;
        height: 50px;
        background-color: orange;
    }

DIV 스트림은 흐름이 표준 폭에 제공되지 않는 표준 고전 블록 레벨 요소 인 아버지가 자동으로 전체 폭을 유지합니다. 그러나 부동, 자동으로 전체 지원하지만, 자동 축소, 내부 텍스트의 크기로 축소하지 않습니다 :

2. 웰트 설정

부동 소수점을 왼쪽 :
.. 이전 부모 상자의 내부 왼쪽 된 테두리 1 ← 2 ← ← 올드 올드 올드을 3 ← 4

나란히위한 공간이 충분하지 않은 형제는 이전 4로, 자신을 저장하기에 충분히 있었다 전에 경우, 이전 세, 2 세, 이전, 붙여 넣기 테두리의 아버지를 찾기 위해 설정 :

2.2 웰트 차례
왼쪽 플로트 :

늙은 부모 상자의 왼쪽 경계 내부. 1 ← 2 ← ← 올드 올드 올드. 3 ← 4

나란히위한 공간이 충분하지 않은 형제는 이전 4로, 자신을 저장하기에 충분히 있었다 전에 경우, 이전 세, 2 세, 이전, 붙여 넣기 테두리의 아버지를 찾기 위해 설정 :

그러나 드릴하지 않습니다

3. 마진 붕괴 현상이 수직 방향 사라

붕괴 이익률은 표준 전원이 떠 있기 때문에,이 수정이없는 표준 유동 특성이다.

4. 표준 흐름을 보자

<div class="box1"></div>  → 浮动
<div class="box2"></div> → 没有浮动

참고이 쓸데 자연 작업 "선"사용 위치의 생산, 대신에 떠있는 팁이 .

오렌지 박스 플로트, 그래서 왼쪽 상단에 파란색 상자 렌더링, 위치 기준, 스트림의 왼쪽 상단에서 아직 표준 커서의 흐름을하자, 주황색 상자를 표시하는 것입니다.

5. 워드 와이

지우기 플로트

1. 아버지는 높은 부동 지원 아들이 될 수 없습니다

떠내려 다음 코드, NO1, NO2는 상자가 고도의 아들이 지원되지 않을 수 있습니다 :

<div class="box">
    <p class="no1"></p>
    <p class="no2"></p>
</div>

아버지는 수 있기 때문에 요소는 표준 흐름을 높이십시오.

2. 조리법은이 질병을 치료

라는 속성이
overflow:hidden;
문제를 해결할 수는.
배울 수있는 그 시간에 overflow:hidden;무엇을 의미했다

영어 오버 플로우 "오버 플로우"는 의미 숨겨진 의미가 숨겨져 있습니다.

이 속성은 의미 내용 오버 플로우가 숨겨진 경계하도록하는 것입니다.

오렌지 껍질처럼 오렌지 껍질이지만, 우리는 팔 극 것은, 실제로 연결을 이길 수있는, 즉, 세계의 많은 그런 일이있다 감기를 치료할 수 발견했다.
overflow:hidden;내용이 국경 밖으로 유출 숨기는 데 사용, 그것은 마술에 사용됩니다. 그러나, 우리가 발견 overflow:hidden;다른 용도의 마법이있다, 그의 아버지가 그의 아들의 주제를 자신을 알릴 수있다, 그의 아버지는 지원의 높은 수준의 대상이 떨어져 자신의 아들을 할 수 있었다.

<div class="box">  →不能被撑出高了，解决办法：  overflow:hidden;
    <p class="no1"></p>  → 脱标了
    <p class="no2"></p> → 脱标了
</div>

3. 상자는 매우 Guanzhuziji 내부에 떠있을 수 있습니다

상자의 높은 수준, 그것은 다른 사람에 의해 영향을받지 않습니다, 플로트 내부에 다른 영향을 미치지 않습니다 내부 떠 요소의 유혹에 저항 할 수 있습니다.

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

지우기 플로트 4. 방법 1 : 투명 : 모두;

우리는 부모가, 그 다음 순서가 엉망 상자의 높이가 아닌 경우 상자의 높이가의 첫 번째 순서 다음 두 번째 순서에 갔다, 그의 아들을 보유 할 수 있지만, 발견 :

아주 간단한 해결책은 상자의 뒷면에 추가하는 것입니다
clear:both;

: 명확한 의미는 분명하다, 그 값은 수
clear:left;충격이 가져온 부동 상태로 취소
clear:right;투명 도료가 떠 가지고 할 수있는 권리에 영향을
clear:both；지 웁니다 모두 가져 부동에 영향을

이 점은 잘 때문에 작동하지 않습니다

• 상자 또는 높지 않다
• 마진 실패

5. 지우기 플로트 방법 2 : 파티션 벽

파티션 방법은 매우 일반적으로 두 개의 매우 큰 부분은 우리가 항상 서로 영향을주지 않습니다, 벽, 두 부분의 내부가에 떠있는 간격을 원하는 웹 페이지에 사용되는, 조언 이익률은 실패, 당신이 할 수있는 여전히 벽의 높이 간격을 시뮬레이션한다.

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<div class="cl h20"></div>
<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

여백 실패하지만,하지만 당신은 간격으로 사용할 수있는 높은 벽을 만들기 위해 팁을 사용할 수 있습니다.
그러나 사건은 여전히 높지 않다.

지우기 플로트 6. 방법 3 : 방법 내부

CL은 분명하다 : 모두;

<div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div class="cl"></div>
</div>

<div class="box2">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <div class="cl"></div>
</div>

이제 사용하기 쉬운 마진, 그리고 상자도 높은 있으며, 모든 것이 해결된다! 그러나 문제가있다 :

HTML 태그는 너무 조금 배치됩니다. 이 탭은 없다, 그것은 불편 의미 보인다 않습니다.

7. 지우기 플로트 방법 4 : 오버 플로우 : 숨겨진;

<div class="box1">  → 这个盒子没高，就写上overflow:hidden;
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

<div class="box2">  → 这个盒子没高，就写上overflow:hidden;
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

요약 : 부동 소수점을 취소하는 방법에는 여러 가지가 기억하지만, 많은 인터뷰에서 의미가있다. 일 :

• 우리는 항상 부모 상자 플러스 오버 플로우 부동 내부 갖고 싶은 : 숨겨진를;
• 우리는 항상 가장 외관 간격이 좋아

<div class="header">
    
</div>
<div class="cl h18"></div>
<div class="content">
    
</div>
<div class="cl h18"></div>
<div class="footer">
    
</div>