HTML+CSS 유체 모델의 블록 요소로 쉽게 시작하기

Flow 모델에 대해 먼저 이야기해 보겠습니다. Flow는 기본 웹페이지 레이아웃 모드입니다. 즉, 기본 상태의 웹 페이지의 HTML 웹 요소는 흐름 모델에 따라 웹 페이지 콘텐츠를 배포합니다.

유동 레이아웃 모델에는 두 가지 일반적인 특성이 있습니다.

첫째, 블록 요소는 포함 요소 내에서 수직으로 확장되고 위에서 아래로 순서대로 배포됩니다. 블록 요소는 100%입니다. 실제로 블록 요소는 행 형태로 해당 위치를 차지합니다.

아래에서는 흐름 모델 아래에 블록 요소의 예를 작성합니다. 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">中国</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 

    <h1>PHP 中文网</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 

    <p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p>
    <!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    
    <div id="box1">强军</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>

위 코드에서 세 개의 블록 요소 레이블(div, h1)의 너비는 다음과 같습니다. , p)는 100%로 표시됩니다

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>流动模式下的块状元素</title> <style type="text/css"> #box1{ width:300px; height:100px; } div,h1,p{ border:1px solid red; } </style> </head> <body> <div id="box2">中国</div> <h1>PHP 中文网</h1> <p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p>  <div id="box1">强军</div> </body> </html>

제출하다 코드 재설정

자동운전