HTML(5)+CSS(3)--那些不知道但重要的知识!

479 阅读30分钟

之前接触的知识大多是js,对于HTML和CSS只是做到了简单的使用。在实际的开发中运用最多的也就是Flex布局以及各种table表格,form表单等与后台交互的元素。然而,这些技术可能在开发后台管理系统的时候足够,但是在真正布局以及渲染一个美观既大方的界面时,就会发现,这些东西是远远不够的。

因此,花费了几天的时间通读了一遍《HTML5布局之路》,这本书的整体流程是循序渐进的,很适合像我这种只知道琐碎知识点,然而并没有对HTML和CSS有整体认识的同学。

下面是自己在读完整本书之后感觉需要记录的内容,如果你和小编一样没有对HTML和CSS有完整的认识的话,小编建议还是去通读一遍《HTML5布局之路》

HTML基本结构

一个基本的HTML文件需要由“文档声明”和“html标签部分”组成。“html标签部分”包含头部和内容区两部分。

文档声明

DOCTYPE是Document Type(文档类型)的缩写。<! DOCTYPE>元素用于声明一个页面的文档类型定义。通过对其定义,告知浏览器当前文件的类型是HTML,这样浏览器才会以合适的方式加在它。

关于DOCTYPE

  • DOCTYPE标签是导读出现的,没有结束标签;
  • 文档类型定义在HTML文档的第一行,在html之前;
  • 文档类型,会使浏览器使用相应标准加载网页并显示;
  • 文档不定义DOCTYPE,浏览器将无法获知HTML或XHTML文档的类型,有些浏览器会静茹怪异解析模式;
  • DOCTYPE与doctype同理,不区分大小写,均可以使用。

当前使用的文档声明

众多的文档声明当中,当前使用的是HTML5.0的版本,即文档声明的代码格式为:

<! DOCTYPE HTML>(即 <!doctype html>)

title标题

title表示的是一个网页的标题,这个标题并不显示在网页的界面上,而是显示在打开的浏览器的选项卡中。

meta元信息

所谓元信息,指的是对信息进行描述的信息。 meta是用来在HTML文档中模拟HTTP的响应头报文。meta标签位于网页的<head></head>中,meta的属性有两种:namehttp-equiv

元信息基本语法

<meta 属性="该属性下的子属性" content="具体子属性对应的属性值">

name属性(几种常见的name属性)

  • description:描述信息,用于向搜索引擎概括性地介绍这个网页的主要内容。
  • author:作者,用于向搜索引擎说明网站的作者。
  • keywords:关键词,用于向搜索引擎说明这个网页的关键词是什么。
  • copyright:版权,用于向搜索引擎说明版权信息。
  • renderer:渲染内核,用于控制浏览器以什么内核进行渲染。

http-equiv属性(几种常见的http-equiv属性)

  • content-type:用于设置网页内容的编码。
  • refresh:用于定时让网页在指定时间内刷新或跳转到其他页面。
  • windows-target:用于告知网页在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用,即防止被钓鱼。

目前使用频繁的元信息

当前使用频繁的元信息设置主要包括字符编码、关键字、描述信息、自动刷新或跳转、独立页面显示。 其中,字符编码与网页中文字是否乱码相关;关键字、描述信息,与网站在搜索引擎中的搜索排名相关;自动刷新或跳转用于实现一些特殊功能需求;独立页面显示,主要是防止自己的网站被钓鱼。

第三章-整体布局(标签尺寸处理+浮动布局)

下面一张图列举了本章的主要内容:

CSS引入方式

行内书写——简化样式操作

<div style="box"></div>

注:如果涉及到样式修改,这样操作起来会异常麻烦,所以这是不建议的写法。

内部书写——简化样式操作

<div class="box"></div>

<style>
.box{
    width="900px"
}
</style>

外部样式——控制多页面样式

link标签的作用,将外部样式表文件连接到HTML文档中。外部引入的CSS文件,需要进行字符编码的设置。

@charset"UTF-8"

@charset命令用于定义外部引入的CSS文件的字符编码,该命令需要在CSS文件中的最前面定义,由于网页代码的加载顺序自上而下,放在最前面能够让后面所有的代码都按照这种字符编码格式进行编码和解析,同时在当前的CSS文件当中只允许出现一次。

引入外部文件需要对路径有清楚的认识,刚刚学习的小伙伴们可能对路径认识模糊,所以,接下来简单说一下什么是路径。

路径:以当前HTML文件为起点,以要引入的文件为终点,构成的道路就是“路径”。

种类:一种是相对路径,一种是绝对路径。

相对路径

以引入文件的网页所在位置为参考基础,而建立出的目录路径。当保存于不同目录的网页文件引入同一个文件时,所用的路径将不相同,故称之为相对。

../images/course.jpg

绝对路径

以Web站点为根目录为参考基础的目录路径。之所以称之为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

C:/Users/course.jpg

开发时的选用

在开发当中通常使用相对路径,原因主要是因为在开发工程师在客户端书写好代码,并上传到服务器时,具体位置与客户端并不相同,如果使用相对路径,则会在路径上出现问题。

路径的特殊符号

../表示当前文件所在层级的上一层级。

./表示当前文件所在的层级。

/便是根目录。

外部引入CSS的扩展知识

@import的基本语法

除了介绍到的link标签能够外部引入CSS文件之外,还可以使用@import

使用link方法引入:

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all">

使用@import方法引入:

<style type="text/css" media="screen">
    @import url("CSS文件");
</style>

link与@import的区别与使用原则

这两种方法虽然都能实现外部引入CSS,但是存在一定的区别。也正是由于这些区别,才导致多数人在实际开发中放弃了使用@import的引入方式。

  • link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS;
  • link使用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载;
  • link是XHTML标签,无兼容问题;@import是在CSS2.1中提出的,低版本的浏览器不支持;
  • link支持JavaScript控制DOM去改变样式;@import不支持。

CSS选择器

CSS当中存在三种基本选择器,分别被称为:ID选择器、类名选择器和标签名选择器。

三种基本选择器的比较

选择器类型 生活中的同类物 选择范围 精准度 是否需要定义
ID选择器 身份证号 最小
类选择器 班级号 较大 一般
标签名选择器 性别 最大 最差

三种基本选择器的用法

选择器类型 标签中的操作 CSS中的使用方法
ID选择器 定义标签的id属性和属性值 #选择器名{属性:属性值}
类选择器 定义标签的class属性 .选择器名{属性:属性值}
标签名选择器 标签名{属性:属性值}

CSS选择器优先级

作为标签属性style,设置的各类样式 ID选择器优先级 类名选择器优先级 标签名选择器优先级
1000 0100 0010 0001

在行内,使用style属性书写的样式,优先级最高,ID选择器的优先级其次,类名选择器优先级再次,优先级最弱的是标签名选择器。对于同种优先级的选择器,后书写的代码生效。

样式书写顺序

(1)显示样式:控制元素展示方式的属性,主要包括浮动(float)、定位(position)、展示方式(display)、超出状态以及可视化(overflow,visibility)等。 (2)自身样式:关于元素自身的样式属性,主要包括宽度(width)、高度(height)、外边距(margin)、内边距(padding)、边框(border)等。 (3)文本样式:用于处理背景图片。段落文章、文字字体的样式。 (4)CSS3新样式:CSS3新增的属性。

三种不同的样式书写方式

第一种:

.list-tit  //该方法使用连字符进行分隔

第二种:

.list_tit  //该方法使用下划线进行分隔

第三种:

.listTit  //该方法使用小驼峰

CSS样式重置

HTML的发明者在发明标签之时,为这些标签设置了一些样式,这些样式就被称为标签的“默认样式”,“清除标签的默认样式”被称为“样式重置”。

浏览器中样式的不同表现,也是“清除默认样式”的一个重要因素。同样的标签默认样式在不同的浏览器上显示的不一样。

CSS重置文件内容:

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}

在重置文件当中的CSS代码,主要有两种功能。一种代码是用来清除掉标签的默认样式,另一类代码则是根据当前的网站制作需求,修改一些默认样式,以方便开发工程师进行网站代码的开发与书写。

盒模型

完整的盒模型是由width、height(宽度和高度构成->内容)、border(边框)、padding(内边距)、margin(外边距)这几部分属性组成。

盒模型——width与height属性

属性功能:width用于设置元素的宽度;height用于设置元素的高度;

盒模型——margin属性

属性功能:设置一个元素外边距的宽度。外边距,可以理解为当前元素与父级或其他兄弟级元素之间的距离。

1~4个margin属性值的含义

  • 四个属性值:值与方向的对应顺序为“上-右-下-左”(从顶部,顺时针下来)
  • 三个属性值:值与方向的对应顺序为“上-左右-下”
  • 两个属性值:值与方向的对应顺序为“上下,左右”
  • 一个属性值:该值表示4个方向的外边距均设置为这个值

margin分写属性

属性名 属性含义
margin-left、right、top、bottom 左侧/右侧/顶部/底部的外边距

将margin的水平方向margin值设置为auto,能够让块元素在父级当中水平居中。

盒模型——padding属性

属性功能:设置一个元素内边距的宽度。外边距,可以理解为当前元素与元素边框之间的距离。

1~4个padding属性值的含义(类似于margin)

分写方法类似于margin。

盒模型——border属性

border是一个复合属性,一个边框包括边框的宽度、颜色和类型。

  • 边框宽度:以px等为单位(不允许为百分比和负值)
  • 边框颜色:十六进制颜色值或单词。
  • 边框类型:solid(实线)、dotted(点线)、dashed(虚线)

分写方法类似于margin。

基本结论:

(1)对于div等块状元素,能够通过margin:0 auto;实现在父级元素中的水平居中,对于span等行元素,不能通过margin:0 auto;实现在父级元素中的水平居中。

(2)默认的边框颜色为黑色,默认边框粗细为3像素(谷歌、火狐、IE8+等浏览器下为3像素,IE7浏览器默认粗细为4像素),必须设置“边框样式”属性,才能够触发边框效果。

(3)border:0;和border:none;的区别

border:0;表示设置边框,但是边框的宽度为0,此时浏览器会正常渲染元素的边框效果,会占用内存效果;并且,所有的浏览器均能够正常使用。

border:none;表示不设置边框,浏览器不会进行任何渲染,不会占据内存空间;IE6、7不兼容。

(4)盒模型大小与元素实际宽高值(width、height)并不相同

  • 盒模型的宽度=左右外边距+左右边框+左右内边距+width
  • 盒模型的高度=上下外边距+上下边框+上下内边距+height

(5)父子之间用padding,兄弟之间用padding

浮动

浮动——float属性

属性功能:设置一个元素发生浮动,浮动后的元素默认大小为内容大小,并且可以设置宽高,也可以与其他浮动元素或行元素处于同一行。

分析 float=left: 显示效果如下图:

  • 浏览器窗口大于450px时

  • 浏览器窗口大于300px小于450px

  • 浏览器窗口小于300px

设置左浮动之后,每个浮动的细化分析如图:

浏览器窗口大小为380px,三个div宽高均为150px,三个div均设置了左浮动,图中右下角的数字用于标识子元素的编号,1标识第一个元素。

结论:

  • float:left:表示向左浮动,标签(或元素)从右边向上浮起,在从右向左浮动到左边。
  • float:right:表示向右浮动,标签从左边向上浮起,再从左向右浮动到右边。
  • 在浮动过程中,如果遇到同方向的其他元素,有可能会被“阻碍”。
  • 在浮动过程中,左浮动的元素和右浮动的元素并不会相互干涉、阻碍对方的运动。

浮动的影响

(1)脱离文档流

普通流,也可以称为常规流、文档流。

普通流是文档中可显示对象在排列时所占用的位置。可以将整个网页看做一个文档,这个文档自上而下分成一行一行,并在每行当中按从左至右的顺序,依次排放元素。

设置浮动的元素,会“脱离文档流”。浮动的元素,并不属于文档中的普通流。

(2)浮动元素对父级元素高度的影响

默认情况下,一个元素的内容大小决定这一个元素的高度(height),当为一个块元素设定了高度,那么在主流浏览器中,这个元素的高度不再由元素内容决定,而由设置的这个高度值决定。

问题:在页面布局中,经常会出现这样的现象——父元素本来应该由内容撑开高度,但由于内部子元素的布局要求,需要对内部的子元素进行浮动。元素一旦浮动 ,就会脱离文档流,腹肌的元素相当于“少”了内容,或者说是浮动的这个元素不再对父级的高度产生任何作用或影响。

解决办法:清除浮动。

(3)浮动元素对兄弟级元素布局的影响

浮动元素会对兄弟级元素造成影响,但是仅针对于它后面的兄弟级元素,并不会对前面的兄弟级元素的布局造成影响。

解决办法:清除浮动

清除浮动

(1)浮动——clear属性

属性功能:用于清除浮动,规定元素的哪一侧不允许存在其他浮动元素。

注意:清除浮动,并不是把浮动元素删掉,而是取消掉“浮动元素浮动效果”对其他元素造成的影响。

(2)清除浮动的不同类型

根据清除浮动的目的,可以分为以下两大类。

  • 防止浮动元素引起的兄弟级元素布局受到影响。
  • 防止浮动元素引起的父级高度塌陷。

(3)为兄弟级元素设置clear样式

假设父级元素当中存在三个div,第二个div发生了浮动,这时候第三个div元素的布局有可能受到影响,只需要为第三个div设置clear属性即可(注意:是为收到浮动影响的元素设置clear属性)

注意:

  • 并非浮动元素的所有兄弟级元素都需要清除浮动,只需要针对浮动元素的下一个兄弟级元素设置清浮动,后面所有元素的布局都会恢复。
  • 如果希望在第二个div(浮动元素)与第三个div(清除浮动的兄弟级元素)之间有一定的间距,为浮动元素后的一个兄弟级元素设置顶部外边距时会失效(与上方空白处叠加),此时,可以为浮动元素设置下边距。

(4)空标签清除浮动

操作:在浮动元素的后面,增加了一个新标签,这个新标签是浮动元素的兄弟级元素,之后为这个标签设置clear属性。

优点:通俗易懂,操作方便

缺点:会添加大量无语义空标签,结构与表现未分离,不利于维护。

(5)br标签清除浮动

操作:br标签清除浮动的方法类似于空标签清除浮动,在父动元素后面添加一个br标签,在br标签中设置属性clear,并赋值all,即:<br clear="all">

优点:比空标签方式语义稍强,代码量较少。

缺点:结构与变现未分离。

(6)父元素浮动

操作:为当前浮动元素的父级元素设置浮动。

优点:语义化没问题,同时代码量少。

缺点:父元素的相邻元素布局受影响——于是需要继续为其父级设置浮动操作,直到body为止。

(7)父元素设置overflow:hidden或auto

操作:为当前浮动元素的父级元素设置overflow:hidden或auto

优点:语义化没去问题,同时代码量少。

缺点:内容多的时候,会被隐藏,无法显示需要溢出的元素,也可能会对之后的JS的一些动态效果操作造成影响。

(8)利用after伪元素清除浮动

操作:为当前浮动元素的父级元素添加伪元素,为after伪元素设置清除浮动的功能代码。

优点:语义化和结构都没有问题。

缺点:如果使用不合理,有可能造成代码量增加;另外,IE6/7不支持after伪元素,需要使用zoom:1触发hasLayout来清除浮动。

after伪元素清除浮动的原理其实与空标签清除浮动的原理类似。

实例:

<div class="wrap"></div>

<style>
.wrap:after{
    content:'\200B'; //content表示领宽度的空格
    clear:both;  //块状元素
    display:block;
    height:0
}

.wrap{
    *zoom:1
}
</style>

注意:

(1)当浮动元素与非浮动元素处于同一行时,浮动元素在前,非浮动元素在后。

(2)通常情况下,使用最为频繁的是after伪元素清浮动。

模块布局(选择标签+可用性与扩展性)

因为此章节内容较多且大多是其他文章中均可以查阅到的,所以在此只分享一些容易忽略或还未知道琐碎知识。

(1)h1-h6的标签都属于标题类标签,分别表示不同级别对的标题。(h1-h6分别为2em,1.5em,1.17em,1em,0.83em,0.67em)

(2)浏览器默认字体大小为16像素,1em=16px。

(3)hr标签表示分隔线,会以一条直线的方式进行展示。(分隔线默认占满父级的整行)

(4)每个p标签就是一个段落,而使用br标签换行,通常被称为软换行,即虽然使用br之后,段落的文本内容从一个新行显示,但是这些文本依旧是一个段落。

(5)显示属性——display

常用的两种:

块元素(具备如下特性):

  • 默认独占父级的一行,不能够与其他元素处于同一行;
  • 能够设置宽高(换言之:设置宽高有效);
  • 外边距设置生效

行元素(具备如下特性):

  • 默认由内容撑开宽高,与其他行元素能够处于同一行;
  • 不能够设置宽高(换言之,设置宽高无效);
  • 纵向外边距失效,横向外边距生效;

(6)display:none;与visibility:hidden;

display:none;与visibility:hidden;均能够实现元素的隐藏,所不同的是,设置display:none;的元素并不会占据任何物理空间,而设置visibility:hidden;的元素,虽然视觉上看不到了,但是依旧会占据物理空间。

(7)标签的合理嵌套

  • 块元素可以包含块元素和行元素;
  • 标题、段落类的块元素,不能够包含块元素;
  • 行元素可以包含行元素,但不能包含块元素;
  • ins和del这两种行元素可以包含块元素;
  • dl下只能直接包含dt和dd元素;
  • ul、ol下只能直接包含li元素;

(8)加强版选择器——后台选择器

选择器名1 选择器名2 ... 选择器名n{
    属性名:属性值;
    属性名:属性值;
}

后代选择器就是使用多个选择器的组合来找到要控制的标签,不同的选择器之间使用空格分开。

(9)加强版选择器——子代选择器

选择器名1 >选择器名2> ...> 选择器名n{
    属性名:属性值;
    属性名:属性值;
}

子代选择器也是使用多个选择器的组合来找到要控制的标签,不同的选择器之间使用“>”分割。整体的原理与后台选择器类似,所不同的是,子代选择器仅仅选择到的是一代,而非所有后代。

(10)加强版选择器——群组选择器

选择器名1 ,选择器名2 ,... ,选择器名n{
    属性名:属性值;
    属性名:属性值;
}

群组选择器是为“多个不同的选择器”设置“相同的样式”不同的选择器之间使用都好进行分隔。

(11)加强版选择器优先级算法

  • 对于后代,子代选择器,其优先级是进行叠加运算(叠加但是不进位)
  • 对于群组选择器,每个逗号分隔不同的选择器,不同的选择器各自计算各自的优先级

(12)a标签的target属性,用于控制链接页面的打开位置,在默认情况下,单击一个超链接之后,会自动刷新当前页面。两个常用的属性值,_blank,浏览器总在一个新打开,未命名的窗口中载入目标文档;_self默认状态,在当前页面/目标中打开被链接的文档。

(13)伪类选择器:在选中标签之后,为标签的某一种状态指定样式。

a标签的4中伪类选择器

伪类选择器 描述
:link 超链接还未被访问的状态,也是超链接的默认状态,可以不设置
:visited 超链接已被访问过的状态
:hover 光标悬停在标签上的状态,不局限于a标签
:active 光标在标签按下时(标签被鼠标单击但还没有释放鼠标按键时)的状态,不局限于a标签

a标签的伪类选择器优先级跟类的优先级是一样的,都是0010

a标签书写要求遵循如下顺序::link-> :visited-> :hover-> :active

伪类选择器的顺序不能颠倒的最主要的原因是:4中伪类选择器的优先级相同。由于网页文档的加载是自上而下的,因此后加载的演示会覆盖掉之前加载的样式。

(14)光标样式主要通过cursor这个属性进行控制

(15)在默认情况下,img的底部会有3~5像素的空隙(不同浏览器的具体像素会有所不同),可以通过为img设置 float:left/right;display:block;来实现清除空隙。

(16)文本超出隐藏 overflow:hidden

实例:当我们的需求是

简单描述:每一个内容区域下面都要出现下划线(可能为实现,虚线或点线),且该线只出现在底部。

运用:这时,我们可以为每一块内容设置上线边框。并对该边框设置其样式,最后通过文本超出隐藏和margin两个属性对最上面的一个进行隐藏。

第七章(文本等细节类样式处理)

因为此章节内容较多且大多是其他文章中均可以查阅到的,所以同样在此只分享一些容易忽略或还未知道琐碎知识。

(1)opacity与filter

最初,CSS并没有定义透明度的标准属性,不同的浏览器也就定义了自己的专有属性

  • IE浏览器通过设置CSS滤镜(filter属性)来实现透明度。书写格式为filter:alpha(opacity=number),其中,number是一个数字,取值范围是0~100,0表示100%透明度(即完全透明),100表示的是0%的透明度(即完全不透明)
//基本语法
filter:alpha(opacity=50)
  • 火狐浏览器提出了自己的透明度私有属性,使用opacity属性来实现透明度。书写格式为 -moz-opacity:number。其中,number是一个数字,取值范围是0~1,0表示100%的透明度(即完全透明),1表示0%的透明度(即不完全透明)。IE8浏览器不支持。
//基本语法
-moz-opacity:0.5
  • W3C在CSS版本中添加了透明度的专有属性(opacity),这个属性得到了各个主流浏览器以及较高版本IE浏览器的支持。书写格式为 opacity:number。其中,number是一个数字,取值范围是0-1,其中,0表示100%的透明度(即完全透明),1表示0%的透明度(即完全不透明)
//基本语法
opacityL0.5

注意:opacity透明度会影响后代。

(2)如果将行高(line-height)设置为负数,浏览器会按照默认行高来渲染段落文本。

(3)letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。word-spacing对中文无效。

(4)常用的中文和英文字体:中文页面建议以宋体,微软雅黑为首选,其他字体次之;英文页面建议使用Arialm,Tahoma,sans-serif。当设置多个字体时,不同的字体之间使用逗号隔开。英文字体需要书写在中文字体的前面。

(5)网站中难免会用到一些比较特殊的字体(如“华文行楷”)来装饰网站,让其不那么死板,然而,用户计算机上不一定会有这种字体。也就是说,只有客户端安装了这个字体才能正常显示,否则页面渲染会调用客户端计算机上已有的字体来替代开发工程师定义的字体。

第八章(特殊布局情况——定位布局)

HTML+CSS布局方式中,最为常见的有两种布局模式,分别是浮动布局和定位布局。在日常开发中,使用最多的是浮动布局。

(1)定位——position属性

属性功能:为一个元素设置位置区域。

属性值:position属性规定了元素的定位类型,所有的元素都可以用position来进行定位。position定位之后的对象将具有块属性。position属性有5个属性值,分别为: static、relative、absolute、fixed、inherit,其中 static为默认值,可以忽略不写,static会忽略任何top、bottom、left或right。

(2)定位对文档流的影响

当对一个元素设置了position:absoluteposition:fixed时,该元素会脱离文档流,从而对父级以及兄弟级元素的布局造成影响。如果元素设置了position:relative,根据W3C官方文档上来说,并不会脱离文档流,也不会有文档的问题,但是在实际开发中的情况是:元素不会脱离文档流,但是可以设置top、left等值进行位置的操作。

(3)设置绝对定位的元素的基本特点

  • 绝对定位元素彼此不互相影响

设置属性值为absolute会将对象脱离出正常的文档流,进行绝对定位,并不考虑它周围内容的布局。假如其他定位对象已经占据了给定的位置,它们之间不会相互影响,而会在同一位置层叠。

  • 激活相对定位

要激活对象的绝对定位,必须设置position的属性值为absolute,并且指定left,right,top,bottom中的至少一个属性,否则上述属性会使用它们的默认值auto,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。

(4)绝对定位元素针对谁进行定位

  • 如果父级(无限)没有设定position属性,那么当前的absolute则结合top、right、left、bottom属性以浏览器左上角为原始点进行定位。
  • 如果父级(无限)没有设定position属性,且属性值为relative、absolute、fixed,那么当前的absolute则结合top、left、right、bottom属性以父级(最近)的左上角为原始点进行定位。

(5)同时设置同方向的两个值

对于同时设置水平方向的两个值,或者同时设置垂直方向的两个值的情况,要基于元素是否存在固定宽高而分成两类。

  • 绝对定位元素存在固定宽高 当绝对定位元素存在固定宽高时,在水平方向上,不论先书写left值还是right值,均按照left的值进行渲染,在垂直方向上,不论先书写top值还是bottom值,均按照top值进行渲染。

  • 绝对定位元素不存在固定宽高 当绝对定位不存在固定宽高时,合理的left与right(top与bottom)值都会生效。

元素宽度=父级宽度-left值-right值

(6)定位——z-index属性

在一个网页当中,可能存在着多个定位的元素,当这些元素互相重叠时,就设计层叠的关系,因此,CSS当中规定了z-index。

定位元素默认的z-index的值为0,数字越大,级别越高,数字越小,级别越低。

第九章(特殊布局情况——界限控制与伪元素的妙用)

如果不为一个块元素设置固定宽高,则该元素在水平方向上默认占满父级的百分之百。

如果不为其设置固定宽度,则默认由内容撑开高度。

(1)最小高度(line-height)

当元素内容部分的高度小于“最小高度值”时(如内容高度为200px),该元素按照最小高度值(500px)进行渲染;当元素内容部分的高度大于“最小高度值”时(如内容高度为700px),该元素实际高度值(700px)进行渲染

(2)伪元素

在最初,伪元素的语法是使用“:”(一个冒号)。在CSS3当中,通过冒号的数量区分伪元素和伪类,伪元素使用两个冒号(::before、::after),伪类选择器使用一个冒号(:hover)。

使用:before,将会在选中的元素之前“添加”一个元素;使用:after,将会在选中的元素之后“添加”一个元素。

第十一章表格和第十二章表单略过

第十三章(HTML5新标签与CSS3基础)

HTML新增元素

新增结构元素 其他新增元素
<header> 定义页眉 <video> 定义视频
<hgroup> 定义对网页标题的组合 <audio> 定义音频
<nav> 定义导航 <embed> 插入各种多媒体
<section> 定义文档中的区段 <mark> 定义需要突出显示或高亮显示的文本
<time> 定义时间和日期 <progress> 显示JS中耗费的函数的进程
<article> 定义文章 <time> 表示时间和日期
<figure> 定义一组媒体对象以及文字 <canvas> 定义图形,提供画布
<figcaption> 定义figure标题 <command> 表示命令按钮
<footer> 定义页脚 <details> 表示用户要求得到并可以得到的详细信息
<wbr> 表示软换行

(1)如何让低端浏览器兼容新的HTML5元素?

需要使用JavaScript动态的创建结构元素,之后使用CSS,为每个结构元素赋以“块元素”的显示特点。

<script>
  var arr=['header','footer','nav','section'];
  
  for(var i=0;i<arr.length){
      document.createElement(arr[i]);
  }
</script>

(2)CSS3选择器——通用兄弟选择器

(3)CSS3选择器——伪类选择器

(4)CSS3圆角边框

属性功能:为元素设置平滑拐角的显示区域。

border-radius缩写规则:

  • 一个值时:表示四个角值相同
  • 两个值时:第一个值表示左下角和右下角,第二个值表示右上角和左下角
  • 三个值时:第一个值表示左上角,第二个值表示右上角和左下角,第三个值表示右下角
  • 四个值时:分别表示左上角、右上角、右下角、左下角

《HTML5》布局之路后面的章节是移动端的各种实际应用,在此先不做分享,因为还没有实际应用过~~~