웹 프런트엔드 학습 노트 05-CSS 내부 간격, 외부 간격, 상자 모형, 페이지 레이아웃
32895 단어 웹 프런트엔드 학습
【내부 여백 설정 상용 속성】
키워드
뜻풀이
padding
객체의 네 모서리에 대한 내부 여백, 매개변수 개수 1 또는 2(위/아래/좌우) 또는 4(위/오른쪽/아래/왼쪽)를 읽어들이거나 설정합니다.
padding-top
검색 또는 설정 대상 맨 위의 내변거리, top 맨 위,bottom 낮음,left 왼쪽,right 오른쪽
&&padding은 원소의 크기를 바꿉니다
2. CSS 외부 간격(외부 보정, 외부 패치)
【외곽거리 설정 상용 속성】
키워드
뜻풀이
margin
객체의 네 모서리 바깥쪽 여백, 매개변수 개수 1 또는 2(위/아래/좌우) 또는 4(위/오른쪽/아래/왼쪽) 읽어들이거나 설정합니다.
margin-top
검색 또는 설정 대상 맨 위의 바깥쪽 거리, top 맨 위,bottom 낮음,left 왼쪽,right 오른쪽
& &margin을 이용하여 원소의 수평을 가운데로 맞추기:
margin: 0 auto; & &margin을 이용하여 경계선 통합: 바깥쪽 거리 값을 마이너스로 설정하는 경계선 너비/* */
border: 5px solid green;
/* */
margin-top: -5px;
3. 상자 모형
요소는 페이지에 상자와 같은 네모난 블록으로 표시됩니다. CSS 상자 모델은 실제 상자를 비유하여 요소 스타일 설정을 보조하는 것입니다.원소를 상자로 간주하면 대응하는 양식은 상자의 테두리-border, 상자 안의 내용과 테두리 사이의 간격-padding, 상자와 상자 사이의 간격-margin이다.
[상자의 실제 사이즈]
= width + padding + border
= height + padding + border
( ) = width + padding + border + margin
( ) = height + padding + border + margin
&&padding과border가 상자 크기를 바꾸는 것을 해결합니다: 즉 내부 간격을 설정하지만 요소 크기가 변하지 않습니다
box-sizing: border-box;4. 페이지 레이아웃 - 블록 요소, 인라인 요소 및 인라인 블록 요소4.1 블록 요소
블록 요소는 줄 요소라고도 부른다. 레이아웃에서 자주 사용하는 라벨은div,p,ul,li,h1-h6,dl,dt,dd 등이 있는데 레이아웃에서의 행위:
인라인 요소, 인라인 요소라고도 하는데 레이아웃에서 자주 사용하는 라벨은 a,span,em,b,strong,i 등이 있는데 레이아웃에서의 행동:
인라인 블록 요소, 인라인 블록 요소라고도 하는데 새로 추가된 요소 유형이다. 기존 요소는 이 유형에 속하지 않는다. img와 input 요소의 행위는 이런 요소와 유사하지만 인라인 요소로 분류되고 그들의 레이아웃에서의 행위는 다음과 같다.
블록 요소
인라인 요소
인라인 블록 요소
일반 태그
div p ul li h1-h6 dl dt dd
a span em b strong i
img input 유사
모든 스타일 지원 여부
예.
아니요
예.
너비
너비는 기본적으로 부모 요소의 100%입니다.
지원되지 않음, 폭은 내용에 의해 결정됨
지원, 기본적으로 내용의 너비
한 줄 독점 여부
예.
아니요
아니요
margin
뒷받침
margin 정도만 지원
뒷받침
padding
뒷받침
뒷받침
뒷받침
4.4 세 요소 간의 전환
display 속성은 요소의 유형과 숨김을 설정합니다.[display 일반 속성 값]
속성 값
뜻풀이
none
요소가 숨겨지고 위치를 차지하지 않습니다.
block
요소는 블록 요소로 표시됩니다.
inline
요소 내부 요소 표시(일반적이지 않음)
inline-block
원소 내 블록 원소 표시 (html5는 기본적으로 사용하지 않음)
이 섹션의 코드 예
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/c05.css"/>
<title>CSS 、 、 、 title>
head>
<body>
<div class="item1">div>
<div class="item2">div>
<div class="box1"> div><br/>
<div class="box2">BOX2BOXdiv><br/>
<div class="box3">BOX3BOXdiv><br/>
<div class="box4">BOX4BOXdiv><br/>
<div class="layout1">div>
，<span class="mm_span"> 。span> <br/>
<br/><br/><br/>
<br/>
<br/><br/>
<div class="layout2"><b>HELLOb>div>
<br/><br/>
，<input type="text" /> ，
<br/><br/>
<div class="c1 change1">111div>
<div class="c2 change1">222div>
<div class="c3 change1">333div>
，
<span class="change2"> ，span>
<span class="change2"> ，span>
<span class="change2"> ，span>
<span class="change2"> ，span>
<span class="change2"> 。span>
<div class="hide k1">k1div>
<div class="hide k2">k2div>
<div class="k3"><span> span>div>
body>
html>
div{
/*width: 100px;*/
/*height: 100px;*/
/*background-color: peachpuff;*/
/*border: 5px solid green;*/
/* */
/*padding-top: 30px;*/
/*padding-left: 30px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 10px 20px;*/
}
.item1{
width: 100px;
height: 100px;
background-color: plum;
/* */
/*margin-bottom: 50px;*/
/*margin-left: 5px;*/
/* */
/*margin: 0 auto;*/
margin-top: -5px;
}
.item2{
width: 100px;
height: 100px;
background-color: paleturquoise;
/*margin: 10px 20px;*/
/*margin: 10px 10px 10px 10px;*/
margin-top: -5px;
}
.box1{
width: 200px;
height: 200px;
background-color: orange;
border: 10px solid green;
padding: 20px;
}
.box2,.box3,.box4{
width: 150px;
height: 150px;
color: white;
background-color: brown;
}
.box3{
padding: 10px;
/* */
box-sizing: border-box;
}
.box4{
padding: 10px;
border: 10px solid dodgerblue;
box-sizing: border-box;
}
/* */
.layout1{
/* —— 100% ， （ ）， */
width: 100px;
height: 100px;
background: palevioletred;
margin: 20px;
[padding: 20px;]
}
.mm_span{
/* ， ， */
/* ， */
/*height: 100px;*/
background: lightgreen;
/* margin ， margin */
margin: 50px;
/* padding */
padding: 30px;
}
.layout2{
width: 200px;
height: 100px;
background: lightskyblue;
text-align: center;
line-height: 100px;
}
input{
/* —— ， ， */
/* ， */
width: 200px;
height: 100px;
margin: 30px;
padding: 30px;
}
/* */
.change1{
width: 100px;
height: 100px;
color: white;
/* */
/*display: inline;*/
/* */
/*display: inline-block;*/
}
.c1{
background: red;
}
.c2{
background: green;
}
.c3{
background: blue;
}
.change2{
width: 100px;
height: 100px;
background: pink;
/* */
/*display: block;*/
/* */
display: inline-block;
}
.hide{
width: 200px;
height: 100px;
background: yellowgreen;
/* */
display: none;
}
.k2{
display: block;
}
.k3{
width: 200px;
height: 100px;
background: bisque;
}
.k3 span{
display: none;
}
/* k3 */
.k3:hover span{
color: red;
font-size: 30px;
text-align: center;
line-height: 100px;
display: block;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[웹 전단] js json 중계수, 그룹 중계 json, 문자열 중계수텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
