网页布局基础_技术问答

首页免费课网页布局基础问答

网页布局基础

全部评论问答未解决精华

JimmieHwang

清除浮动的方法：

1：clear：both;

2:width:100%;overflow:hidden;

注意：

对受到浮动影响的元素添加清除浮动的css

0 3-2 清除浮动的常用方法

2015-08-05

JimmieHwang

浮动布局（float）：能实现横向多列布局

float属性三个值：left、right、none

特点：元素会左移或右移，直至碰触到容器边缘为止。

<** 设置了浮动的元素，仍处于标准文档流中。 **>

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

<** 当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。 **>

0 3-1 浮动布局简介及float属性

2015-08-05

JimmieHwang

w3c 万维网联盟指定的一系列标准,包括结构化标准语言(html xml

表现标准语言 css

行为标准语言dom ecmascript

倡导结构样式行为分离

标准文档流

浮动

绝对定位

3中定位机制

标准文档流

想流水一样的文档

从左到右,从上到下

块级元素和行级元素

块级元素:从左到右,独占一行

触碰到页面边缘是,会自动换行

div ul li dl dt p

行级元素

同一行显示

不会改变HTML文档结构

span strong img input...

块级元素和行级元素都是盒子模型

0 2-1 网页布局相关知识点讲解——标准文档流、块级及行级元素等

2015-08-05

为什么right方块不用float：right？

最赞回答 / 思懿

当我没问。。。后面说到了。。。

2 回答 216 浏览 3-3 横向两列布局

2015-08-05

【建议】放大代码区域

+ 我来回答回答最高可+2积分

2 回答 316 浏览 4-3 绝对定位

2015-08-05

峥清juan

讲的很清楚

0 4-2 相对定位

2015-08-04

qq_自我放逐_0

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

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

设置偏移量：
1.无已定位祖先元素，以<html>为偏移参照基准
2.有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准

0 4-3 绝对定位

2015-08-04

L_第七感

很好的课程、赞！

0 2-2 盒子模型

2015-08-04

L_第七感

行级元素是叫内联元素吧？

0 2-1 网页布局相关知识点讲解——标准文档流、块级及行级元素等

2015-08-04

中间块的margin-left 是123px 还是13px ;我设置123px感觉不太对。margin-left 是相对于左边还是父级元素mainbody

最新回答 / nsixnkx

#wrap{width:970px; margin:0px;auto}#mainbody{position:relative; margin-top:15px;}#left{float:left;width:110px; }#mid{margin-left:123px;width:650px;border:1px solid #999;}#right{position:absolute;top:0px;left:790px;border:1px solid #999;}

3 回答 615 浏览 5-1 网页布局-编程挑战

2015-08-04

我埋葬的地方就有我

一句话相对定位relative是于自身，绝对定位absolute是相对与大局

0 4-4 使用绝对定位实现横向两列布局

2015-08-04

我埋葬的地方就有我

挺细致的，我觉得有点慢

1 4-3 绝对定位

2015-08-04

吃苹果的狐狸

老师讲的不错。

0 4-2 相对定位

2015-08-04

eri_swyo

老师讲的很好,非常棒!

0 2-1 网页布局相关知识点讲解——标准文档流、块级及行级元素等

2015-08-04

哆啦没了A梦

wrap 居中——margin：0 auto；
left左浮动，float：left;
mid设置margin-left:125px;(此值为left宽度加其边框，再加上mid与left间距所得)
先给父级mainbody设置相对定位——position：relative；
再给子级right设置绝对定位，以及相对于父级mainbody偏移的位置——position：absolute;top:0px;left:794px;(此值为left、mid宽度加其边框及间距，加上right与mid的间距所得
)

1 5-1 网页布局-编程挑战

2015-08-04

首页上一页 257 258 259 260 261 262 263 下一页尾页

该课程已下架

课程须知: 1.一定要对HTML+CSS相关标签有所掌握；2.对网页布局知识有简单的了解

老师告诉你能学到什么？: 1.掌握三大布局技巧——流式布局、浮动布局及绝对定位布局；2.精通标准文档流、盒子模型、float属性以及position属性等知识。

微信扫码，参与3人拼团

热搜

最近搜索清空