>  기사  >  웹 프론트엔드  >  CSS 상자 모델

CSS 상자 모델

WBOY
WBOY원래의
2016-08-26 10:13:141328검색

CSS 박스 모델

  • CSS 패딩
  • CSS 테두리
  • CSS 마진
  • CSS 마진 병합

1. CSS 박스 모델(박스 모델)

요소 상자가 요소 콘텐츠, 패딩, 테두리 및 여백을 처리하는 방법을 지정합니다.

아래 그림과 같습니다.

2, CSS 패딩 속성

CSS 패딩 속성은 요소의 테두리와 콘텐츠 사이의 공백을 정의합니다. 패딩 속성 은 길이 값이나 백분율 값을 허용하지만 음수 값 ​​은 허용하지 않습니다.

4가지 방향(상단, 오른쪽, 하단, 왼쪽)으로 패딩을 직접 설정할 수 있습니다.

<span style="color: #000000;">h1 {padding: 10px;}  
  
或者<br>
h1 {padding: 10px 0.25em 2ex 20%;}</span>

다음 네 가지 개별 속성을 사용하여 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩을 각각 설정할 수도 있습니다.

  • 패딩탑
  • 패딩 오른쪽
  • 패딩 바닥
  • 패딩-왼쪽

패딩 백분율 값

앞서 언급했듯이 요소 패딩에 대한 백분율 값을 설정할 수 있습니다. 백분율 값은 여백과 마찬가지로 상위 요소의 너비를 기준으로 계산됩니다. 따라서 상위 요소의 너비가 변경되면 해당 요소도 변경됩니다.

다음 규칙은 단락 패딩을 상위 요소 너비의 10%로 설정합니다.

p {padding: 10%;}

예: 단락의 상위 요소가 div 요소인 경우 패딩은 div의 너비를 기준으로 계산됩니다.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="width: 200px;"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This paragragh is contained within a DIV that has a width of 200 pixels.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 

참고: 상단 및 하단 패딩은 왼쪽 및 오른쪽 패딩과 일치합니다. 즉, 상단 및 하단 패딩의 비율은 상대 요소의 너비를 기준으로 설정됩니다. 높이까지.

默认值: 0
继承性: no
版本: CSS1
JavaScript 语法: object.style.padding="10px 5px"

가능한 값

描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

 

 

三,CSS 边框属性

CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-width)和颜色(border-color)。(如果有可见背景的话,元素的背景会延伸到边框区域,因为元素的背景是内容、内边距和边框区的背景)

既可以直接定义边框的样式、宽度、颜色,也可以定义单边样式、宽度、颜色。如下图所示:

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

 

 

四,CSS margin属性

围绕在元素边框的空白区域是外边距(默认是空白的。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值

可以直接设置四个方向(上,右,下,左)的外边距:

<span>h1 {margin: 10px;}  
  
或者<br>
h1 {margin: 10px 0.25em 2ex 20%;}</span>

也可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

 

默认值: 0
继承性: no
版本: CSS1
JavaScript 语法: object.style.margin="10px 5px"

可能的值

描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

아래 소개: 마진 병합

여백 병합은 두 개의 수직 여백이 만나 하나의 여백을 형성한다는 의미입니다. 병합된 여백의 높이는 병합된 두 여백의 높이 중 더 큰 것과 같습니다. (ps: 일반 문서 흐름에서 블록 상자의 세로 여백만 병합되며 인라인 상자, 플로팅 상자 또는 절대 위치 상자 사이의 여백은 병합되지 않습니다.)

요소가 다른 요소 위에 나타나면 첫 번째 요소의 아래쪽 여백이 두 번째 요소의 위쪽 여백과 병합됩니다. 아래 사진을 봐주세요:

한 요소가 다른 요소 내에 포함된 경우(여백을 구분하는 패딩이나 테두리가 없다고 가정) 해당 요소의 위쪽 및/또는 아래쪽 여백도 병합됩니다. 아래 사진을 봐주세요:

이상하게 보일 수도 있지만 여백은 자체적으로 병합될 수도 있습니다.

여백은 있지만 테두리나 패딩은 없는 빈 요소가 있다고 가정해 보세요. 이 경우 위쪽 여백과 아래쪽 여백이 서로 닿아 병합됩니다.

이 여백이 다른 요소의 여백과 만나면 병합됩니다.

이것이 일련의 단락 요소가 매우 작은 공간을 차지하는 이유입니다. 모든 여백이 함께 병합되어 작은 여백을 형성하기 때문입니다.

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