CSS 상자 모델 설명 및 예
- 无忌哥哥원래의
- 2018-06-28 17:23:442894검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 컨텍스트 선택기다음 기사：CSS 컨텍스트 선택기