CSS 박스 모델 소개
상자 모델
1 상자의 면적
<1>상자의 주요 속성:
width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
<2>다음 두 상자는 너비와 높이가 정확히 동일하며 둘 다 302*302입니다.
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;}
计算如下：1+100+100+100+1=302px.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border<3> 상자의 실제 점유 너비를 변경하지 않고 유지하려면 너비를 늘리고 패딩을 줄이고, 패딩을 늘리고 너비를 줄이세요.
<1>. ;패딩 영역은 배경색입니다. CSS2.1에서는 배경색이 콘텐츠 영역과 동일해야 합니다.
<2>Padding은 4방향이므로 각각 4방향으로 padding을 설명할 수 있습니다.
첫 번째 유형: 작은 속성, 즉 복합 속성입니다.
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
두 번째 유형: 포괄적인 속성입니다.
공백, 위쪽, 오른쪽, 아래쪽, 왼쪽으로 구분됩니다.padding:30px 20px 40px 100px;
<3>작은 속성을 사용하여 큰 속성을 쌓을 수 있습니다(큰 속성 앞에 작은 속성을 쓸 수 없음):
padding:20px;padding-left:30px;
질문 1:
p{
width:200px;
height:200px;
padding-left:10px;
padding-right:20px;
padding:40px 50px 60px;
padding-bottom:30px;
border:1px solid #000;
}답변: padding-left: 10px 및 padding-right: 20px; 뒷부분의 패딩이 큰 속성을 갖고 있어 이를 덮어쓰기 때문에 쓸모가 없습니다.
<4> 일부 태그에는 기본적으로 패딩이 있습니다. 따라서 웹사이트를 구축할 때 이 기본 패딩을 지웁니다.
<1> 테두리: 두께, 선 스타일, 색상.
<2> 모든 선 유형:
none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有：solid 、dashed、 dotted
<3> 테두리 속성을 분할하는 방법에는 두 가지가 있습니다.
첫 번째: 요소별
border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于：border:10px solid red;
여러 값을 공백으로 구분한 경우 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽입니다:
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
두 번째 방법: 방향별
첫 번째 분해 방법:border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于：border:10px solid red;
<4> 테두리를 사용하여 삼각형을 만들 수 있습니다.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
p{
width: 0px;
height: 0px;
border: 30px solid white;
border-top-color: pink;
transition:all 1s ease 0s;
}
p:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>4. 표준 문서 흐름
4.1 블록 수준 요소와 인라인 요소
<1> 거시적 관점에서 웹 페이지와 PS와 같은 디자인 소프트웨어 간에는 근본적인 차이점이 있습니다. 맨 아래로. 디자인 소프트웨어를 사용하면 원하는 곳에 그림을 그릴 수 있습니다.
<2>표준 흐름의 미시적 특성:(1) 블랭크 폴딩 현상.
(2) 높이가 고르지 않고 하단 가장자리가 정렬되어 있습니다.(3) 자동 줄바꿈 한 줄로 다 쓸 수 없으면 다른 줄로 줄 바꿈하세요.
<3>블록 수준 요소와 인라인 요소
(1) 태그는 두 가지 수준, 즉 블록 수준 요소와 인라인 요소로 나뉩니다.
(2) 블록 수준 요소:
霸占一行，不能与其他任何元素并列。 能接受宽高。 如果不设置宽度，那么宽度将默认变为父亲的100%。
(3) 인라인 요소:
可以与其他行内元素并排。 不能设置宽高。默认的宽度，就是文字的宽度。
(4) 레이블은 텍스트 수준과 컨테이너 수준으로 구분됩니다.
文本级：p、span、a、b、i、u、em 容器级：p 、h系列 、li 、dt 、dd
모든 컨테이너 수준 태그는 블록 수준 요소입니다.
4.2 블록 수준 요소와 인라인 요소 간 변환
<1> 블록 수준 요소를 인라인 요소로 설정할 수 있습니다. 인라인 요소는 블록 수준 요소로 설정할 수 있습니다.
<2>display는 요소의 인라인 및 블록 수준 속성을 변경하는 데 사용됩니다.
display:inline; 这个标签将会变为行内元素。 display:block; 这个标签将会变为块级元素。
<3>CSS에는 표준 문서 흐름에서 요소를 분리하는 세 가지 방법이 있습니다.
(1) 부동(2) 절대 위치 지정
(3) 고정 위치 지정
5. 부동: CSS에서 레이아웃에 가장 일반적으로 사용되는 속성입니다.
5.1 플로팅 요소는 스크립트에서 벗어났습니다
<2>float:left/right;
5.3 부동 요소에는 "단어 여백" 효과가 있습니다
위 내용은 CSS 박스 모델 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7615
15
1387
52
88
11
68
19
29
136
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
