분류 css

CSS에서 사용되는 박스와 관련된 속성들

컨텐츠 정보

  • 조회 3,089 (작성일 )

본문

홈페이지제작의 주요 구성요소인 CSS에서 중요하게 다루는 부분이 박스개념인데 박스와 관련된 CSS속성들은 아래와 같습니다. (출처:w3schools.com)

 

 

Basic Box Properties

PropertyDescriptionCSS
bottomSpecifies the bottom position of a positioned element2
clearSpecifies which sides of an element where other floating elements are not allowed1
clipClips an absolutely positioned element2
displaySpecifies how a certain HTML element should be displayed1
floatSpecifies whether or not a box should float1
heightSets the height of an element1
leftSpecifies the left position of a positioned element2
overflow
Specifies what happens if content overflows an element's box2
overflow-xSpecifies whether or not to clip the left/right edges of the content, if it overflows the element's content area3
overflow-ySpecifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area3
paddingSets all the padding properties in one declaration1
padding-bottomSets the bottom padding of an element1
padding-leftSets the left padding of an element1
padding-rightSets the right padding of an element1
padding-topSets the top padding of an element1
positionSpecifies the type of positioning method used for an element (static, relative, absolute or fixed)2
rightSpecifies the right position of a positioned element2
topSpecifies the top position of a positioned element2
visibilitySpecifies whether or not an element is visible2
widthSets the width of an element1
vertical-alignSets the vertical alignment of an element1
z-indexSets the stack order of a positioned element2

Flexible Box Layout

PropertyDescriptionCSS
align-contentSpecifies the alignment between the lines inside a flexible container when the items do not use all available space.3
align-itemsSpecifies the alignment for items inside a flexible container.3
align-selfSpecifies the alignment for selected items inside a flexible container.3
displaySpecifies how a certain HTML element should be displayed1
flexSpecifies the length of the item, relative to the rest3
flex-basisSpecifies the initial length of a flexible item3
flex-directionSpecifies the direction of the flexible items3
flex-flowA shorthand property for the flex-direction and the flex-wrap properties3
flex-growSpecifies how much the item will grow relative to the rest3
flex-shrinkSpecifies how the item will shrink relative to the rest3
flex-wrapSpecifies whether the flexible items should wrap or not3
justify-contentSpecifies the alignment between the items inside a flexible container when the items do not use all available space.3
marginSets all the margin properties in one declaration1
margin-bottomSets the bottom margin of an element1
margin-leftSets the left margin of an element1
margin-rightSets the right margin of an element1
margin-topSets the top margin of an element1
max-heightSets the maximum height of an element2
max-widthSets the maximum width of an element2
min-heightSets the minimum height of an element2
min-widthSets the minimum width of an element2
orderSets the order of the flexible item, relative to the rest3

 

css