첫째, 무엇 위치입니다
페이지에 요소의 위치를 변경
분류 둘째, 측위
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
셋째, 정상 스트림의 위치
페이지 모드 요소의 디폴트 위치는, 위에서 아래로 기본 문서의 흐름은, 왼쪽에서 오른쪽
1, 각각의 요소는 페이지에서 자신의 공간이
도 2에서, 각각의 요소는 부모 구성 요소의 왼쪽 상단에서 표시
(3)는, 블록 요소들은, 위에서 아래로 프로그레시브 방식으로 각각의 요소에 대한 별도의 광고를 배치되고
왼쪽에서 오른쪽으로 4 라인 소자가 행에 복수의 표시 소자 인, 하나씩 배치되고
넷째, 플로트 위치
도 1에서, 부유 요소가 제공되는 경우, 채움 비트 뒤쪽 소자 전에 흐름 기본 문서 소자. 현재 요소는 현재 행에, 또는 왼쪽에서 오른쪽으로합니다
플로트 : 왼쪽, 오른쪽, 없음
특징 :
(1) 상기 플로팅 요소되면 문서 흐름의 밖으로, 그리고 전면과 후면의 좌석을 작성 페이지에서 공간을 차지하지 않는다
(2) 상기 플로트 친 요소 / 오른쪽 왼쪽에 놓여있는 것, 또는 다른 유동 요소는 에지가
(3) 연속 블록 레벨 표시하는 복수의 부유 요소들의 문제를 해결하기위한
2, 부동 개시제의 특별한 경우
A, (1) 때 적은 부동 요소에 맞지 랩 여러 디스플레이, 랩 표시 규칙 때 모든 부모 요소가 표시되는 것보다 : 우선적으로 왼쪽 / 오른쪽 이어 부동
(2)浮动元素占位,浮动元素会根据浮动方向,占据方向上的位置,不让其他后面浮动元素占用
폭이 정의되지 않은 경우 B는 부유 요소되면, 폭이 일반화 될 것이다
C는, 부유 요소되면, 블록 레벨 요소의 폭과 높이가 상부 제공 될 수 있으며, 하부 가장자리가 제공 될 수있다진다
요소 부동 블록 내의 D, 텍스트, 인라인 요소 행 요소 하향 가압되지 않을 것이다. 그러나 교묘하게 표시하는 요소 주위에 떠있는 모든 부동 요소를 피할 수
전자, 명확한 플로트 : 다음 요소가 앞으로 좌석을 채우기하지 않으려면 요소 부동 분명히 설정 한 후, (앞쪽의 좌석을 채우기 위해 다음 요소) 이후의 요소를 일부 영향 이후의 요소를 가져올 것이다되면 플로트 앞에 가져다에서 취소 영향
명확 : 왼쪽 / 오른쪽 / 모두
블록 요소의 높이가 제공되지 않는 경우, 내부 요소들은 부동 요소 경우 F가 붕괴 높이, 표준의 내부 구성 요소의 높이가 있지만, 부유 요소는 페이지에 공간을 차지하지 않고 높지 부모 요소
解决方案:
1、直接为父元素设置高度,弊端:不知到父元素高度
2、父元素也浮动,弊端:浮动会影响后续元素
3、overflow:hidden,弊端:当元素真的需要显示溢出内容时,就显示不出来了
4、在父元素中追加一个空的块级元素,并设置clear:both
3, 디스플레이
1, 디스플레이
디스플레이
페이지의 표시 소자의 형태 (블록 레벨 블록 내의 행 라인)
값 :
(1) 없음 : 숨기려면 요소를 표시하지 않습니다, 위치를 차지하지 않습니다
(2) 블록은 : 수직 여백 별도의 라인 폭과 높이를 제공 할 수 있습니다, 동일한 구성 요소 및 형태의 블록 레벨 요소하자
(3) 인라인 : 요소와 인라인 요소로서 기능 보자 요소 공통 선, 복수의 상기 폭과 높이의 수직 여백을 설정할 수없는
(4) 인라인 블록은 : 행에 복수의 표시 소자를,하지만 세트 높고 넓은 수직 여백 될 수 동일 행 내 발현 및 블록 요소하자 갖추고
(5) 테이블 : 테이블 만들기 표현과 동일한 특성의 요소 : 표준의 크기는 별도의 행에 각 요소는, 당신의 크기를 수정할 수 있습니다
2, 디스플레이
시계
값
visible:默认可见
hidden:隐藏
표시 : 문서 흐름에서 숨겨진 차이 숨겨진 : 없음 및 가시성 표시, 페이지가 문서 흐름에서 벗어나지 않으면 서 공간의 가시성을 차지하지 않는 공간은 페이지에 의해 점령
3, 투명성
불투명
값 : 0-1 작은 더 투명
불투명도와 RGBA 차이 : 투명 색상 범위 중요한 요소 요소에 불투명 단계는 서브 - 소자에 적용 할 수 따를, RGBA는 현재 요소의 투명도를 변경, 다른 요소에 영향을주지 않는다
도 4에서, 수직 배향
수직 정렬
값 : 상단 / 중 / 하
사용
(1)table标签中,控制文字的垂直对齐,取值:top/middle/bottom
(2)img标签,控制图片与前后文字的垂直对齐方式,取值:top/middle/bottom/baseline
5 커서
커서:
값 :
(1)default:箭头
(2)pointer:手
(3)text:I
(4)crosshair:十字
(5)wait:沙漏或者转圈
(6)help:问号
다섯째, 측위
1, 위치 등록
위치:
값 :
(1)static: 默认值,静态,默认文档流
(2)relative:相对定位
(3)absolute:绝对定位
(4)fixed:固定定位
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
소자의 상대 위치로 설정 / 절대 / 값으로 고정 요소는 타겟 요소라고
오프셋 특성
위 / 아래 / 좌 / 우
왼쪽 : 100 픽셀 100 픽셀에를 교대로
(2)의 상대 위치
원래의 위치로 요소의 상대는 기본 문서 흐름에서 벗어나지 않는 거리를 오프셋 페이지의 위치는 좌석을 채우기 위해 다른 요소되지 않습니다
구문 : 총수 : 상대는, 오프셋 성질 사용될
사용 : 조상으로 절대 위치 요소
(1)位置微调
3, 절대 위치
요소가 앞으로 좌석을 채울 것입니다 후 절대 위치 요소, 기본 문서의 유출 것, 절대 위치 요소는 신체에 비해, 모든 조상 요소가 배치 된 경우 최근 현지화를 달성하기 위해 배치 한 자신의 조상에서 상대적 것 현지화를 달성하기 위해
속성 : 총수 : 절대]를 사용하여 오프셋 성
때 계단식 효과가있다 : 행사
(4) 고정 된 위치
요소는 요소가 스크롤 바의 위치가 바뀌지 않는 페이지상의 특정 위치에 고정되어 있지만, 해당 지역에서 고정 된
구문 :
위치 : 픽스]의 사용과 오프셋 성
참고 :
(1)固定定位脱离文档流,不占页面空间
(2)固定定位元素变为块级元素
(3)相对于body实现位置的偏移
스태킹 순서
거기에 적재 될 수있는 요소를 배치 요소가되었다, 나는 스택 순서를 변경하려면
Z- 색인
값 : 단위 번호는 숫자가 클수록, 화면에 많은 요소는 부자 사이 소자 무효 Z- 색인 아이 항상 오직 Z 인덱스를 사용하는 위치 결정 요소를 상기 부모 요소에서 요소 것