页面布局

1 页面组成

页面组成

2 重置样式表

很多元素是具有默认样式的,比如 p 元素有默认的上外边距和下外边距,h1~h6 标题元素也有默认的上外边距和下外边距且字体加粗,body 元素有默认的外边距,超链接有默认的字体颜色和下划线,ul 元素有默认的左内边距 等等。

在不同的浏览器下,元素的默认样式有时候有些差异,这样元素的默认样式就未我们的开发带来了一些问题。

所以,在开发页面之前,我们会选择重置元素的默认样式,这里介绍三种重置方案。

2.1 第一种方式 使用全局选择器重置样式

* {
    margin: 0;
    padding: 0;
}

此种方法,在讲解案例的时候可以简单用一下,但实际开发中是不会用这种方式的,因为 * 是选择所有的元素,而并不是所有的元素都有默认样式,该方式效率较低。

2.2 Reset.css

选择到具有默认样式的元素,清空其默认的样式。

body,h1,h2,h3,h4,h5,h6,hr,p,
blockquote,dl,dt,dd,ul,ol,li,
pre,form,fieldset,legend,button,
input,textarea,th,td{
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    display: block;
    border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: 400;
}

i,em {
    font-style: normal;
}

u,ins,s,del {
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,button,select,textarea {
    outline: none;
}

各网站都会定义自己的重置样式表,请参考 http://www.unclealan.cn/index.php/front/174.html

2.3 Normalize.css

Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

官网地址:http://necolas.github.io/normalize.css/

GitHub: https://github.com/necolas/normalize.css/

相对于 Reset.css, Normalize.css 有如下特点:

  • 保护有价值的浏览器默认样式而不是完全去掉它们。
  • 新增对 HTML5 元素的设置。
  • 修复浏览器 BUG 并保证各浏览器的一致性,修复的 BUG 有预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 BUF 等。
  • Normalize.css 对并集选择器的使用比较谨慎,有效避免调试工具杂乱。

3 网页的版心

在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,称为网页的版心。版心常见的宽度有 1200px、1000px、960px 等。

网页版心

4 元素居中总结

4.1 行内元素或行内块元素

让行内元素或行内块元素进行居中,需要对其父元素设置文本对齐方式,因为行内元素或行内块元素可以被当做文本处理。

让行内元素或行内块元素水平居中对齐,在其父元素上设置 text-align:center

让行内元素或行内块元素垂直居中对齐,在其父元素上设置 line-height 属性,行高的值与高度相等即可。

4.2 块级元素

① 水平居中对齐

设置元素的左外边距和右外边距的值都为 auto

注意:

让块级元素居中,是对元素本身进行设置。

浮动的元素以及绝对定位和相对定位的元素不能使用该方法进行居中。

② 水平方向和垂直方向都居中对齐

要实现一个块级元素在父元素里面垂直居中对齐,需要对改元素设置定位;这种方式可以设置元素垂直居中,可以设置元素水平居中。

定位的元素水平居中: 设置 left:50%,设置 margin-left 为负的宽度的一半。

定位的元素垂直居中: 设置top:50%,设置 margin-top 为负的高度的一半。

5 CSS 属性的继承

2.1 哪些 CSS 属性可以继承

  • 字体设置、颜色、文本设置这些 css 属性可以继承。

  • 其他的 css 属性,如跟盒子相关的 cs s属性无法继承,像边框、宽高、内外边距、背景等等。

要善于利用继承的特性,字体、颜色和文本的相关设置可以设置在包裹在外层的元素上。

2.2 特殊情况

  • 背景属性无法继承,看起来像继承是因为元素默认的背景色是透明色(transparent).

  • 继承下来的属性优先级最低,比元素默认属性值还要低。

       给超链接的父元素设置 color 或 text-decoration 的时候,我们发现超链接并不会安装父元素的设置;其实,超链接也继承了父元素的相关属性,只是同时超链接有默认的 color 和 text-decoration 设置,继承的属性优先级要低于默认的属性值,所以仍然按照默认的样式显示。
       所以,如果给超链接设置颜色或者 text-decoration 的时候,需要直接选择器选择到 a 元素来设置,不能依靠继承。
       类似的这种情况还有标题元素,标题元素有默认的 font-size 和 font-weight 设置继承的属性是不如默认的属性优先级高的。
    

6 行内元素和行内块元素的空白

6.1 元素之间的空白

① 产生的原因

书写 html 代码的时候,每写一个元素都会换行,这个换行符号会被浏览器解析成空格,空格的大小根据字体大小的设置来计算。

块级元素没有这个问题,因为行内块和行内元素会被当做文本处理。

② 解决方案:

  • 方案一: 元素和元素之间不写换行(不建议)
  • 方案二:给父元素设置 font-size:0,这样空格就不显示;再给具体的行内元素或行内块元素设置字体大小。

6.2 图片(行内块元素)底部幽灵空白

① 产生的原因

图片(行内块元素)会按照基线对齐,基线和底线之间有间距,这个间距就是幽灵空白

注意:

一般行内块元素如果里面没有文本内容的话会出现跟图片相同的效果;但是如果里面有文本内容,里面的文字会以基线对齐,行内块元素就不存在底部的空白了。

② 解决方案

  • 方案一:设置图片(行内块元素)为块级元素(常用,但是如果一行内要显示多个图片(行内块),就不合适了)。
  • 方案二:设置图片(行内块元素)的基线对齐方式,vertical-align:bottom,值不是 baseline
  • 方案三:给图片(行内块元素)的父元素设置 font-size:0

7 精灵图的使用

7.1 什么是精灵图

CSS Sprites 也称之为精灵图或雪碧图,是一种背景图片的应用处理方式,将很多小图片合并到到一张大图中去。把整个大图作为背景图,然后通过 background-position 属性讲合适的图片显示到元素上。

精灵图最大的作用是减少网络的请求次数,因为图片只要下载一次就好,不用再分别去下载那些小图。

精灵图

7.2 background-postion

实现精灵图主要是靠 设置 background-postion 来对背景图片进行定位,从而在元素上显示合适的图片,background-position 属性可能的值有:

描述
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
x% y% 第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%,右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。
单位是像素 (0px 0px) 或任何其他的 CSS 单位,可以为负值
z如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。

关于百分比:

百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界(或上边界)和容器的左边界(上边界)重合。值100%代表图片的右边界(或下边界)和容器的右边界(或下边界)重合。值50%则代表图片的中点和容器的中点重合。

当指定百分比值的时候,实际上执行了以下的计算公式(该公式可以用数学方式定义图片和容器相对位置重合):

(元素宽度 - 图片宽度) * 百分比 = 水平方向偏移位置
(元素宽度 - 图片宽度) * 百分比 = 垂直方向偏移位置

使用 X 坐标来举个例子,假设有一个 300px 宽的图片,将这个图片使用到一个 100px 宽的元素中,

100px - 300px = -200px (元素和图片的宽度差)

当对 background-position 设置值依次为 -25%,0%,50%,100%,125%,得到图片相对容器的偏移值为:

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px

7.3 制作精灵图

8. favicon 图标

8.1 favicon 图标介绍

icon图标

favicon 图标 一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持 favicon 图标。

favicon 图标文件一般命名为 favicon.ico, 是后缀为 .ico 的图片文件。

8.2 favicon 图标的使用

使用方法一:把 ico 图标文件命名为 favicon.ico ,放在网站根目录下,网页会自动获取 ico 图标。

使用方法二:在网页中使用 link 标签自行引入 ico 文件。

<link rel="shortcut icon" type="images/x-icon" href="favicon.ico">

8.3 favicon 图标的制作

results matching ""

    No results matching ""