HTML与CSS基础学习笔记：引入、选择器与盒子模型.pdfVIP

-CSS样式表

1.html引入css的三种模式：

*行内：style=“关键字：值；”

*内嵌：headstyletype=”text/css”/style/head

*外部：.css

linkhref=””rel=”styheet”type=”text/css”/

styletype=”text/css”@import“”;/style

2.css选择器

三种基础选择器：标记选择（.）class选择(#)ID选择

基础选择的复合使用：

交集：标记class或者ID

并集：,

后代：外层内层

DIV+CSS排版

-HTML容器类型：

*块级容器：div，宽高边距（4个）

*行级容器：span，宽高由内容来决定，不独占空间

disy：显示方式block块级inline行级none不显示

-盒子模型

-外边距的计算

左右外边距的计算：盒子1的右外+盒子2的左外

上下外边距：会出现“塌陷”现象，距离取最大的边距

-盒子定位：

1.流：所有元素，默认，都是按照流进行排列

2.提出流：

a.position：定位，绝对定位，相对定位

-CSS样式表

1.html引入css的透明模式:

*行内:style=“关键字:值;”

*内嵌:head样式类型=”text/css”/style/头

*外部:.csslinkhref=””rel=”styheet”type=”

text/css”/styletype=”text/css”@import“”;/

风格

2.css选择器

透明基础选择器:标记选择(.)class选择(#)ID选择

复合材料用途的基础选择：

交集：标记类别或ID

并集：,

后代:外层内层

DIV+CSS排版

-HTML容器类型：

*块级容器:div,宽高边距(4个)*行级容器:span,宽高

由内容来决定,不独占空间

disy:显示方式block块级inline行级none不显示

-盒子模型

-外边距的计算

左右外边距的计算：盒子1的右外+盒子2的左外上下外

边距：会出现“陷陷”现象，距离取最大的边距

-盒子定位：

1.流：所有元素，默认，都按照流进行排列

2.提出流：位置：定位、绝对定位、相对

定位

绝对定位：absolute配合topleft//根据整个浏览器页面来算

相对定位：relative配合topleft//根据父级容器进行定位

固定定位：fixed配合topleft//根据整个浏览器页面来算,而且不随

滚动条而移动

b.float:leftright

-案例1-3-1型布局

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN