写给自己的web总结——css（3）

争取今天写完css吧！

前两篇讲了一些基础的东西，但还差一点，我先来把他补全

1.display

display 属性规定元素应该生成的框的类型。

我们最常用的几个值时

1.none：

此元素不被显示

注意如果父级元素引用了这个样式，那么子元素也会消失。

 <style>
.wrapper{
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
overflow: hidden;

}
.content{
width:50px;
height:50px;
top: 10px;
margin-top:10px;
background-color:red;
overflow: hidden;

}
</style>
</head>
<body>
<div class="wrapper">
  <div class="content"></div>
</div>
</body>

但如果再wrapper里加了一个display：none；那在浏览器上只会留下一片空白。

2.display：inline；

这个表示改元素为行级元素，是display的默认属性，让元素前后没有换行符

3.display：block；

此元素将显示为块级元素，此元素前后会带有换行符。

行级元素可以放在一行，块级元素一个单独占一行。

我们举几个例子

<style>
.wrapper{

background-color: blue;

width: 100000;

height: 50;

}
.content{

background-color:red;
}
div{display: inline;}
</style>
</head>
<body>
<div class="wrapper">这是一个行级元素</div>
  <div class="content">这是一个行级元素</div>

</body>

 <style>
.wrapper{
width: 100;
height: 50;
background-color: blue;
}
.content{

background-color:red;
}
div{display: block;}
</style>
</head>
<body>
<div class="wrapper">这是一个块级元素</div>
  <div class="content">这是一个块级元素</div>

</body>

注意一下上面的代码，行级元素设定宽高是没有用的，必须靠内容撑起来，而块级元素可以设定宽高

总结一下，在标准文档流里面，块级元素具有以下特点：

1.总是在新行上开始，占据一整行；
2.高度，行高以及外边距和内边距都可控制；
3.宽带始终是与浏览器宽度一样，与内容无关；
4.它可以容纳行级和其他块元素。

行级元素的特点：

1.和其他元素都在一行上；
2.高，行高及外边距和内边距部分可改变；（不能直接通过height改变，可以设置line-height）
3.宽度只与内容有关；
4.行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，行级元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。
4.display：inline-block
行级块元素
继承了行元素和块元素的特点，可以放在同一行，也可以设定宽高。

<style>
.wrapper{

height: 100px;
background-color: blue;
}
.content{

background-color:red;
width: 200px;
}
div{display: inline-block;}
</style>
</head>
<body>
<div class="wrapper">这是一个行级块元素</div>
  <div class="content">这是一个行级块元素</div>

</body>

注意ie6和ie7不兼容inline-block

兼容方法：

div{
    display: inline-block;
  }
  div{
    display: inline;
  }

先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为行内对象,两个display 要先后放在两个CSS声明中才有效果。

还有就是怎么去掉元素间的间距，在两个div中一般会存在4px的空白，原因是换行时系统会自动给你加上空格。

这里我主要使用两种方法

第一种是给你的元素之间设一个负数值的margin

iv{
    display: inline-block;
  }
  div{
    display: inline;
  }
.wrapper{
margin-right: -3px;
height: 100px;
background-color: blue;
}
.content{
margin-left: -2px;
background-color:red;
width: 200px;
}
div{display: inline-block;}
</style>
</head>
<body>
<div class="wrapper">这是一个行级块元素</div>
  <div class="content">这是一个行级块元素</div>

</body>

第二种方法是改变html结构

或者

都能达到去掉间距的效果

posted @ 2017-12-29 16:16 志鸿酱阅读(143) 评论(0) 收藏举报

刷新页面返回顶部

志鸿酱

写给自己的web总结——css（3）

公告