CSS 박스 모델 소개-CSS 튜토리얼-php.cn

CSS 박스 모델 소개

一个新手

풀어 주다： 2017-09-11 10:32:04

원래의

1847명이 탐색했습니다.

상자 모델

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

로그인 후 복사

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

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

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

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

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

로그인 후 복사

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

(1) 부동

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

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

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

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

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

<2>float:left/right;

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

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