网页设计

时间:2022-11-12 12:58:20

1.元素显示模式:

        元素显示模式就是元素(标签+)以什么方式进行显示 如<div>自己独占一行 <span>自己独占一行,html元素一般分为块元素和行内元素两种。(注释:div是大盒子一行只能有一个div,span是小盒子一行可以有多个span,div内可以包含多个span,但span内不能包含div)/

网页设计

运行后的结果:

网页设计

2.块元素:常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等,其中,<div>标签是最典型的块元素。 

 特点:1.比较霸道,自己独占一行。

            2.高度 宽度 外边距以及内边距都可以控制

            3.宽度默认是容器(父级宽高)的100%

            4.是一个容器及盒子,里面可以放行内或者块级元素

     

网页设计


            运行后的结果:

网页设计

            2.1div如果没有宽度,会和div的父亲body一样宽:


网页设计

运行后的结果:

                       

网页设计

注意:1.文本类的元素内不能使用块级元素

          2.<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>

           3. <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素



网页设计


运行后的结果:这里生成了2个<P>标签,而我之输入了一个<p>标签。


网页设计


2.2行类块元素:在行内元素中有几个特殊的标签,<img/> <input/> <td>,它们同时具有块元素和行内元素的特点.

     行内块元素:1.和相邻行内元素(行内块)在一行上,但是它们之间有空白缝隙。一行可以显示多个 ( 行内元素的点)                                                                                                                   

                        2.默认宽度就是它本身内容的宽度(行内元素特点)

                         3.高度 行高 外边距以及内边距都可以控制(块级元素的特点)

网页设计


运行后的结果:既可以一行多个,也可以改变高度 宽度

网页设计




总结:

网页设计

                                                                                                             2022年11月12日12点49分

                                                                                                               上午完成历经3小时完成