02_块元素和行内元素的使用

一、HTML块元素和行内元素的使用

1、块元素: div标签

定义和用法:

  1. 标签块元素,表示一块内容,div标签可以把文档分割为独立的、不同的部分
  2. 可以使用css设置宽高
  3. 默认是占用一整快
  • 例如:
<html>
  <body>
  		
  		<div style="height:100px;background: red;">哈哈哈哈div>
  		<div style="height:200px;background: yellow;">这是第二块div>
  body>
html>

02_块元素和行内元素的使用_第1张图片


2、行内元素: span标签,

定义和用法:

  1. 不能设置宽高
  2. 设置多个行内元素,一般用于文字显示
  • 例如:
<html>
  <body>
    	
      <span style="height:200px;background: green;width: 500px;">python8888span>
      <span style="height:200px;background: mediumvioletred;">java7888span>
  body>
html>

02_块元素和行内元素的使用_第2张图片


3、行内块元素

定义和用法:

  1. 将一行内容分为多个快
  2. 所有的元素都可以通过css设置为行内块元素
  3. 可以看成是一行内分成多个列进显示
  4. 通过css设置:    display: inline-block
  • 例如:
<html>
  <body>
  		
  		<span style="display: inline-block; height:200px; width:300px; background: red;">pythonspan>
  		<div style="display: inline-block; height:200px; width:300px; background: cornflowerblue;">前端div>
  		<span style="display: inline-block; height: 200px;width: 300px;background: red;">python后端span>
  		<div style="display: inline-block; height: 200px;width: 100px;background: chocolate;">前端内容div>
  body>
html>

02_块元素和行内元素的使用_第3张图片

你可能感兴趣的:(前端系列学习,前端,html)