분류
css
CSS에서 사용되는 박스와 관련된 속성들
본문
홈페이지제작의 주요 구성요소인 CSS에서 중요하게 다루는 부분이 박스개념인데 박스와 관련된 CSS속성들은 아래와 같습니다. (출처:w3schools.com)
Basic Box Properties
Property | Description | CSS |
---|---|---|
bottom | Specifies the bottom position of a positioned element | 2 |
clear | Specifies which sides of an element where other floating elements are not allowed | 1 |
clip | Clips an absolutely positioned element | 2 |
display | Specifies how a certain HTML element should be displayed | 1 |
float | Specifies whether or not a box should float | 1 |
height | Sets the height of an element | 1 |
left | Specifies the left position of a positioned element | 2 |
overflow | Specifies what happens if content overflows an element's box | 2 |
overflow-x | Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area | 3 |
overflow-y | Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area | 3 |
padding | Sets all the padding properties in one declaration | 1 |
padding-bottom | Sets the bottom padding of an element | 1 |
padding-left | Sets the left padding of an element | 1 |
padding-right | Sets the right padding of an element | 1 |
padding-top | Sets the top padding of an element | 1 |
position | Specifies the type of positioning method used for an element (static, relative, absolute or fixed) | 2 |
right | Specifies the right position of a positioned element | 2 |
top | Specifies the top position of a positioned element | 2 |
visibility | Specifies whether or not an element is visible | 2 |
width | Sets the width of an element | 1 |
vertical-align | Sets the vertical alignment of an element | 1 |
z-index | Sets the stack order of a positioned element | 2 |
Flexible Box Layout
Property | Description | CSS |
---|---|---|
align-content | Specifies the alignment between the lines inside a flexible container when the items do not use all available space. | 3 |
align-items | Specifies the alignment for items inside a flexible container. | 3 |
align-self | Specifies the alignment for selected items inside a flexible container. | 3 |
display | Specifies how a certain HTML element should be displayed | 1 |
flex | Specifies the length of the item, relative to the rest | 3 |
flex-basis | Specifies the initial length of a flexible item | 3 |
flex-direction | Specifies the direction of the flexible items | 3 |
flex-flow | A shorthand property for the flex-direction and the flex-wrap properties | 3 |
flex-grow | Specifies how much the item will grow relative to the rest | 3 |
flex-shrink | Specifies how the item will shrink relative to the rest | 3 |
flex-wrap | Specifies whether the flexible items should wrap or not | 3 |
justify-content | Specifies the alignment between the items inside a flexible container when the items do not use all available space. | 3 |
margin | Sets all the margin properties in one declaration | 1 |
margin-bottom | Sets the bottom margin of an element | 1 |
margin-left | Sets the left margin of an element | 1 |
margin-right | Sets the right margin of an element | 1 |
margin-top | Sets the top margin of an element | 1 |
max-height | Sets the maximum height of an element | 2 |
max-width | Sets the maximum width of an element | 2 |
min-height | Sets the minimum height of an element | 2 |
min-width | Sets the minimum width of an element | 2 |
order | Sets the order of the flexible item, relative to the rest | 3 |
- 이전글오로지 CSS만으로 기막힌 메뉴 만들기 (No Javascript, No jQuery) 14.12.10
- 다음글http://border-image.com/ 15.05.01