<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
background-color: yellow;
/* 设置高度和宽度没有效果 */
width: 100px;
height: 100px;
}
/*
1.行内元素的盒子模型
-结论:
-行内元素不支持设置宽度和高度:只是别被内容撑开的
-行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
-行内元素可以设置border,但是垂直方向border不会影响页面的布局
-行内元素可以设置margin,但是垂直方向margin不会影响页面的布局
总结:垂直方向不会影响布局,水平方向会
*/
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
/* a 是行内元素
但是现在有需求:需要设置行内元素变成块元素,所以
引出一个新的属性:display
display:用来设置元素的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内快元素
行内块,既可以设置宽度和高度又不会独占一行
table 将元素设置一个表格
none 元素不在页面中显示(不会占据位置了)
visibility:用来设置元素的显示状态
可选值:
visible 默认值,元素在页面中正常显示
hidden 元素在页面中隐藏,不显示,但是依然占据有位置
*/
a{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<a href="javascript:"></a>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
