CSS 박스 모델 소개

一个新手원래의: 2017-09-11 10:32:041826검색

상자 모델

1 상자의 면적

f35d6e602fd7d0f0edfa6f7d103c1b57상자의 주요 속성:

width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 
height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 
padding 内边距 
border 边框 
margin 外边距

2cc198a1d5eb0d3eb508d858c9f5cbdb다음 두 상자는 너비와 높이가 정확히 동일하며 둘 다 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

5bdf4c78156c7953567bb5a0aef2fc53 상자의 실제 점유 너비를 변경하지 않고 유지하려면 너비를 늘리고 패딩을 줄이고, 패딩을 늘리고 너비를 줄이세요.

<1>. ;패딩 영역은 배경색입니다. CSS2.1에서는 배경색이 콘텐츠 영역과 동일해야 합니다.

2cc198a1d5eb0d3eb508d858c9f5cbdbPadding은 4방향이므로 각각 4방향으로 padding을 설명할 수 있습니다.

첫 번째 유형: 작은 속성, 즉 복합 속성입니다.

padding-top:30px;  上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左

두 번째 유형: 포괄적인 속성입니다.

공백, 위쪽, 오른쪽, 아래쪽, 왼쪽으로 구분됩니다.

padding:30px 20px 40px 100px;

5bdf4c78156c7953567bb5a0aef2fc53작은 속성을 사용하여 큰 속성을 쌓을 수 있습니다(큰 속성 앞에 작은 속성을 쓸 수 없음):

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; 뒷부분의 패딩이 큰 속성을 갖고 있어 이를 덮어쓰기 때문에 쓸모가 없습니다.

23889872c2e8594e0f446a471a78ec4c 일부 태그에는 기본적으로 패딩이 있습니다. 따라서 웹사이트를 구축할 때 이 기본 패딩을 지웁니다.

f35d6e602fd7d0f0edfa6f7d103c1b57 테두리: 두께, 선 스타일, 색상.

2cc198a1d5eb0d3eb508d858c9f5cbdb 모든 선 유형:

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

5bdf4c78156c7953567bb5a0aef2fc53 테두리 속성을 분할하는 방법에는 두 가지가 있습니다.

첫 번째: 요소별

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;

23889872c2e8594e0f446a471a78ec4c 테두리를 사용하여 삼각형을 만들 수 있습니다.

<!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 블록 수준 요소와 인라인 요소

f35d6e602fd7d0f0edfa6f7d103c1b57 거시적 관점에서 웹 페이지와 PS와 같은 디자인 소프트웨어 간에는 근본적인 차이점이 있습니다. 맨 아래로. 디자인 소프트웨어를 사용하면 원하는 곳에 그림을 그릴 수 있습니다.

2cc198a1d5eb0d3eb508d858c9f5cbdb표준 흐름의 미시적 특성:

(1) 블랭크 폴딩 현상.

(2) 높이가 고르지 않고 하단 가장자리가 정렬되어 있습니다.

(3) 자동 줄바꿈 한 줄로 다 쓸 수 없으면 다른 줄로 줄 바꿈하세요.
5bdf4c78156c7953567bb5a0aef2fc53블록 수준 요소와 인라인 요소
(1) 태그는 두 가지 수준, 즉 블록 수준 요소와 인라인 요소로 나뉩니다.
(2) 블록 수준 요소:

霸占一行，不能与其他任何元素并列。
能接受宽高。
如果不设置宽度，那么宽度将默认变为父亲的100%。

(3) 인라인 요소:

可以与其他行内元素并排。
不能设置宽高。默认的宽度，就是文字的宽度。

(4) 레이블은 텍스트 수준과 컨테이너 수준으로 구분됩니다.

文本级：p、span、a、b、i、u、em
容器级：p 、h系列 、li 、dt 、dd

기본적으로 모든 텍스트 수준 태그는 인라인 요소입니다. p를 제외하면 블록 수준 요소입니다.

모든 컨테이너 수준 태그는 블록 수준 요소입니다.

4.2 블록 수준 요소와 인라인 요소 간 변환

블록 수준 요소를 인라인 요소로 설정할 수 있습니다. 인라인 요소는 블록 수준 요소로 설정할 수 있습니다.
2cc198a1d5eb0d3eb508d858c9f5cbdbdisplay는 요소의 인라인 및 블록 수준 속성을 변경하는 데 사용됩니다.

display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。

5bdf4c78156c7953567bb5a0aef2fc53CSS에는 표준 문서 흐름에서 요소를 분리하는 세 가지 방법이 있습니다.

(1) 부동

(2) 절대 위치 지정
(3) 고정 위치 지정

5. 부동: CSS에서 레이아웃에 가장 일반적으로 사용되는 속성입니다.

5.1 플로팅 요소는 스크립트에서 벗어났습니다

5.2 플로팅 요소는 서로 가깝습니다

f35d6e602fd7d0f0edfa6f7d103c1b57공간이 충분하면 둘째 형제와 가까워집니다. 공간이 충분하지 않으면 그는 이 형제에게 의지할 것입니다. Brother 1에게 기대어 앉을 공간이 충분하지 않은 경우 왼쪽 벽에 직접 붙입니다.

2cc198a1d5eb0d3eb508d858c9f5cbdbfloat:left/right;

5.3 부동 요소에는 "단어 여백" 효과가 있습니다

위 내용은 CSS 박스 모델 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS를 사용하여 다중 열 레이아웃을 구현하는 방법다음 기사：CSS를 사용하여 다중 열 레이아웃을 구현하는 방법