您的位置：首页 > Web前端 > CSS

HTML+CSS学习杂记——布局

2015-06-03 16:05 453 查看

1.css块浮动

是一种像气泡一样的上浮，同时还可以设置上浮的左右方向。如：

<head>
<style type="text/css">
div{
border:2px red solid;
width:100px;
height:400px;
float:left;
}
#div2{float:right}
</style>
</head>

<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
<div id="div3">栏目3</div>
</body>

结果如图：

2.css盒子模型

width和height设置的是内容部分的宽和高，其中的内容按照流动模型从左到右，从上到下。

3.html中标签分类

html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：
<img>、<input>

inline-block元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

可以显示地改变某个标签的块类型。如：

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

4.css层模型

绝对定位：将一个元素设置为 position:absolute; 则将该元素从文档流中脱离出来，他会相对其最近的一个有定位属性的元素进行某个上下左右方向绝对量的偏移，一般将这个父元素设为relative，无偏移。

相对定位：按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

<span style="color:#000000;"><body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body></span>

即现在<span>中的内容写在<div>的后面，虽然<div>已经按照相对定位显示了，但是<span>还是按照<div>呆在原位置来流动定位的。

固定定位：fixed，表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。

5.css居中

块元素的居中是通过设置margin来弄的，块内的内容是通过 text-algin:center; 来弄的。当margin设置为auto时，比如 margin:10px auto; 则上下边界10px而左右边界相等，自动根据width来使这个块居中。

6.不定宽度的块状元素的居中设置

不定宽度的块状元素比如：<ul>，这个东西设置width和 margin: 0 auto;之后没有居中效果。可以通过一下几个方法来设置居中显示：

（1）给ul加一个table父元素，将table设为margin: 0 auto。这里table对于里面的一行只有单个单元格<td>具有自动居中功能。缺点是加了混淆语义的table标签。

（2）给ul加一个div父元素，将div设为margin:0和text-align:center。还有ul要设成display:inline。缺点是改变了ul的块类型，使丧失了设置宽高等的功能。

（3）给ul加一个div父元素，设置div为:

div{
float:left;
display:relative;
left:50%;
}

ul{
display:relative;
left:-50%;
}

这里50%是相对父元素宽度的50%，div相对整个窗口，而ul相对div。如图，蓝色为div，而ul为红色：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css

相关文章推荐

新的分享

章节导航