A, CSS display mode
1. In all HTML tags in HTML into two categories, namely, a container and text-based level. In CSS CSS tags will all fall into two categories, namely block elements and inline elements
2. What is block-level elements? What is inline elements?
(1) block-level elements will separate line
(2) the elements do not separate line row
3. The block-level elements
p div h ul ol dl li dt dd
Row element
tension tube stong em ins del
4. Memory Strategy: All the container level tag plus p are block-level elements; all stages except the text label p, is the line element.
5. Examples
< Div > I am a div </ div > < the p- > I am a paragraph </ the p- > < h1 > I'm heading </ h1 > < HR > < span > I am a span </ span > < b > I am bold </ b > < strong > I emphasize </ strong >
6. The difference between the block elements and inline elements
(1) block-level element
If the width is not set, then the parent element and as wide as the default; if the width is set, then set according to the display.
(2) row element
If the width is not set, then the content and as wide as the default; if the width is set, nor is not set length and width.
Examples: common code
< Div > I am a div </ div > < HR > < span > I am a span </ span >
Take a look at the default
div{
background: red;
}
span{
background: blue;
}
Let's look at a set of
div{
background: red;
width: 100px;
height:100px;
}
span{
background: blue;
width: 100px;
height:100px;
}
The example above the word line with our expectations
But now we ask questions: If you want neither its own line, but also can set the height and width?
We lead "inline block elements"
Within the block-level element row 7.
Features: Neither line by itself can set the width and height
This is the img tag
例子：
image{ width: 50px; height:50px; } .........省略代码...... <img src="image\play_tennis.jpg" alt=""> <img src="image\play_tennis.jpg" alt="">
二、CSS元素显示模式转换
给标签设置属性
display:值；
值的范围：inline代表转换为行内标签；block代表转换为块级标签；inline-block代表转换为行内块级标签
div{ display: inline;/*转换为行内的标签*/ background: red; height: 100px; width: 100px; } span{ display: block;/*转换为块级标签*/ background: blue; height: 100px; width: 100px; } .c{ display: inline-block;/*转换为块级行内标签*/ background: yellow; height: 100px; width: 100px; } .........省略代码........ <div>我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> <p class="c">我是段落</p> <b class="c">我是加粗</b>
2.快捷键
di+table键：display: inline;
db+table键：display: block;
dib+table键：display: inline-block;
三、源码：
d91_CSS_display_mode.htm
d92_CSS_display_mode_transform.html
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼
