여기에 카탈로그 제목 작성
1 : 레이아웃
1. 횡단 된 상자의 마지막면 border이 보이지 않습니다.
원인 :
박스 모델이 기본적으로 사용됩니다 标准盒子模型, 즉 W3C盒子模型,
상자 크기 : 콘텐츠 상자;
문제점 :
맨 오른쪽에있는 border것이 보이지 않습니다 .
솔루션 :
상자 모델을 다음으로 설정하십시오 .IE盒子
상자 크기 : 테두리 상자;
솔루션 효과 :
2. 요소의 수직 정렬 설정vertical-align
- 속성 :
vertical-align - 정의 및 사용법
vertical-align 속성은 요소의 수직 정렬을 설정합니다. - 설명
이 속성은 요소가있는 선의 기준선을 기준으로 선에서 요소 기준선의 수직 정렬을 정의합니다. 음수 길이 값과 백분율 값을 지정할 수 있습니다. 이것은 요소를 높이는 것이 아니라 낮출 것입니다. 표 셀에서이 속성은 셀 상자의 셀 내용 정렬을 설정합니다. - 예 1
<html>
<head>
<style type="text/css">
img.top {
vertical-align:text-top}
img.bottom {
vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
- 효과
CSS 세로 정렬 속성 https://www.w3school.com.cn/css/pr_pos_vertical-align.asp
- 사례 2 프로젝트 개발에서 만나는 실제 상황
- UI 样式 :
- 자체 코드 구현
<div class="aside">
<div class="aside-value">{
{ item.ratio }}%</div>
<div class="aside-suffix">生存</div>
</div>
.aside {
height: 47px;
font-size: 32px;
font-family: SourceHanSansSC, SourceHanSansSC-Bold;
font-weight: 700;
color: #67d8c2;
line-height: 47px;
position: absolute;
right: 20px;
bottom: 17px;
div {
display: inline-block;
}
.aside-suffix {
height: 20px;
font-size: 14px;
font-family: SourceHanSansSC, SourceHanSansSC-Regular;
font-weight: 400;
line-height: 20px;
width: 28px;
// vertical-align: top;
// margin-top: 17px;
}
.aside-value {
padding-right: 8px;
}
}
vertical-align: top;스타일 을 추가하지 않고 UI 스타일을 구현하는 것은 쉽지 않습니다.
현재margin아래와 같이 속성 추가 가 작동하지 않습니다.
vertical-align: top;속성을 추가 한 후 여백을 사용하면 효과가 있습니다.
3. 의사 클래스 사용
블록 레벨 요소와 인라인 요소를 모두 사용할 수 있습니다.
다음 쓰기는 절대 위치 지정을 사용하여 정상적으로 표시됩니다.
.input::after {
content: '';
background-color: #91acc5;
width: 9vw;
height: 1px;
position: absolute;
top: 8.5vw;
left: 1.5vw;
}
4. 여백 병합 (외부 여백 축소) ⭐
여백을 결합하면 두 개의 수직 여백이 만나면 하나의 여백이 형성됩니다.
병합 된 여백의 높이는 병합 된 두 여백의 높이 중 더 큰 값과 같습니다. ,
外边距合并
여백 병합 (오버레이)은 매우 간단한 개념입니다. 그러나 실제로 웹 페이지를 레이아웃 할 때 많은 혼란을 야기 할 수 있습니다.
간단히 말해 여백의 조합은 두 개의 수직 여백이 만나면 여백을 형성한다는 것을 의미합니다. 병합 된 여백의 높이는 병합 된 두 여백의 높이 중 더 큰 값과 같습니다.
요소가 다른 요소 위에 나타나면 첫 번째 요소의 아래쪽 여백이 두 번째 요소의 위쪽 여백과 병합됩니다. 아래 그림을 참조하십시오.
요소가 다른 요소에 포함 된 경우 (외부 여백을 구분하는 내부 여백이나 테두리가 없다고 가정) 해당 요소의 위쪽 및 / 또는 아래쪽 여백도 병합됩니다. 아래 그림을보십시오.
이상하게 보이지만 여백이 자체적으로 합쳐질 수도 있습니다.
여백이 있지만 테두리 나 패딩이없는 빈 요소가 있다고 가정합니다. 이 경우 위쪽 여백과 아래쪽 여백이 함께 만나 병합
됩니다.이 여백이 다른 요소의 여백과 만나면 병합됩니다.
이것은 점유하는 일련의 단락 요소입니다. 공간이 매우 작습니다. 그들의 여백은 함께 병합되어 작은 여백을 형성합니다.
여백 병합은 처음에는 이상하게 보일 수 있지만 실제로는 의미가 있습니다. 여러 단락으로 구성된 일반적인 텍스트 페이지를 예로 들어 보겠습니다. 첫 번째 단락 위의 공간은 단락의 위쪽 여백과 같습니다. 여백 병합이없는 경우 모든 후속 단락 사이의 여백은 인접한 위쪽 여백과 아래쪽 여백의 합이됩니다. 이는 단락 사이의 공간이 페이지 상단의 두 배라는 것을 의미합니다. 여백 병합이 발생하면 단락 사이의 위쪽 여백과 아래쪽 여백이 병합되어 모든 곳의 거리가 동일합니다.
참고 : 일반 문서 흐름에서 블록 상자의 세로 여백 만 여백을 병합합니다. 인라인 상자, 부동 상자 또는 절대 위치 사이의 여백은 병합되지 않습니다.
- CSS 여백 병합 https://www.w3school.com.cn/css/css_margin_collapsing.asp
- margin-collapse 문제 -hugejinfan-blog garden https://www.cnblogs.com/hugejinfan/p/5901320.html