>  기사  >  웹 프론트엔드  >  CSS 상자 모델 설명 및 예

CSS 상자 모델 설명 및 예

无忌哥哥
无忌哥哥원래의
2018-06-28 17:23:442853검색

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, 위쪽, 오른쪽, 아래쪽 및 왼쪽은 모두 10px

9. 테두리:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.