效果：
visibility属性有4个值
inherit：规定应该从父标签继承visibility属性的值
<style>
div{
/*高*/
height:100px;
/*背景色*/
background-color: yellow;
}
/* 隐藏 */
.hiddenDiv{
visibility: hidden;
}
</style>
<body>
<div>div</div>
<div class="hiddenDiv">隐藏的div</div>
<div>div</div>
</body>
效果：
CSS属性分类
CSS有很多属性，如果根据继承性划分，主要分为两大类
可继承属性：父标签的属性值会传递给子标签（一般是文字控制属性）
列表标签可继承（list-style、list-style-type、list-style-position、list-style-image）
<style>
/* 文字控制类 */
body{
color:red;
font-size:25px;
}
</style>
不可继承属性：父标签的属性值不会传递给子标签（一般是区块控制属性）
<style>
/* 区块控制类 */
div{
color:red;
font-size:25px;
}
</style>
总结：一般如果是大小、形状之类的一般都不可继承的
盒子模型
先来看看盒子里面的结构 —— 盒子由内容、内边距、边框、外边距构成
标准的盒子模型标准是这样的
如果所有浏览器都遵循这样的规则，那么就不会产生适配等问题，但是偏偏有个顽皮的熊老人（这个搅屎棍→ →）搞了自己的模型标准
也就是说网页上的每一个标签都是盒子，每个盒子都有4个属性
content（内容）：盒子里面装的东西（网页中通常是指文字和图片）
padding（填充，内边距）
padding-lfet：设置元素的左内边距
<style>
div{
/*这边直接使用复合属性padding:属性顺序为上\右\下\左(顺时针)如果只设置2个值,那么第一个值指上下,第二个值指左右*/
padding: 25px 20px;
/*背景颜色*/
background-color: blue;
}
</style>
<body>
<div>div标签div标签</div>
</body>
效果：
margin（外边距）：让盒子与盒子之间保留一定空隙
margin-lfet：设置元素的左外边距
<style>
div{
/*外边距和内边距相似*/
margin: 30px 40px;
/*背景颜色*/
background-color: darkmagenta;
}
</style>
<body>
<div>div标签div标签</div>
</body>
效果：
border（边框）：盒子本身
border是个复合属性，属性的顺序是（border-width，border-style，border-color）
<style>
div{
/*边框设置 宽21px 双框 红色*/
border: 20px double red;
}
</style>
<body>
<div>div标签div标签</div>
</body>
效果：
CSS3新特性
RGBA透明度：RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，用来设置透明值
<style>
div{
/*设置宽高*/
width: 200px;
height: 50px;
}
.test1{
background-color: rgba(123,0,0,1.0);
}
.test2{
background-color: rgba(123,0,0,0.8);
}
.test3{
background-color: rgba(123,0,0,0.0);
}
.test4{
background-color: rgba(123,0,0,0.6);
}
.test5{
background-color: rgba(123,0,0,0.4);
}
.test6{
background-color: rgba(123,0,0,0.2);
}
</style>
<body>
<div class="test1">div1.0</div>
<div class="test2">div0.8</div>
<div class="test3">div0.0</div>
<div class="test4">div0.6</div>
<div class="test5">div0.4</div>
<div class="test6">div0.2</div>
</body>
效果：
补充：既然有透明度，那么就有不透明度（最简单的蒙版效果）
<style>
div {
/*设置宽高*/
width: 200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置不透明度*/
opacity:0.35;
}
</style>
<body>
<div>div1.0</div>
</body>
相关文章
精彩导读
热门资讯
关注我们
