必威体育Betway必威体育官网
当前位置:首页 > IT技术

CSS之div与span用法介绍

时间:2019-09-09 12:12:08来源:IT技术作者:seo实验室小编阅读:76次「手机版」
 

span

在使用p和span标签的时候,有时候总是糊里糊涂的搞不清楚其具体的属性用法规则,那么今天我们就来看看它们到底如何运用

首先 我们看看<p>标签,p这个标签是用来划分区域的,它是个块级元素block(块级元素就是它独自占领网页的一行)如果两个p 那么它们会是一个上,一个下,如图所示

那么<p></p>的元素例如字体部分的左右会被p控制不超出,但是下面则会随着字体数量超出红线框,图片也是如此比如图片大小也会超出,当然你可以设置p的属性overfloat为hidden就会隐藏超出部分,如下图所示

下面我们来看看<span></span>标签,span标签是个行内元素(行内元素就是在浏览器的一行上)比如span里面的元素不会换到下一行会,但是span元素的高宽没有效果,它的高宽是随着span内元素的数量来决定的,如果想设置span元素的宽高那么你需要设置dispaly为line-block,如图我们设置span宽高为10px 但是它没有效果远远超出了10px

这是两个span标签放在一起,如下图所示,证明了span是行内元素它们位于同一行(注:span设置了line-block所以宽高有效果)

下面我们定义display:line-block  高宽设置100px来看看效果

最后给大家画下  行内块元素和块元素的图形

相关阅读

css 布局的几种方式

前言 1 table 布局 2 flex 布局 2.1 盒模型 2.2 display / poistion 2.3 flexbox 布局 3 float 布局 3.1 高度塌陷 3.2 两栏布

css中的四种定位以及top和margin-top的区别

css中一共有四种定位分别是默认,相对,绝对,固定 position:static,这种定位是默认的,一般没什么实际的作用。 position:relative,相对定

最好的文本框样式 最漂亮的文本框样式 textbox css样

https://www.cnblogs.com/coolsundy/p/4229439.html

CSS3起步 02-------css3选择器

基本选择器:css3选择器中存在着九种基本选择器,通配符选择器;元素选择器;类选择器;id选择器;后代选择器;子代选择器;相邻兄弟选择器;通用兄

用css3做阴影

用css3做阴影 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/c

分享到:

栏目导航

推荐阅读

热门阅读