CSS 접기 스타일 (4) - div+css 레이아웃
- 黄舟원래의
- 2016-12-28 16:11:191940검색
콘텐츠 요약:
1. div 및span
(1) 블록 수준 태그: div
(2) 인라인 태그:span
그림과 같이:
2. 상자 모델(중요)
참고: 브라우저의 디버깅 도구를 사용하여 상자를 볼 수 있습니다
(1) 여백: 상자 외부 여백
(2) 패딩: 상자 내부 여백(상자 내부 여백의 크기가 변경됨) 블록)
(3) 테두리: 상자 테두리 너비
(4) 너비: 상자 너비
(5) 높이: 상자 높이
예:
①: 여백과 안쪽 여백의 차이:
demo.html
<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background:#C5C1AA;
}
div{
height:500px;
margin:60px;
padding:o;
border:solid 2px black;
background-color:rgba(255,0,0,0.7);
}
div.div1{
height:400px;
margin:0 audio;
border:solid 3px black;
background-color:rgba(0,0,255,0.7);
}
</style>
</head>
<body>
<div>
<div class="div1">
<h1 style="text-align:center;">欢迎登录系统</h1>
<h4 style="text-align:center;">账号:<input style="text"></h4>
<h4 style="text-align:center;">密码:<input style="text"></h4>
</div>
</div>
</body>
</html>② : 박스 모델 div 배치 예:
demo.html
<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background-color:rgba(0,0,255,0.3);
}
div{
width:500px;
height:500px;
background-color:rgba(250,128,10,0.8);
margin:0 auto; /* 使div居中*/
border:solid black;
}
div.div1{
float:left; /* 向左排列/*
background-color:rgba(255,0,0,0.4);
border:solid blue;
height:244px;
width:244px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div>
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html>3. 레이아웃 관련 속성(중요)
(1) 위치 지정 방법 ①. 일반 위치 지정: 상대 요소 ②. 브라우저 창에 따른 위치 지정: 고정됨 ④. 위치 지정 없음: 상속(2) 위치 지정. ①.왼쪽: XXpx(왼쪽) 페이지 정점으로부터의 거리 ②.right: XXpx(오른쪽) 페이지 정점으로부터의 거리 ③.top: XXpx(위) 페이지 정점으로부터의 거리 ④.bottom: XXpx (하단) 페이지 정점으로부터의 거리 (3) z-index 레이어 적용 순서 (우선순위) ①.-1,0,1,2,3 -1이면 해당 레이어가 하단 레이어
(4) 표시 표시 속성(블록 수준 레이블 및 인라인 레이블 간 전환)
①.display: 없음 레이어가 표시되지 않습니다.
②.display: 블록 블록 표시, 요소 뒤 줄 바꿈, 다음 블록 요소 표시
③.display : 인라인 인라인 표시, 한 줄에 여러 블록 표시 가능
(5) float float 속성
①.left : 왼쪽 float
②.right : 오른쪽 float
[b] (6) 클리어 클리어 플로트[/b]
①.clear: 둘 다
[b] (7) 오버플로 오버플로 처리[/b]
①. 레이어 크기를 초과하는 숨겨진 콘텐츠 숨기기
②.scroll 콘텐츠가 레이어 크기를 초과하는지 여부에 관계없이 스크롤 막대 추가
3.auto 크기 초과 시 스크롤 막대 자동 추가
[ b]예:[/b]
①: 고정 위치 및 레이아웃 데모
<!doctype html>
<html>
<head>
<title>Div+Css布局(布局相关的属性)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
div.diva{
position:relative; /* 一定要添加，如没添加其子元素则不生效*/
margin:50px;
width:500px;
height:500px;
background-color:rgba(255,0,0,0.4);
}
.spanb{
position:absolute;
background-color:blue;
color:black;
top:-10px;
right:0;
}
.fixed{
padding:20px;
background:green;
position:fixed;
left:0;
top:40px;
z-index:1; /* z-index的value值可为-1,0,1,2;当为-1时，该图层为最底层 */
}
</style>
</head>
<body>
<div class="fixed">
<p>联系人：翁孟铠</p>
<p>联系电话：XXXxxxx</p>
<p>地址：XXXXXXXXXXX</p>
</div>
<div class="diva">
<span class="spanb">浏览次数：222</spn>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>②: 플로팅 및 오버플로 효과 데모
<!doctype html>
<html>
<head>
<title>Div+Css布局(浮动以及溢出处理)</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0;
margin:0;
}
.div{
width:auto;
height:auto;
background:#f1f1f1;
margin:0 auto;
color: black;
}
.left{
width: 300px;
height: 400px;
position: inherit;
top: 60px;
background:yellow;
float: left;
color: black;
}
.right{
float: left;
width: 1049px;
height: 400px;
position: inherit;
top: 60px;
background:lavenderblush;
color: black;
}
.top{
width: auto;
height: 60px;
background: royalblue;
position: inherit;
top:0;
}
.bottom{
clear: both;
margin-top:20px;
width: 960px;
height: 20px;
background: red;
}
.jianjie{
height: 80px;
width: 200px;
background: brown;
overflow: auto;
}
</style>
</head>
<body>
<div class="div">
<div class="top">logo</div>
<div class="left">左边</div>
<div class="right">
简介:<br>
<div class="jianjie">
1、这是简介<br>
2、我们在做溢出测试<br>
3、hidden 隐藏超出层大小的内容<br>
4、scroll无论内容是否超出层大小都添加滚动条<br>
5、auto 超出时自动添加滚动条
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>그렇습니다. CSS 접기 스타일(4) - div+css 레이아웃의 내용 더 많은 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!