HTML和CSS学习笔记（一）
2015-11-28 19:11
447 查看
1） 网页布局是网页制作的基础。（DIV+CSS)
流式布局
浮动布局
绝对定位布局
2） 块级元素和行级元素的区别：
块级元素：div, ul, li, dl, dt, p……;
行级元素：span, strong, img, input;(大多数表单标签都属于行级元素）
行级元素是一个盒子模型，所以插入图片img标签也是一个盒子模型。
3）CSS样式分为内部样式，行内样式和外部样式，三者遵循就近原则（谁离标签最近）：
行内样式>内部样式>外部样式
4）制作网页时，一般不设置div的高度，因为在盒子模型里面，不设置盒子模型的高度的时候，高度可以随着内部的内容自动变化（自适应高度）。
5）要想使整个网页居中，套一个父层，运用margin属性（margin：上下宽任意，auto）；
6）一旦设置了浮动（float）或者绝对定位（absolute/fixed)，网页就不能居中了。
7）盒子模型的三位立体结构图的顺序（由上到下）：border, content+padding, background-image, background-color, margin;
8) 浮动布局里，当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
<注>： 当元素设置了浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。
9）相对定位和绝对定位的区别：
相对定位（relative）：相对于自身原有位置的偏移，但仍旧处于标准文档流中；
绝对定位（absolute）：建立了以包含块为基准的定位，但是完全脱离了标准文档流；且绝对定位最后分为两种情况：未设置偏移量和设置偏移量。而设置了偏移量又分为 以下两种情况：1.无已定位祖先元素，那就以<HTML>为偏移参照基准；若是有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准。
10）margin-left和left的区别：
这个刚开始学，真的区别不开，是个难以理解的问题，分享一个链接，这位博主讲的很详细，很好理解：http://blog.csdn.net/tomatozq/article/details/7178144
11）分享一个制作网页滑动点的CSS方法：
.slider{width:8px;
height:8px;
border-radius:50%; 将边框设置为圆形，设置直径；
border:1px solid #000;
然后将其中一点的背景颜色设置为设置为黑色；
position:absolute;
margin-top:-150px;
}
流式布局
浮动布局
绝对定位布局
2） 块级元素和行级元素的区别：
块级元素：div, ul, li, dl, dt, p……;
行级元素：span, strong, img, input;(大多数表单标签都属于行级元素）
行级元素是一个盒子模型，所以插入图片img标签也是一个盒子模型。
3）CSS样式分为内部样式，行内样式和外部样式，三者遵循就近原则（谁离标签最近）：
行内样式>内部样式>外部样式
4）制作网页时，一般不设置div的高度，因为在盒子模型里面，不设置盒子模型的高度的时候，高度可以随着内部的内容自动变化（自适应高度）。
5）要想使整个网页居中，套一个父层，运用margin属性（margin：上下宽任意，auto）；
6）一旦设置了浮动（float）或者绝对定位（absolute/fixed)，网页就不能居中了。
7）盒子模型的三位立体结构图的顺序（由上到下）：border, content+padding, background-image, background-color, margin;
8) 浮动布局里，当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
<注>： 当元素设置了浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。
9）相对定位和绝对定位的区别：
相对定位（relative）：相对于自身原有位置的偏移，但仍旧处于标准文档流中；
绝对定位（absolute）：建立了以包含块为基准的定位，但是完全脱离了标准文档流；且绝对定位最后分为两种情况：未设置偏移量和设置偏移量。而设置了偏移量又分为 以下两种情况：1.无已定位祖先元素，那就以<HTML>为偏移参照基准；若是有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准。
10）margin-left和left的区别：
这个刚开始学，真的区别不开，是个难以理解的问题，分享一个链接，这位博主讲的很详细，很好理解：http://blog.csdn.net/tomatozq/article/details/7178144
11）分享一个制作网页滑动点的CSS方法：
.slider{width:8px;
height:8px;
border-radius:50%; 将边框设置为圆形，设置直径；
border:1px solid #000;
然后将其中一点的背景颜色设置为设置为黑色；
position:absolute;
margin-top:-150px;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 