介绍
这篇文章主要讲解了“css内联样式的盒子模型实例介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css内联样式的盒子模型实例介绍”吧!
1,内联样式是不能设置宽度和高度的。
2,它可以设置水平内边距,会影响页面布的局,会将水平方向其他元素挤开,但是垂直内边距则不会影响页面布的局,它是选择覆盖其他元素。
3,它可以设置边框,垂直边框不会影响页面布的局,但是水平边框会(可以理解为跟水平内边距一样)
同时,内联元素支持水平方向的外边距,相邻元素外边距不会重叠而是求和。
内联元素不支持垂直外边框。
<强>实例
& lt; ! DOCTYPE html>
& lt; html>
& lt; head>
& lt; meta charset=癠TF-8"祝辞
& lt; title> & lt;/title>
& lt; style 类型=拔谋?css"比;
跨度{
background - color: #论坛;
}
.box1 {
宽度:100 px;
身高:100 px;
背景颜色:红色;
}
.s1 {/*
内才能容区,内边距,,边框,外,边距
*,*//*
,*内联元素不能设置宽度和高度
,*//*宽度:200 px;
身高:200 px; *//*
,*设置水平内边距,内联元素可以设置水平方向的内边距
,*/padding-left: 100 px ;
padding-right: 100 px ;/*
,*垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局
,*/padding-top: 50 px;
padding-bottom: 50 px;/*
,*为元素设置边框,
,*内联元素可以设置边框,但是垂直的边框不会影响到页面的布局
,*/边界:1 px blue 固体;/*
,*水平外边距
,*内联元素支持水平方向的外边距
,*//*,margin-left: 100 px ;
margin-right: 100 px; *//*
,*内联元素不支持垂直外边距
,*/margin-top: 200 px;
margin-bottom: 200 px;
}
.s2 {/*
,*为右边的元素设置一个左外边距
,*水平方向的相邻外边距不会重叠,而是求和
,*//*,margin-left: 100 px; */}
& lt;/style>
& lt;/head>
& lt; body>
& lt; span>我是一个span
& lt; span>我是一个span
& lt; span>我是一个span
& lt; span>我是一个span
& lt; div> & lt;/div>
& lt;/body>
& lt;/html> 感谢各位的阅读,以上就是“css内联样式的盒子模型实例介绍”的内容了,经过本文的学习后,相信大家对css内联样式的盒子模型实例介绍这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!
