<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s1{
background-color: orange;
width: 200px;
height: 50px;
/*
行内元素的盒子模型
-行内元素不支持设置宽度和高度(它的宽和高,也就是它的内容区,是由它的内容决定的)
-行内元素可以设置padding,但是垂直方向的padding不会影响页面的布局
-行内元素可以设置border,垂直方向的border不会影响页面的布局
-行内元素可以设置margin,垂直方向的margin不会影响页面的布局。水平方向的margin不会折叠,而是直接相加。
*/
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
/*
display 用来设置元素显示的类型
可选值:
inline将元素设置为行内元素
block将元素设置为块元素
(一般开发中少用,能不用就不用)
inline-block将元素设置为行内块元素
行内块:既可以设置宽度和高度又不会独占一行
table将元素设置为一个表格
none元素不在页面中显示(用来隐藏某些元素,需要的时候再显示出来)
visibility用来设置元素的显示状态
可选值:
visible默认值,元素在页面中正常显示
hidden元素在页面中隐藏 不显示
display和visibility的区别:
display:none;直接元素消失。
visibility:hidden;元素虽然隐藏了,但是还是会占用本来的空间。
*/
</style>
</head>
<body>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
38.行内元素的盒子模型
最新推荐文章于 2021-12-28 23:19:48 发布