块级元素

时间 2019-12-14

标签元素繁體版

原文原文链接

[2019.07.04 学习笔记1]html

1.块级元素（block element）独占一行，排斥与其余元素同行。浏览器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块级元素</title>
 6 </head>
 7 <body>
 8     <p>段落</p>
 9     <p>段落</p>
10     <p>段落</p>
11     <p>段落</p>
12 </body>
13 </html>

块级元素

2.块级元素通常是其余元素的容器，可容纳块级元素和行内元素。ide

3.默认状况下宽度与浏览器宽度同样，与内容无关学习

可设置元素宽（width）和高（height），四个方向的内边距（padding）和外边距（margin）。spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块级元素</title>
 6 </head>
 7 <body>
 8     <p style="width:200px; height: 200px; padding: 10px; margin: 10px;">段落</p>
 9     <p>段落</p>
10     <p>段落</p>
11     <p>段落</p>
12 </body>
13 </html>

块级元素-设置属性

4.CSS样式默认显示为dispaly:block;，可将块级元素设置为行内元素。code

5.块级元素有：address、div、dl、ol、ul、form、table、h1~h六、p、pre、hr、fieldset（控制组）orm

6.可设置位置属性alignhtm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>块级元素</title>
 6 </head>
 7 <body>
 8     <p>段落</p>
 9     <p align="center">段落</p>
10 </body>
11 </html>

块级元素--位置属性