块状元素和行内元素

最新推荐文章于 2023-12-08 09:49:08 发布

where_slr

最新推荐文章于 2023-12-08 09:49:08 发布

阅读量408

点赞数 1

分类专栏： css 学习笔记文章标签： css block inline

本文链接：https://blog.csdn.net/where_slr/article/details/72604189

版权

学习笔记同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

大牛王福朋先生对css中的display的分析

inline-block

<button> 按钮
<textarea> 文本域
<input> 输入框
<object> 
<select>

块状元素：
*{box-sizing:border-box}给盒子设置宽度

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度（可设置宽高）. ，可以用display：inline设置成行内元素；

常用块状元素：
<address>   定义地址
<caption>   定义表格标题
<dd>        定义列表中定义条目
<div>       定义文档中的分区或节
<dl>        定义列表
<dt>        定义列表中的项目
<fieldset>  定义一个框架集
<form>      创建 HTML 表单
<h1>        定义最大的标题
<h2>        定义副标题
<h3>        定义标题
<h4>        定义标题
<h5>        定义标题
<h6>        定义最小的标题
<hr>        创建一条水平线
<legend>    元素为 fieldset 元素定义标题
<li>        标签定义列表项目
<ol>        定义有序列表
<ul>        定义无序列表
<p>         标签定义段落
<table>     标签定义 HTML 表格
<tbody>     标签表格主体（正文）
<td>        表格中的标准单元格
<tfoot>     定义表格的页脚（脚注或表注）
<th>        定义表头单元格
<thead>     标签定义表格的表头
<tr>        定义表格中的行

行内元素：
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

<a>         标签可定义锚
<abbr>      表示一个缩写形式
<b>         字体加粗
<big>       大号字体加粗
<br>        换行
<em>        定义为强调的内容
<i>         斜体文本效果
<img>       向网页中嵌入一幅图像
<input>     输入框
<label>     标签为 input 元素定义标注（标记）
<select>    创建单选或多选菜单
<small>     呈现小号字体效果
<span>      组合文档中的行内元素
<strong>    语气更强的强调的内容
<textarea>  多行的文本输入控件

CSS
<style type="text/css">
          *{
                margin:0;
          }
           div{
                margin:1px;
                background-color:red;
          } 

          #test1 {
                width:400px;
          }
           #test2 {
                display:inline;
          }

          #a{
                display:block;
            }         
  </style>
  HTML
  <body>
    <div id="test">我是块状元素，我独占一行，宽度是父级的宽</div>
    <div id="test1">我是块状元素，我独占一行，但我有自己宽度</div>
    <div id="test2">我是块状元素，但我被设置成了行内元素，我不能被设置宽度，宽度随元素的内容而变化</div>
    <span>我是原生行内元素,我会跟着上面的行内元素兄弟"</span>
    <span id="a">我是原生行内元素,我应该和我兄弟一起的，但我被设置成了块状元素，要独占一行"</span>

 </body>

这里写图片描述

where_slr

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块状元素和行内元素

块状元素： *{box-sizing:border-box}给盒子设置宽度块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度（可设置宽高）. ，可以用display：inline设置成行内元素；常用块状元素：
复制链接

扫一扫