HTML+CSS注意知识点

1.meta标签 数据以键值对的形式存在。可以提供搜索引擎的关键字

  可以重定向和确定文的形式。如下:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

2.语义话:就是在网页中尽量的使用标签。网页能够好的被搜索引擎理解。更容易让屏幕阅读器读出网页内容

3.不是所的CSS样式都可以继承。例如border是不可以继承的。color可以继承!

4.select check radio的value属性值是不能显示在网页中的 但是button的却可以

CSS盒子模型

margin padding  border

CSS 布局模型

1.流动模型(Flow)

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)内联元素标签a、span、em、strong都是内联元素。

2.浮动模型(Float)浮动模型脱离了文档流所以它不会再文档中占据位置(left,right)

3.层模型(Layer)

1、绝对定位(position: absolute)

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口 。如果最近的一个定位属性的父包含块不是body,那么要给该父块添加position:relative。然后再相对于父元素position:absolute

参照定位的元素必须是相对定位元素的前辈元素(不是body的情况)

2、相对定位(position: relative)

如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

所以相对定位原来的元素还是占据着文档流的位置。新的元素就相当于float

3、固定定位(position: fixed)

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元 素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可 以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

原文地址:https://www.cnblogs.com/kkloveit/p/4379157.html