一、如何用CSS进行网页布局

二、网页布局基础

三、网页简单布局之结构和表现原则

四、CSS Sprite雪碧图应用

什么叫布局？

网页的特点：

网页自适应宽度；

网页长度无限延长；

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

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

清除浮动两个方法：

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

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

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

自动居中一列布局：
1、三个技能点:标准文档流、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轴的一个平面上）

相对定位和绝对定位的异同
1、相对定位
特点：相对于自身原有位置进行偏移
元素仍处于标准文档流中
随即拥有偏移属性和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文本居中。

在对元素设置固定定位时，如果希望本元素包含其父包含块中，不需要对其设置偏移量.

网页布局（html＋css基础）的更多相关文章

  1. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  2. HTML 网页开发、CSS 基础语法——十.CSS语法

    CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...

  3. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  4. HTML 网页开发、CSS 基础语法——八.HTML基本语法

    表格制作 1.表格基础 创建一个简单的表格至少有三个标签组成,分别是<table>,<tr>,<td>标签. table:表格,定义的是整个的表格大结构. tr:t ...

  5. HTML 网页开发、CSS 基础语法——七.HTML常用标签

    标题标签(h1-h6) 1.标题标签 ① 标题(Heading),通过<h1>-<h6>六个标签分别来对六个级别的标题进行性定义的. ② <h1>是级别最高,也是字 ...

  6. HTML 网页开发、CSS 基础语法——十二.CSS选择器

    选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...

  7. HTML 网页开发、CSS 基础语法——九.CSS概述

    1.产生背景 从HTML的答案盛开时,样式就以各种形式存在,最初的HTML只i包含很少的显示属性.随着HTML的成长为了满足页面设计者的要求,HTML添加了许多显示功能,随着功能的增加HTML页面变得 ...

  8. HTML 网页开发、CSS 基础语法——三. HTML概念

    1.纯文本格式 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号,或者特殊字符,及特殊打印格式的文本,只保存文本,不保存其格式设置. ①格式对比 纯文本格式 富文本格式 最常 ...

  9. HTML 网页开发、CSS 基础语法—— 一. HTML概述(了解网页)

    1. 网页的本质 ① HTML就是用来制作网页文件的. ② 浏览器查看的网页都是.html或.htm文件. ③ HTML叫做超文本标记语言(Hypertext Markup Language),用于搭 ...

  10. 一个简单的网页布局HTML+CSS

    <!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

随机推荐

  1. 如何在vscode中用standard style 风格去验证 vue文件

    1 JavaScript Standard Style简介 本工具通过以下三种方式为你(及你的团队)节省大量时间: 无须配置. 史上最便捷的统一代码风格的方式,轻松拥有. 自动代码格式化. 只需运行 ...

  2. VueRouter基础

    安装 直接下载(官方CDN) https://unpkg.com/vue-router/...通过页面script标签引入,如下: <script src='https://unpkg.com/ ...

  3. TDOA基站 之 时间同步

    TDOA 和 TWR相比,标签可以用最少的信息来定位,但是对于基站要求很高,需要“时间同步”. 这也是TDOA算法的核心部分,很多套件对此讳莫如深,希望能沟通过本文使读者能对TODA同步有一定初步了解 ...

  4. Gluon学习03-基础数据类型Ndarray

    Gluon学习03-基础数据类型Ndarray 小书匠 kindle  目录,方便快速定位: 1.安装cuda与cudnn 2.安装mxnet-gpu 本机环境介绍: 系统:Linuxmint Pyt ...

  5. gdb 预备知识

    1.gcc的-g选项 如果要使用gdb进行调试,必须在编译时在gcc中加入-g选项,使用参数 -g 表示将源代码调试信息编译到可执行文件中. #include <stdio.h> int ...

  6. 国外最受欢迎的BT-磁力网站

    1.海盗湾 The Pirate Bay 2.KickAssTorrents 3.Torrentz 4.zooqle 5.SumoTorrent 6.TorrentDownloads 7.Rarbg ...

  7. 带你了解HTTP协议（一）

    本篇文章篇幅比较长,先来个思维导图预览一下.   一张图带你看完本篇文章 一.概述 1.计算机网络体系结构分层   计算机网络体系结构分层 2.TCP/IP 通信传输流 利用 TCP/IP 协议族进行 ...

  8. 【原创】go语言学习（十八）反射详解

    目录 变量介绍 反射介绍 结构体反射 反射总结以及应用场景 变量介绍 1.变量的内在机制 A. 类型信息,这部分是元信息,是预先定义好的B. 值类型,这部分是程序运行过程中,动态改变的 var arr ...

  9. UOJ#467. 【ZJOI2019】线段树 线段树,概率期望

    原文链接www.cnblogs.com/zhouzhendong/p/ZJOI2019Day1T2.html 前言 在LOJ交了一下我的代码,发现它比选手机快将近 4 倍. 题解 对于线段树上每一个节 ...

  10. (转)hadoop balancer（重新平衡）

    借鉴:https://blog.csdn.net/mnasd/article/details/80369603?utm_source=blogxgwz2 参考文档:  http://blog.csdn ...