网页布局基础

最新推荐文章于 2024-08-20 19:23:57 发布

yanmei_yaomy

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量520

点赞数

分类专栏： html 文章标签：布局 html

本文链接：https://blog.csdn.net/yanmei_yaomy/article/details/38925043

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

W3C标准，有万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML），表现标准语言（CSS），行为标准语言（DOM和ECMASscript）。倡导结构、样式、行为分离。

CSS中存在3种的定位机制：标准文档流（Normal flow）、浮动（Floats）、绝对定位（Absolute positioning）

标准文档流（Normal flow）特点：从上到下，从左到右，输出文档内容；由块级元素和行级元素组成。

块级元素：从左到右撑满页面，独占一行；触碰到页面边缘时，会自动换行。常见块级元素：div、ul、li、dl、dt、p……

行级元素：不会撑满一行，多个行级元素可以一行显示，直到撑满页面为止。常见行级元素：span、strong、img、input……

大部分表单控件都是行级标签。

块级标签、行级标签都是盒子模型。

样式的优先级：行内样式>内部样式>外部样式

margin:10px 18px; 两个：上下，左右。四个：上，右，下，左。三个：上，左右，下。

盒子3D模型：

自动居中-列布局

 <style type=”text/css”>
     #wrap{width:770px;margin:0 auto;}
     #header{width:100%;height:200px;border:1px solid red;}
     #mainbody{width:100%;height:200px;border:1px solid blue;}
     #footer{width:100%;height:200px;border:1px solid green;}
     .content{border:4px solid #badbdb;padding:44px 15px 15px;width:700px;}
     .book{background:url(images/t.book.gif) no-repeat #eff9f9;}
</style>
<div id=“wrap”>
     <div id=”header”>头</div>
     <div id=”mainbody” class=”content book”>内容</div>
     <div id=”footer”>尾部</div>
</div>
<span style="font-size:18px;">   </span><span style="font-size:18px;"><span style="font-family:Times New Roman;">     </span></span>

Float属性：3个属性值：left，right，none。元素会左移，或右移，直至触碰到容器为止。设置了浮动的元素，仍处于标准文档流中。（仍占据一定的宽度和高度）

当元素没有设置宽度值，设置了浮动属性，元素的宽度随内容的变化而变化。

元素设置浮动属性后，会对相邻的元素产生印象，相邻元素特指紧邻后面的元素。

清除浮动的常用方法：clear:both或者clear:left或者clear:right；同时设置width:100%+overflow:hidden

父节点不设置浮动，子节点设置浮动，父节点的高度无法扩展。父包含块缩成一条，此时用clear:both方法清除浮动无效，他一般用于紧邻后面的元素的清除浮动。此时用overflow:hidden

绝对定位布局

通过设置position属性实现。CSS中规定的第三种定位机制。能够实现横向多列布局及较为复杂的定位。

position属性，拥有3种定位形式：1、静态定位 2、相对定位 3、绝对定位

可拥有4个属性值：static（静态定位） relative（相对定位）absolute（绝对定位）fixed（固定定位）

相对定位

相对于自身原有位置进行偏移；仍处于标准文档流中；随即拥有偏移属性和z-index属性

position:relative;top:50px;left:30px;

绝对定位

特点：建立了以包含块为基准的定位；完全脱离了标准文档流；随即拥有偏移属性和z-index属性。

未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置，脱离了标准文档流。

当元素设置了绝对定位，他的宽度发生了变化。随着内容的增大而增大。他不在占据空间。 Position：absolute

设置偏移量：无已定位祖先元素，以<html>为偏移参照基准。

有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准。

position:absolute;left:50px;top:20px;

position:relative;

position:absolute;left:50px;top:20px;

当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

横向两列布局：

使用absolute实现横向两列布局常用于一列固定宽度，另一列宽度自适应的情况。

注意：relative-父元素相对定位；absolute-自适应宽度元素绝对定位；固定宽度列的高度>自适应宽度的列

yanmei_yaomy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页布局基础

简介 W3C标准，有万维网联盟制定的一系列标准，包括：结构化标准语言（HTML和XML），表现标准语言（CSS），行为标准语言（DOM和ECMASscript）。倡导结构、样式、行为分离。自动居中-列布局CSS中存在3种的定位机制：标准文档流（Normal flow）、浮动（Floats）、绝对定位（Absolute positioning）标准文档流（Normal flow
复制链接

扫一扫

专栏目录