1. 상자란 무엇입니까?
1. 상자 모델은 상자 모델이라고도 합니다. 페이지의 모든 요소는 상자로 간주될 수 있습니다.
2. 상자는 인간의 관점에서 요소의 컨테이너이자 운반체입니다. , 상자는 요소의 홈입니다
2. 상자의 유형 및 기능:
1. 요소에는 블록 수준 요소와 인라인 요소의 두 가지 유형이 있으므로 해당 홈은 상자입니다. 블록 수준 상자와 인라인 상자의 두 가지 유형도 있습니다.
2. 블록 수준 상자는 일반적으로 다른 요소의 컨테이너로 사용됩니다. 일반적으로 인라인 상자는 블록 수준 상자에 배치됩니다.
3. 박스 배치 : 1. 박스는 페이지에 있습니다. 배치 순서는 수석 스케줄러가 결정합니다 : 문서 흐름, 상자가 집에서 벗어나 문서 흐름에서 벗어나지 않는 한 2. 문서 흐름 는 요소를 배열하는 방식이자 배열하는 동작이므로 명사이자 동사이기도 합니다IV , 상자 모델의 구성 요소: 1. 상자는 요소 컨테이너로 주로 사용되므로 블록을 주로 사용합니다. 레벨 박스를 예로 들어 소개합니다 2. 박스의 4가지 주요 구성 요소: 내용(내용), 패딩(내부 가장자리) 거리), 테두리(테두리), 여백(외부 여백) 5. 4가지 미인을 사용합니다 상자 모델을 빨리 외우려면: 1. 내용: 우리 아내 또는 여자 친구, 이것은 눈에 보이고 만질 수 있습니다. 얻을 수 있는 것 2. 패딩: 아내의 가장 친한 친구처럼 투명하며, 항상 두 사람의 관계에 영향을 미칩니다. 당신과 당신의 아내 3. 경계선: 눈에 보이고 변하기 쉬우며 매력적입니다 수천 가지, 가장 섹시하고 요염한 것, 마치 당신의 친구, 꿈의 연인 또는 작은 연인처럼 4. 여백: 또한 투명합니다. 패딩, 상사의 여자, 친구의 아내처럼 상상 속에서 영원히 살아보세요 6. 내용: 1. 너비 및 높이 설정 지원 2. 내부는 블록 요소 또는 인라인 요소일 수 있습니다 3. 지원 배경 설정 7 , 안쪽 여백 여백: 1. 4방향 크기 설정 지원, 시계 방향 배열: 위쪽, 오른쪽, 아래쪽, 왼쪽 2. 별도로 설정할 수도 있습니다. padding-top: 위쪽 여백패딩 오른쪽 : 오른쪽 여백 use with using using through out through off off off 's through through out through out through out through out out out mb 밖으로 ‐ 오버 ‐‐ ‐‐, 10px에서 5px까지 10px~10px 5px~10px 5px~10px 5px~10px 5px~10px ,5px 이하 패딩: 10px 20px 30px, 최대 10px, 왼쪽 및 오른쪽 20px, 하단 30px 패딩: 10px 2 0px 위아래로 10px , 왼쪽 및 오른쪽 20px 패딩: 10px, 위쪽, 오른쪽, 아래쪽, 왼쪽 모두 10px 8, 여백 외부 거리: 1. 시계 방향으로 배열된 크기 설정 지원: 위쪽, 오른쪽, 아래쪽, 왼쪽 2. 개별적으로 설정할 수도 있습니다. margin-top: 위쪽 여백 margin-right: 오른쪽 여백 margin-bottom: 아래쪽 여백 margin-left: 왼쪽 여백 3. 약어 지원 : 여백: 10px 5px 10px 5px; 위쪽 10px, 오른쪽 5px, 아래쪽 10px, 아래쪽 5px 여백: 10px 20px 30px; 10px 위, 약 10px 20px, 아래쪽 30px 여백: 10px 10px, 왼쪽 및 오른쪽 20px 여백: 10px, 위쪽, 오른쪽, 아래쪽 및 왼쪽은 모두 10px9. 테두리:
1. 내부 및 외부 여백은 투명하고 보이지 않으므로 너비만 설정 가능합니다
2. 테두리가 표시되므로 설정할 수 있는 세 가지 하위 속성이 있습니다: 너비, 스타일, 색상 3. 설정 순서: 위쪽, 오른쪽, 아래쪽, 왼쪽 위쪽 테두리 설정:
O 테두리- top-width: 5px; // 너비 설정
border-top-style: solid; // 스타일 설정
border-top-color: #f60; // 전경 색상/색상 설정
border-top : 5px #f60; //약어
오른쪽 테두리 설정:
border-right-width: 10px;
border-right-style: dashed border- 오른쪽: 10px 대시보드
border-bottom: 10px solid #555; 왼쪽 테두리 설정: border-left-width: 8px; border-left-style: dotted;F Border-heft-color: #333;
border-heft: 8px dotted #333; //4개의 테두리 스타일을 균일하게 설정 사용 사용 사용 사용 사용 ‐ ‐ ‐ ‐‐‐ 색상 네 개의 테두리: 회색; : 1: 둥근 모서리 설정: 이전에는 그림을 통해 수행했지만 이제는 코드를 통해 수행할 수 있습니다. 2: 테두리에는 4개의 정점이 있으며 각 정점에 대해 설정할 수 있습니다. 2.1: 왼쪽 위 모서리 border-top- 왼쪽-반경:20px; 2.2: 오른쪽 위 모서리 border-top-right-radius:20px; 2.1: 오른쪽 아래 모서리 border-bottom-right-radius:20px;2.1: 왼쪽 아래 모서리 border-bottom-left- 반경:20px; 참고: 외국인은 우리와 다르게 생각합니다. 속성에는 왼쪽과 오른쪽 앞에 위쪽, 아래쪽, 아래쪽이 적혀 있습니다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1.盒子模型</title> <style> .box1 { /*在父级盒子.box已经设置过了*/ /*width: 200px;*/ /*height:200px;*/ /*background-color: #f89;*/ border: 2px solid #363636; /*通过计算,设置内边距40px,可实现图片居中*/ padding:40px; /*结果并未实现居中,这是为什么呢?因为内边距会撑开盒子,这与我们生活中的盒子是不一样的*/ /*解决方法有二个:1.修改盒子大小,宽高减去padding值,2.为该盒子套一个父级盒子,单独设置宽高*/ /*第一种方案:修改当前盒子大小*/ /*width: 120px;*/ /*思考:为什么要减去80px?因为边距是成对的,40px的2倍就是80px*/ /*height:120px;*/ } /*.box是.box1的父级盒子,在这里设置了宽高,子盒子就不必设置了*/ /*我这里忽略了边框宽度的影响*/ .box { width: 200px; height:200px; } .box2{ width: 200px; height:200px; background-color: lightskyblue; borer: 2px solid #333; margin-bottom: 20px; } .box3{ width: 200px; height:200px; background-color: lightgreen; borer: 2px solid #333; /*margin-top: 20px;*/ /*上下外边距的二个特征:*/ /*1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;*/ /*2.如果上下外边距不相待,则会产生塌陷,最终数值大的外边距胜出,以它为准*/ margin-top: 30px; /*注意:左右外边距不会产生叠加和塌陷,仍是各自相加为最终结果*/ } /*边框设置*/ .box4 { width: 200px; height:200px; background-color: lightskyblue; /*设置上边框:*/ /*设置宽度*/ /*border-top-width: 5px;*/ /*设置样式*/ /*border-top-style: solid;*/ /*设置前景色/颜色*/ /*border-top-color: #f60;*/ /*简写*/ /*border-top: 5px solid #f60;*/ /*设置右边框:*/ /*border-right-width: 10px;*/ /*border-right-style: dashed;*/ /*border-right-color: #888;*/ /*border-right: 10px dashed #888;*/ /*设置下边框:*/ /*border-bottom-width: 10px;*/ /*border-bottom-style: solid;*/ /*border-bottom-color: #555;*/ /*border-bottom: 10px solid #555;*/ /*设置左边框:*/ /*border-left-width: 8px;*/ /*border-left-style: dotted;*/ /*border-left-color: #333;*/ /*border-left: 8px dotted #333;*/ /*所有边框使用统一设置:*/ /*统一设置宽度*/ /*border-width: 10px;*/ /*统一设置样式*/ /*border-style: solid;*/ /*统一设置颜色*/ /*border-color: gray;*/ /*统一设置的简写*/ /*border: 10px solid gray;*/ } /*圆角盒子设置技巧*/ .box5 { width: 200px; height:200px; background-color: #f89; border-top-left-radius: 20px; border-top-right-radius: 40px; border-bottom-right-radius: 60px; border-bottom-left-radius: 80px; /*如果每个角的圆度是一样的,可以简化*/ border-radius: 20px; /*如果原盒子是一个正方形的话,只需要把角度设置为宽度的一半即可得到一个正圆*/ border-radius: 100px; /*为了适应外部盒子变化,建议设置为百分比,例如:50%,效果完全一样*/ /*border-radius: 50%;*/ } /*创建有阴影盒子的技巧*/ .box6 { width: 200px; height:200px; background-color: lightskyblue; /*设置圆角*/ border-radius:50%; /*设置内边距并重新调整盒子大小*/ padding: 10px; width: 180px; height: 180px; /*设置盒子的阴影*/ /*box-shadow: X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 ;*/ /*外发光:模糊8px,阴影到边框为3px*/ box-shadow:0 0 8px 3px #888; /*内发光:模糊8px,阴影到边框为3px*/ box-shadow:0 0 8px 3px #888 inset; /*向右下投影*/ box-shadow:8px 8px 8px 3px #888; /*向左上投影*/ box-shadow:-8px -8px 8px 3px #888 ; } </style> </head> <body>
위 내용은 CSS 상자 모델 설명 및 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!