HTML学习笔记---10day

CSS书写顺序(书写规范，不影响代码运行)

1.布局定位属性：display / float / position / clear / visiblity / overflow

2.自身属性：margin / padding / width / height / border / background

3.文本属性：color / text-decoration / text-align / vertical-align / white-space / break-word

4.其他属性：content / cursor / box-shadow ...

定位

选择器{
position: static / relativ / absolute / fixe / sticky;
}

static：默认定位，无意义。

relative：相对定位，相对于原本位置进行的位置偏移，不影响后面的内容，但还占有原有位置，后面的盒子还是标准流。

absolute：绝对定位，相对于父级元素进行的定位，如果没有祖先元素或者祖先元素没有定位则以浏览器为定位标准，如果祖先有定位以最近的一个有定位的祖先元素为定位标准，绝对定位不占有原有位置。

fixed：固定定位，以浏览器的窗口为参考标准定位（与父元素无关联，不随窗口滚动移动），不再占有原有位置。

sticky：粘性定位，以浏览器的窗口为参考标准定位，占有原有位置，必须添加top、left、right、bottom其中一个才有效果。

定位叠放顺序z-index：

选择器{ z-index:数值;}

数值可以是正整数，0，auto，或者是负整数，数值越大，盒子叠放越靠上。

数值相同，按照书写顺序叠放盒子。

数字后面不加定位，只有定位的盒子才能用z-index属性。

拓展：

1..固定在版心右侧位置

选择器{
position:fixed;
left:50%;
margin-left:（版心宽度的一半距离）;
}

2.绝对定位的盒子居中

(水平居中)选择器{ 
position:absolute;
left:（父级盒子的数值一半）;
margin-left:(盒子宽度的一半-负值);
}
（垂直居中）选择器{ 
position:absolute;
top:（父级盒子的数值一半）;
margin-top:(盒子宽度的一半-负值);
}

3.定位的特殊性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

块级元素添加绝对或者固定定位，如果不给宽、高，默认大小是内容的大小。

4.脱标的盒子不会有外边距塌陷

浮动元素和绝对（固定）定位元素都不会触发外边距合并的问题。

5.绝对（固定）定位会完全压住盒子

浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。因为浮动元素产生的最初目的是为了做文字环绕效果。

绝对（固定）定位会压住下面标准流所有的内容。

网页总结

完整的网页，是标准流，浮动， 定位组成。

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.定位

可以让多个盒子前后叠加显示，如果元素在某个盒子内自由移动就用定位布局。

元素的显示与隐藏

1.display属性

display:none;  隐藏对象
display:block; 显示对象

display隐藏对象不再占有原有位置。

2.visibility可见性

visibility：指定一个元素隐藏或者可见。

visibility: visible;元素可见
visibility: hidden;元素隐藏

visibility隐藏元素后会占有原有位置。

3.overflow溢出

overflow指定对于内容溢出指定的高度和宽度时，发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出隐藏
scroll	添加滚动条
auto	超出自动显示滚动条，不超出不显示