使用Div和CSS布局网页 元素的类型与转换

鳄鱼君Ba

发表文章数:514

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » 使用Div和CSS布局网页 元素的类型与转换

CSS布局基础

css中的width是盒子模型中内容区的宽度,浏览器中显示的元素的宽度是内容宽度,左右内边距和左右外边框的总和。背景颜色会填充内容区域和内边距,每个元素都可以有可见的4个边框。使用box-sizing:border-box模式会包含除外边距以外的所有要素。

<style type="text/css">
.box{
    width: 100px;
    height: 100px;
    padding: 20px;  
    border: 5px solid #E6A43F; 
    background-color: blue; 
} /*盒子的大小为20+5+100+5+20 x 20+5+100+5+20  150x150 */
.border-box{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 20px;  /*内边距*/
    border: 5px solid #3DA3EF;  /*设置边框*/
    background-color: yellow; /*背景颜色*/
} /* 盒子大小为 100-20-5-20-5 x 100-20-5-20-5  为50x50 */
</style>
<div class="box">默认属性</div><br>
<div class="border-box">border-box</div>

可以看到两个div的大小和边框都是一致的,但是使用box-sizing: border-box的div边框要小很多,这里自己尝试一下效果。

“仅适用于块级元素”,那么是什么是块几元素呢?HTML标记被定义了不同的类型,分为块标记(块元素)行内标记(行内元素),我们呢来看一下具体的解释:

  • 块元素:在页面中以区域块的形式出现,每一个块元素通常都会独自占据一整行或多整行。可以对它设置宽度、高度、对齐等属性。
  • 行内元素:不占优独立的区域,仅仅靠自身的字体大小核图像尺寸来支撑结构。一般情况下不可以设置宽度、高度、对齐等属性。

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

常见的行内元素有<strong><em><a><b><u><span>

元素的类型转换使用的是display属性,属性取值有四种,分别是:

  • inline:元素将显示为行内元素(行内元素默认的display属性)。
  • block:元素将显示为块元素(块元素默认的display属性值)。
  • inline-block:此元素将显示为行内块元素,可以对其设置宽高和对齐等属性,但是该元素不会独占一行。
  • none:此元素将被隐藏,不显示,也不占用页面空间。

具体解释:值为block时,显示为块级元素,就像开始新的段落;值为inline时,让元素显示位行内元素(不同于开始新的段落);值为inline-block时,让元素显示位行内元素,同时具有块级元素的特征,即可设置为width、height、margin、padding等属性;值为none时,隐藏元素并将其从文件流中完全删除,其他不常用属性值不在介绍。

<style type="text/css">
    a{
    	display: block;  /*a标签变为块级元素 独占一行*/
    }
    .a2{
        display: none;    /*隐藏标签2*/
    } 
    .a3{
    	display: inline-block; /* 显示位行内元素,同时具有块级元素*/
	margin: 10px auto;
    }
 </style>

<a class="a1" href="#">标签1</a>
<a class="a2" href="#">标签2</a>
<a class="a3" href="#">标签3</a>

块级元素独占一行,a标签不属于块级元素,那么应该是并排显示的,设置display:block之后,就变为块级元素,单独占一行显示了。

visibility属性,设置元素是否可见,值为hidden时,元素不可见,但文档流中其他应该出现的位置会留下一片空白。

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《使用Div和CSS布局网页 元素的类型与转换》 发布于2020-04-16

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

6 + 8 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册