网页布局（html＋css基础）

时间 2019-11-08

标签网页布局 html+css html css 基础栏目 HTML 繁體版

原文原文链接

1、如何用CSS进行网页布局css

2、网页布局基础html

3、网页简单布局之结构和表现原则前端

4、CSS Sprite雪碧图应用浏览器

什么叫布局？工具

网页的特色：布局

网页自适应宽度；学习

网页长度无限延长；测试

（分栏也叫分列，混合布局，一列布局，二列布局，三列布局。）网站

使用float和绝对定位position:relative都会脱离文档流.spa

清除浮动两个方法：

1.为受浮动影响元素设置{clear:both;}属性
2.为受浮动影响元素设置{width:100%;overflow:hidden;}固定长度以及溢出隐藏属性

网页布局：流式布局(标准文档流)、浮动布局、绝对定位布局

W3C标准：
结构化标准语言（HTML和XML）
表现标准语言（CSS）
行为标准语言（DOM和ECMAScript）

標準文档流：
从上到下，由左到右，輸出文档內容
由块級元素和行內元素組成

块級元素:
由左到右填滿頁面，獨占一行，到頁面边緣時會自動換行div,p,ul,ol,dt.....

行級元素：
能在同一行顯示，不會改變html文档結構span，strong，input，img

盒子3D模型—网页布局的基石
1.border
2.content + padding
3.background-image
4.background-color
5.margin

盒子大小=边框border+内边距padding+＋外边距margin＋内容content

行内样式 > 内部样式 > 外部样式（采用的是就近原则）

一、auto会根据浏览的宽度自动来设置两边的外边距。
二、其原理：（浏览器的宽度-外包含层的宽度）/2=外边距
三、若是想让页面自动居中，当设置marign属性为auto时，就不能在设置浮动或是绝对定位属性。若是你设置了auto，又设置了浮动或是绝对定位，那么页面是不会居中显示的

自动居中一列布局：
一、三个技能点:标准文档流、margin属性、块级元素。

**自动居中一列布局须要设置 margin 左右值设置为 auto，并且必定要设置width为一个定值。

**元素未设置宽度，但设置了浮动float属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素

当父包含块被压缩成一条线的时候使用{clear:both;}不能起到清除浮动的做用，只能用溢出属性hidden方法来清除浮动影响

横向两列布局，主要设置float属性和margin。

div通常不要设置高度.

(1)position ４個值
static relative absolute fixed(后面两个都属于绝对定位)

相對定位
即對自身原有位置進行偏移，隨即拥有偏移值和z-index,仍處于標準文档流中

絕對定位
建位了而包含块為基準的定位，彻底了脫離了標準文档流，　父元素要設置position:relative 若是沒有就再而上一個元素為基準，直到<html>.

positive设置相对定位，以自身为相对基准进行偏移，设置相对定位属性以后会有偏移属性（top left right bottom 相对于自身进行偏移，会覆盖其余内容进行偏移）和z-Index属性（空间的层堆叠z轴的堆叠，没有的话是默认存在y和x轴的一个平面上）

相对定位和绝对定位的异同
一、相对定位
特色：相对于自身原有位置进行偏移
元素仍处于标准文档流中
随即拥有偏移属性和z-index属性（多了z轴更具空间感）
移动同时会将浏览器撑开

绝对定位特色：
创建了以包含块位基准的定位
彻底脱离标准文档流
随即拥有偏移属性跟z-index属性
未设置偏移量时：
不管是否存在已经定位的祖先元素，都保持在元素初始位置脱离标准文档流
设置偏移量时：
偏移参照的基准：
无已定位的祖先元素：以<html>为偏移参照基准
有已定位的祖先元素：以距其最近的已定位的祖先元素为偏移参照基准

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

＊＊＊使用绝对定位实现横向两列布局通常用于：一列固定宽度，一列自适应宽度。

主要应用技能：

relative-父元素相对定位。

absolute-自适应宽度元素绝对定位

注意：固定宽度列的高度>自适应宽度的列，不然会形成文档的溢出。

开发思路：

先按结构和语义编写代码
再进行样式设置
减小HTML与CSS的契合度

先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，而后考虑布局和表现形式。

什么是网页皮肤？相同的html结构，不一样的css样式。

为了减小http请求数量，加速网页内容显示，不少网站的导航栏图标、登陆框图片等，使用的并非<image>标签，而是CSS Sprite雪碧图。

xuebitu雪碧图

使用sprite，将多张小图片整合成一张大图片，能够减小http请求数，加速内容显示。

cssscrpite雪碧图
静态图片，不随用户信息变化而变化。
小图片，容量比较小
加载量比较大。（目的是：有效的减小http请求的数量）
大图不建议拼成雪碧图，加载时间长

雪碧图原理：经过css的背景定位属性：background-position来控制
坐标轴,拼合背景图的小图(x,y)为负值
以雪碧图左上角的定点为(0,0)坐标
当须要对坐标系中的某个小图标进行展现的时候，只须要取左上角的坐标进行偏移，例如(-100,0)，只须要将background-position:-100,0;
实现原理：控制一个层，可显示的区域范围大小，经过一个窗口，进行背景图的滑动。

有几个很是不错的前端开发在线工具，分享给一块儿学习的小伙伴们，别忘了收藏，很实用。

（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；

（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；

（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

CSS Sprite雪碧图实现方式
1.PS手动拼图：制做多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用本身的小网站
2.使用spite工具自动生成雪碧图
CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值
下载地址：http://www.99css.com/archives/1524

图片伸缩设置：height40px，margin-top:-10px;line-height:40px文本居中。

在对元素设置固定定位时，若是但愿本元素包含其父包含块中，不须要对其设置偏移量.