HTML+CSS培训教案（十三）

最新推荐文章于 2024-05-23 16:52:46 发布

红壶吃猬队

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量155

点赞数

分类专栏： HTML/CSS HTML+CSS培训教案文章标签： HTML CSS 教程

本文链接：https://blog.csdn.net/chenmiaoqin950606/article/details/92428414

版权

HTML/CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML+CSS培训教案

16 篇文章 1 订阅

订阅专栏

三十、块级元素和行内元素

代码

（事先将一张图片（.jpg、.png均可）放入网页的同级目录下）

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>块级元素和行内元素</title>
        <style>
        div,span{width:200px;height:100px;}
        </style>
    </head>
    <body>
        <p>标记不同行：</p>
        <div><img src="<图片名>" border="0"></div>
        <div><img src="<图片名>" border="0"></div>
        <div><img src="<图片名>" border="0"></div>
        <p>标记同一行：</p>
        <span><img src="<图片名>" border="0"></span>
        <span><img src="<图片名>" border="0"></span>
        <span><img src="<图片名>" border="0"></span>
    </body>
<html>

知识点

块级元素：以块显示，自由宽高，无论大小独占一行。（例：div/p/li）
行内元素：以条显示，宽高随内容，后面元素可续尾。（例：span/img/b/u/i/a）
块级元素可以嵌套行内元素，反正则不行

三十一、定位

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>定位</title>
        <style>
        div{padding:20px;background:orange;margin-bottom:-4px;}
        </style>
    </head>
    <body>
        <div>看我的位置</div>
        <p>我作参考</p>
    </body>
<html>

知识点

元素默认靠左靠上
margin可以为负

扩展

给div添加CSS样式：position:absolute

答案：position元素定位属性，值：

(1)static（默认）：静态（没有定位）

(2)absolute：绝对定位，相对于static以外的第一个父元素

(3)relative：相对定位，相对于原静态定位的位置

(4)fixed：固定定位，相对于浏览器

红壶吃猬队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS培训教案（十三）

三十、块级元素和行内元素代码（事先将一张图片（.jpg、.png均可）放入网页的同级目录下）<html> <head> <meta content="text/html;charset=utf-8"> <title>块级元素和行内元素</title> <style>...
复制链接

扫一扫

专栏目录