CSS学习3-div的使用以及盒子
DIV布局
1、如果单单就是一个div和span 那么他们的显示没有什么实际上的区别
他们主要的区别就是 div换行显示 而span不换行显示。。 DIV被认为是一个而span是行内元素 不会产生换行。
div的默认宽度是充满整个浏览器的并且会随着浏览器的变化而变化,div的宽度和高度设置的时候一定要带上单位如px
2、盒子模型是排版的一个重要模型 ,css所有元素都可以看成一个盒子来操作
CSS的盒子模型包括 margin border padding content 四个重要概念
在div中 只能设置内部文本居中并不能设置 div中的div居中我们设置居中要通过padding来设置 、
比如<div><div></div></div> 比如内部的div即使我们设置了内部div的宽度 但是如果我们设置了外部div的padding属性那么浏览器不显示我们设置的宽度
行内元素就是不可以换行的元素 ,span我们平时设置他的样式的时候也只是设置他的背景 字体等等,如果我们设置宽度和高度就不可以
如果我们想设置他的宽度和高度 那么就加上 display:inline-block; 这个把span设置成行内快显示,不会换行,
如果我们设置成displau:block;就会换行,因为此时span的显示相当于div,div可以嵌套span但是反过来就不可以 。
我们设置span的margin值为负数可以使两个span重合,我么如果想要看到重合的效果就不能使用xhtml的dtd约束。
padding:10px;默认情况下是设置div块的上下边界 .
3、 div可以嵌套div ,也叫子div 。
margin 和padding的值原则 1值: 上 右 下 左 三值: 上 左右 下 二值: 上下 左右 .
padding是指这个元素内部的内容和他的边界的距离,margin则是指这个元素边框和外部元素的距离 ,两个元素的margin和相加才是间距。 例如margin-left+margin-right
div高度 宽度设置原则是 :如果我们设置的高度或者宽度大于 内部所有盒子的总高度或者宽度 那么设置有效 , 否则设置无效 。
css中每一个元素都可以认为是一个盒子 、
4、 以上是盒子模型 下面是元素的定位:
float定位是css定位中使用频率最高的方法 。
float的效果一旦被设置,那么div块原先的占行效果就没有了, 就好像浮动在浏览器上面一样,n个浮动的div将 显示在一行 我们完全可以灵活的设置 margin 和padding
来控制div的位置 。比如一个div我们设置了浮动效果left ,如果他的后面还有一个div那么后面那个div 将会到前面那个div的行上,而前面设置了float的div将会漂浮在
后面的div上面 ,这就是div的float浮动效果。
一个div被设置了浮动效果 那么就会导致其后面的div向前移动,
知道了这个原理 我们考虑下 div菜单如何设置呢?
在设置内部嵌套div的margin为负数的时候,内部的div也可能出现超出外部块的情况 。
<div class="father">
<div class="son1">son1 </div>
<div class="son2"></div>
</div>
上述代码我们将son1 和son2的样式设置为float:left;的时候发现,无论我们怎么设置son的margin都不好用,而且son1 和son2这两个子块固定在 father的下边,
为了解决这个问题我们需要设置father的padding 设置到直到 son1和son2不超出father的时候,但是设置father的padding的时候我们发现实际上是设置了father的 。
左上边距离son1 和son2的距离 。
上面的两种方法都不好,最好的解决方案是 在所有的子div 的后再加上一个 不浮动的div 即没设置float属性的div ,这个时候我们发现 设置了float的div漂浮到了
下面这个div之上了 而且可以设置margin了,并且也没有超出 father ,并且father也会改变大小。
5、clear 作用如果指定范围有浮动对象 那么会换到没有浮动对象的那行显示 ,清除float对元素的影响,往往导致了大量的换行显示
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
清除所有float影响 clear:both ;在图文混排中很有用
6、内联样式 inline 可以使一个快元素 变成一个行内元素 ,不会换行 。看下面一段用div实现菜单的代码 。
如果div内部是行内即不换行的元素 或者设置了 diplay:inline;那么可以设置 text-Aline:center ; 居中显示 。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div.father{
border:1px dashed ;
background-color: #CCFFCC ;
padding:10px ;
text-align:center ;
width:10% ;
}
div.son1{
border: 1px dashed ;
background: #33CCFF ;
display:inline ;
margin:2px ;
}
a{
text-decoration:none;
height:100% ;
display: block;
padding:15px ;
margin:0px ;
}
a:hover{
color:#FFFF33 ;
font-size:18px ;
font-family:"Courier New", Courier, monospace ;
background-color:#FFCC33 ;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"><a href="#">inline1</a></div>
<div class="son1"><a href="#">inline1</a></div>
<div class="son1"><a href="#">inline1</a></div>
<div class="son1"><a href="#">inline1</a></div>
<div class="son1"><a href="#">inline1</a></div>
<div class="son1"><a href="#">inline1</a></div>
<div class="son1"><a href="#">inline1</a></div>
</div>
</body>
</html>