html综合实战演练,HTML+CSS+DIV实战演练笔记

简单工具：sublime  Firebug

浮动布局

可以使div并排布局

#div1{

width: 100px;

height: 100px;

background: red;

float: left;

}

#div2{

width: 100px;

height: 100px;

background: blue;

float: left;

}#div3{

width: 400px;

height: 400px;

background: yellow;

}

左边

右边

普通

效果图：

div1 和div2 漂浮到左边之后，接下来的div被div1和div2所覆盖，怎么解决这样的情况？

*在div3加入属性  clear：left、right、both    不许有漂浮块在上面

页面布局演练：往往我们会在整个页面中声明一个最大块的div

① lside和rside在main中漂浮时，main需要设置高度，否则footer不显示            注意：定义id不能用数字，否则没有效果

②当区域无法装下多个漂浮div时，会换到下一行中

注意：文件编码与charset声明的一致

盒子模型

外边距

：盒子与盒子之间的距离  margin ，margin-top,left,right,bottom

单独设置上下左右比较麻烦 ，可以在margin中统一设置，它会顺时针进行设置，没有的选择对边的值。

margin: 10px 20px;

边框

： border

三要素：宽，形状，颜色  border: 5px solid red;           border-top,left,right,bottom

也可以单独设置边框的三要素

border-top-style:solid;

border-top-width:9px;

border-top-color: red;

CSS控制边框画三角形：

#triangle{

width: 0px;

height: 0px;

border-top: 50px solid white;

border-left: 50px solid white;

border-right: 50px solid white;

border-bottom: 50px solid yellow;

}

内边距

：(文字)内容到盒子边框的距离 padding 它和margin一样可以上下左右单独设置(共同设置)

当父div中有个子div，要使二者保持距离，是用父div的padding还是用子div的margin？

答：尽量用子div的margin，padding主要用在文字内容上，布局用margin (盒子与盒子用margin 盒子与文字用padding)

** paddding处的颜色就是背景色，因为background一直铺到border边框

**加入padding后盒子会变大，width和height设置的是文字部分的宽高，设置的padding、border和margin都是在这之外显示的

总结：一个div占的面积=width/height+padding+border+margin

应用

*利用margin使div页面自适应水平居中-----在最外面的div 设置 margin:0 auto;

*margin重叠现象：相邻的普通元素，上下边距并非普通的相加，而是取其中较大的边距值，这种现象叫做margin重叠

而漂浮float的div之间是不重叠的，而是相加

*内联元素 in-line(行内元素)： 只在行内起作用，不换行，设置宽高是没有意义的,竖直方向上不可以设置margin和padding，水平方向上可以设置。

*span和div可以相互转化 display：block； display：inline； 属性是none的话，会隐藏。

CSS控制文本

p标签段落缩进：文本位置 下划线 字间距

text-indent: 20px;

text-align: center;

text-decoration: underline;

letter-spacing: 5px;

对文字的控制：

font-style: italic;  斜体

font-weight: bold;

font-size: 12px;

line-height: 3px; 行高

font-family: "SimHei";字体

使用一个font可以设定，需按照顺序

标题一般用微软雅黑(无衬线) sans-serif 正文用宋体(有衬线) serif

并且，你选择的字体，客户机可能没有，默认会是宋体。 这时，可以排列多个字体 逗号隔开

背景图片

可以background统一设置：

background-image: url("1.png"); /* 倒入图片*/

background-repeat: no-repeat; /* 根据图片大小设置铺排*/

background-attachment : fixed 固定图片位置，滚动滚动条位置不变

background-position: top right; 还有bottom等等属性值

还可以用像素 精确控制 左上角是(0,0)点，控制div较小，可以只显示特定区域的图片

background-position: -150px -190px;

在我们设置路径时，到底是相对哪个文件的路径来找？

在我们采用样式表嵌入式的写法的时候，我们是以当前的index.html网页做相对文件，来设置引入图片的路径，所以设置图片路径的时候只要用

./ 来表示当前同级images文件夹下的图片；但是当我们采用外嵌式的写法，应当是以我们当前的index.css文件所在路径做为相对路径找起。

此时的图片应该为当前index.css文件的上一级css文件夹的同级images文件夹下的图片。

*选择器的优先级不用死记，根据工具(firebug)确定即可

*相同的元素，如li在不同的浏览器下，显示的效果稍有不同，可以通过css强制让所有元素的属性值都一样

*新闻的标题用h标签，段落用p标签

* img标签的使用 图片是内联(正常的内联元素不能设置宽高)替换元素，替换元素是能设置宽和高的，可以将其转成块，去掉margin。

有序列表和无序列表

ul和ol的list-style-type一般都设置成none，一般设置背景图片

表格： table tr td

border-collapse : separate | collapse

超链接  title属性显示鼠标放上去的内容

百度,新窗口打开

p1锚点

p2锚点

p3锚点

或者使用id属性

p1

p2

p3

伪类

css允许我们对a标签的4种状态设置各自的css特性，叫做cdd伪类

a:link a:hover a:active(一般不会写) a:visited

字符实体看手册  如大于号，小于号，人民币符号

尺寸的表示：

①使用像素表示②用百分比表示

px表示文字大小，em是相对大小，指父元素中的1个倍的大小，默认理解为父元素的font-size就是1个em单位

利用行高将文字居中，

行高设置与导航栏(ul嵌li嵌a)的高度一样 line-height:37px;

相对定位与绝对定位：

相对定位是指元素在其正常位置，偏移某些尺寸。position: relative;

绝对定位是指相对于父元素的top，left，right，bottom来定位

*但是，用绝对定位时，父元素要求有position属性才行，否则将依据父的父，父的父......body，哪个祖先有position属性，

相对于哪个祖先，直到body。

父元素 position:relative;它飘在父元素的上空，不占用位置，想让谁飘在上方，设置z-index，看谁飞的高显示谁

其他：

#nav a{

font-size: 16px;

font-family: "楷体";

text-decoration: none;

color: red;

display: block;//将a标签改成块状元素,就可以设置宽和高了

width: 80px;

height: 20px;

text-align: center;//水平居中

line-height: 20px; //竖直居中

}

#nav a:hover{

color:green;

background: url("images/nav_on.gif"); //鼠标放上来时，只改变文字部分的样式，因为a标签是内联元素

}

div宽高：①像素表示②百分比表示：相对于父元素的宽高

字体大小：①像素表示②em表示：em是相对大小，父元素的font-size为1单位em

框架集：

和