您的位置：首页 > Web前端 > HTML

html 盒子模型基础（内联元素的盒模型）（二）

2017-02-07 09:21 218 查看
1.内联元素的盒子模型

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}

.s1 {
/*设置背景颜色*/
background-color: yellow;
/*设置宽和高*/
/*width: 100px;
height: 100px;*/
/*
内联元素不支持设置宽和高，
内联元素元素的大小由内容决定
* */
/*
设置元素的内边距
内联元素支持水平方向的内边距
内联元素可以设置垂直方向的内边距，但是不会影响布局
* */
padding-left: 100px;
padding-right: 100px;
/*padding-top:50px ;
padding-bottom: 50px;*/
/*
设置元素边框
支持水平方向的边框，也可以设置垂直方向的，但是垂直方向的不会影响布局
* */
/*border: 20px solid red;*/
/*设置元素的外边距
内联元素支持水平方向的外边距 , 不支持垂直方向的外边距
* */
margin-left: 100px;
margin-right: 100px;

margin-top: 10000px;
margin-bottom: 10000px;
}

.s2{
background-color: green;
}
</style>
</head>

<body>

<div class="box1"></div>
<span class="s1">我是一个span</span><span class="s2">我是一个span</span>
<div class="box1"></div>

</body>

</html>
</html>

效果：

       
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html 经验
相关文章推荐
新的分享
章节导航