块级标签和行级标签都是盒子模型是什么意思啊?
块级标签和行级标签都是盒子模型是什么意思啊?
块级标签和行级标签都是盒子模型是什么意思啊?
2016-07-12
不是块级标签和行级标签都是块级元素
而是 块级标签和行级标签 我们都可以把其变成 块级元素
我们知道行标签有<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块级标签有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
举个简单的例子:
1.<span> <stong><em>都是行内元素
在 <span>我是css的样式标签么么哒<strong>我给字体加粗</strong>。我是css的样式标签<em>我是斜体</em>我是css的样式标签么么哒我是css的样式标签么么哒我是css的样式标签么么哒</span>
以上3个家伙 一个是样式标签。一个是加粗。一个是搞斜体的。但无论在这段文字中再加入多少个他们都改变不了这段文字的排版
2<div> <p> <h1>
<h1>我是标题栏</h1>
<p>我是一段文字我是一段文字我是一段文字</p>
<div>我就是个容器 俺胸怀可大可小 你是行的这里就变成块 的</div>
相信看完以上2点 应该能理解 行内标签 和 块状标签了
为什么块级标签和行级标签和行级标签都是盒子模型:
我们可以用<p>的开始和</p>的结束
把<span>或者<strong>或者<em>等行级标签包围起来 那么行级标签就能 独立出来 成为一个块
也就是一个独立段落。。。但成为块还不行 我们要让它成为盒子 以方便我们在网页布局中给他定位
SO:用<div>的开始和</div>的结束吧<span>或者<strong>或者<em>等行级标签包围起来
甚至用<div>把<P>包围起来 就相当于是盒子了
所以说什么都可以是盒子模型 只要用<div>和</div>把他们保卫起来 么么哒
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 另外
块级元素可以设置width,height属性.
行内元素设置width,height属性无效,它的长度高度主要根据内容决定.
块级元素即使设置了宽度,仍然是独占一行.
块级元素可以设置margin和padding属性.
行 内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
块级元素对应于display:block.
行内元素对应于display:inline.
举报