HTML의 일부
-
DTD 부분 : 표준 문서 형식 선언, 성명 버전,
- 헤더 섹션 : 기계를 볼 수
- 신체 부위 : 포스터
CSS div의 제어 디스플레이
-
그것은 블록 레벨 요소이다. 이 내용은 자동으로 새 줄을 시작을 의미합니다. 사실, 새로운 라인입니다유일한 형식 고유의 성능을 제공합니다. 로클래스 또는 ID가 추가 스타일을 적용합니다.
- 다음 코드는 너비와 높이 및 배경 색상으로 각 CSS div의 ID를 제공
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#a {
width: 200px;
height: 100px;
background: red;
}
#b {
width: 200px;
height: 100px;
background: blue;
}
#c {
width: 200px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>
결과의 구현 :
부동 레이아웃
우리는 결과를 볼 수있는 배경색을 설정하는 두 개의 사업부를 썼다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#lside {
height: 200px;
background: red;
}
#rside {
height: 200px;
background: green;
}
</style>
</head>
<body>
<div id="lside">我是左边</div>
<div id="rside">我是右边</div>
</body>
</html>
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
위는 콘텐츠 ddiv 자동으로 새로운 라인을 시작했다, 그래서 나는 수행 할 것 부동 DIV 레이아웃 주위에 배열 된 두 개의을 원하는
우리는 CSS 플로트 속성에 함께했다
<style type="text/css">
#lside {
height: 200px;
background: red;
float: left;
}
#rside {
height: 200px;
background: green;
float: right;
}
</style>
그림과 같이 결과 :
[이미지 소스 스테이션 보안 체인 메커니즘을 가질 수있다, 체인이 실패 덤프, 아래로 직접 업로드 한 사진을 저장하는 것이 좋습니다 (IMG-X2fX1HDI-1571666262498) (https://upload-images.jianshu.io/upload_images/1102523-8225be3b4d92fefc.png ? imageMogr2 / 자동 오리엔트 / 스트립 | imageView2은 / 1,200분의 2 / w / 포맷 / WebP 형식)]
지우기 플로트
DIV 일반 레이아웃과 함께 선물을 떠 때, 다음과 같은 상황이 발생 커버
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#lside {
height: 200px;
background: red;
float: left;
}
#rside {
height: 300px;
background: green;
float: right;
}
#normal {
height: 400px;
background: blue;
}
</style>
</head>
<body>
<div id="lside">我是左边</div>
<div id="rside">我是右边</div>
<div id="normal">我不设置浮动</div>
</body>
</html>
所以如果不想被覆盖，就要清除浮动
在CSS中对普通元素设置clear属性
当我们增加 clear: left; 时，代表不让左边浮动盖着自己
#normal {
height: 400px;
background: blue;
clear: left;
}
此时清除左浮的div就会贴着左浮的div下边显示，如图：
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，编程工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行前端前端前端
同样的还可设置 clear: right; 代表不让右边浮动盖着自己；设置 clear: both; 代表不让浮动盖着自己。这里不做演示