网站首页 > 知识剖析正文

web前端基础之css块元素

nixiaole 2024-11-23 20:34:30 知识剖析 15 ℃

#你是否为自己人生虚度而纠结和彷徨#

常见的块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol><li>...

文字类的标签内不能使用块级元素，比如<p>,<h1>~<h6>等标签主要用于存放文字，因此标签内不能放块级元素。

行内元素的特点

常见的行内元素有<a>,<strong>,<em>,<span>...

链接里不能再放链接;

特殊情况链接<a>里可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素：inline-block

<input/>,<img/>,<td>,同时具有块元素和行内元素的特点。

一行显示多个，但两个元素之间有空白缝隙；

默认宽度是内容本身的宽度；

width、height、padding、margin可控制。

块级元素：block

1.独占一行

2.可以设置width/height

3.默认width是父级元素宽度的100%

4.块级元素里可以放块级元素和行内元素

行内元素：inline

1.一行可以显示多个

2.width/height设置无效

3.width默认内容的宽度

4.行内元素里只能放文字或者其它行内元素

algin:图片的对齐属性

center图片和文字居中对齐

top文字显示在图片的顶部

bottom文字跟图片顶部对齐

<!DOCTYPE html>

<html>

<head>

<style>

*{padding:0;margin:0;}

/*块级元素:block

1.独占一行

2.可以设置width/height

3.默认width是父级元素宽度的100%

4.块级元素里可以放块级元素和行内元素*/

.tag-block{width:40px;height:50px;}

.tag{background:blueviolet;width:200px;height:150px;}

/*行内元素:inline

1.一行可以显示多个

2.width/height设置无效

3.width默认内容的宽度

4.行内元素里只能放文字或者其它行内元素*/

.tag-inline{background: brown;}

/*行内块元素:inline-block

1.一行可以显示多个

2.默认宽度是内容的宽度

3.可以设置width/height */

.tag-inline-block{background: gold;width:100;height:100;}

</style>

</head>

<body>

<div class="tag-block">div标签</div>

<ul>

</ul>

<ol>

</ol>

<span class="tag">span标签</span>

<strong class="tag">fffff</strong>

<!--algin:图片的对齐属性

center图片和文字居中对齐

top文字显示在图片的顶部

bottom文字跟图片顶部对齐-->

</body>

</html>

最后有什么学习编程的心得和感想，欢迎在评论区下方留言交流[微笑]

上一篇： CSS 实用技巧:伪元素&伪类的妙用
下一篇： HTML行内元素与块级元素有哪些及区别?

网站首页 > 知识剖析 正文

web前端基础之css块元素

常见的块元素

行内元素的特点

行内块元素：inline-block

块级元素：block

行内元素：inline

algin:图片的对齐属性

猜你喜欢

网站首页 > 知识剖析正文