css内联样式的盒子模型-Python学习网

css内联样式的盒子模型

css内联样式

小妮浅浅

2021-08-30 09:43:504456浏览 · 0收藏 · 0评论

1、内联样式是不能设置width和height的。

2、它可以设置水平内边距，会影响页面布局，会将水平方向其他元素挤开。

但是垂直内边距则不会影响页面布局，它是选择覆盖其他元素。

3、它可以设置边框，垂直边框不会影响页面布局。

但是水平边框会（可以理解为跟水平内边距一样）

同时，内联元素支持水平方向的外边距，相邻元素外边距不会重叠而是求和。

内联元素不支持垂直外边框。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
/*
  内容区、内边距 、边框 、外边距
 * */
/*
 * 内联元素不能设置width和height
 */
/*width: 200px;
height: 200px;*/
/*
 * 设置水平内边距,内联元素可以设置水平方向的内边距
 */
padding-left: 100px ;
padding-right: 100px ;
/*
 * 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
 */
padding-top: 50px;
padding-bottom: 50px;
/*
 * 为元素设置边框,
 * 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
 */
border: 1px blue solid;
/*
 * 水平外边距
 * 内联元素支持水平方向的外边距
 */
/* margin-left:100px ;
margin-right: 100px; */
/*
 * 内联元素不支持垂直外边距
 */
margin-top: 200px;
margin-bottom: 200px;
}
.s2{
/*
 * 为右边的元素设置一个左外边距
 * 水平方向的相邻外边距不会重叠，而是求和
 */
/* margin-left: 100px; */
}
</style>
</head>
<body>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div></div>
</body>
</html>

以上就是css内联样式的盒子模型，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。