HTML & CSS 学习笔记

part 1：HTML

html本身是一个很简单的语言，学习完众多标签以后，就可以开始简单的网页编写了，配合dreamweaver软件，使用起来更是事半功倍。这众多的标签大体上可分为三种：块状元素、内联元素和内联块状元素。这三种元素有其各自的特性，针对这些特性他们的应用场合也不同，如何熟练的使用这些元素是我们需要在今后的学习和工作中需要勤加练习的。我们要做到当看见一张设计稿的时候，心里就要勾勒出它的最优HTML结构。同时，需要注意的一点是一定要培养起这样的思想：结构、表现、行为分离，HTML只是负责结构，尽量避免在HTML中使用修饰效果的标签。

 

---

part 2:css

css（层叠样式表）负责表现。在html中应用css有三种形式：内联式、嵌入式和外部式，在这三种形式中，尽量多采用第三种--外部式，这也是结构、表现、行为分离思想的一个很重要的体现。
css中有众多的选择器：标签选择器、类选择器、id选择器、子选择器、包含选择器、通用选择器、伪类选择器、分组选择器等。这些选择器有不同的写法，相应的，也有不同的作用应用于不同的场合，如何合理安排这些选择器，做到样式语句的精简和样式应用的精准，也是需要我们一步步积累经验的。
css中有一个很重要的概念--盒子模型。盒子模型从上到下分为五层:边框、内边距和盒子中的内容、背景图片、背景颜色和外边距。上面的层能盖住下面的层。盒子模型有几个重要的参数：margin、padding、border还有内容物的尺寸。我们应用的时候要将盒子模型的层数概念和这些参数结合起来，就能很好的使用盒子来了。
往下就讲到了网页布局的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。

1. 流动模型

   流动模型中主要有三个技能点：标准文档流、块级元素和margin属性。流动模型的特点是：从上到下、从左向右依次排列。而流动模型居中的关键就是最外层块级元素要定宽，同时将margin属性设置为auto。

2. 浮动模型
   浮动布局即横向多列布局，通过设置float属性实现。当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。当上一个元素设置了浮动属性后，紧邻在它后面的元素也会受到它的浮动影响，贴着它显示。因此这就带来了一个关键的点--对受到浮动影响的元素清除浮动。清除浮动主要有两种方法，第一种方法是使用clear属性，第二种方法是设置宽度后加overflow:hidden。这两种方法有一个不同点是，当两个子元素都浮动以后就撑不起父元素了，父元素变成一条线，因此此时需要对父元素清除浮动影响，这种情况下就只能用第二种方法。

3. 层模型
   主要通过设置position属性实现，有三种定位模式：绝对定位（absolute）、相对定位（relative）和固定定位（fixed）。
   绝对定位使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。要注意，属性值和实际移动方向是相反的。如果想相对于其他元素定位，需与relative配合使用，但是参照元素必须是定位元素的前辈元素，参照元素中加入relative,定位元素中使用absolute。
   相对定位通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动（即它的下一个元素仍然按照它的原始位置进行排列），属性值和实际移动方向是相反的。
   固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同

标签：浮动,定位,模型,元素,笔记,HTML,选择器,CSS,属性
来源： https://www.cnblogs.com/WHelegiac/p/16462481.html