前端学习历程5

css

盒子模型

内边距padding特性：背景色蔓延到内边距；可以设置单一方向内边距，padding-方向（top bottom left right）

边框border：样式（solid double dashed dotted），背景色也能蔓延到边框

外边距margin：四个方向，背景色没有蔓延，*{margin:0}，外边距可以是负值，屏幕居中（margin:0 auto；）横向居中

外边距特性：当两个盒子处于对等关系时，垂直方向外边距取最大方向值，水平方向外边距会进行合并处理；当两个盒子处于包含（嵌入）关系时，内盒margin-top===>外盒的padding-top，注意计算高度，给外盒设置边框，加浮动，overflow：hidden.BFC

溢出属性

overflow:visible/hidden/scroll/auto/inherit;

• visible:默认值，溢出内容会显示在元素之外；
• hidden:溢出内容隐藏；
• scroll:滚动，溢出内容以滚动方式显示；
• auto:如果有溢出会添加滚动条，没有溢出正常显示；
• inherit:规定应该遵从父元素继承overflow属性的值 。
• overflow-x：X轴溢出            overflow-y：Y轴溢出 

空余空间

white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白；
normal:默认值，空白会被浏览器忽略，
nowrap:文本会在同一行上继续，直到遇到<br/>标签为止；


nowrap：不换行
pre：显示空格，回车，不换行
pre-wrap：显示空格，回车，换行
pre-line：显示回车，不显示空格，换行

省略号显示

text-overflow:clip/ellipsis
clip:默认值，不显示省略号...
ellipsis：显示省略号


当单行文本溢出显示省略号需要同时设置以下声明：
1.容器宽度：width：200px；
2.强制文本在一行内显示：white-space：nowrap；
3.溢出内容为隐藏：overflow：hidden；
4.溢出文本显示省略号：test-overflow：ellipsis；

元素显示类型

元素类型的分类，依据CSS的显示
块元素（block element）	行内（内联）元素	行内块元素
A)块元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域， B）默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而选排列。 C）块状元素都可以定义自己的宽度和高度。 D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其他块状元素。我们可以把这种容器比喻为一个盒子	A）内联元素的表现形式是始终以行内逐个进行显示；横着排 B）内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度和高度只能根据所包含内容的高度和宽度来确定，他的最小内容单元也会呈现矩形形状； C）内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效	内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
例如：div p ul ol li dl dt dd h1-h6等	例如：a b em i span strong	例如：img input等

定位position（子绝父相）

个数	语法	说明	文档流	偏移位置（top left right bottom）时候的参照物	层叠顺序（z-index）
1	position：static	默认值	默认	默认	z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层设置后，数值越大，层越上。
2	position：absolute	绝对定位	脱离	A）当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 B）有父元素且父元素有定位，父元素
3	position：relative	相对定位	不脱离	自己的初始位置
4	position：fixed	固定定位	脱离	浏览器的当前窗口
5	position：sticky	粘性定位	可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好

浮动与定位的区别：

float：半脱离，文字环绕效果

absolute：全脱离，不会出现文字环绕效果。

图片半透明属性

opacity：0.7；/表示图片透明度70%/

  锚点作用：页面不同区域的跳转，使用a链接。           

<a herf="#锚点的名字"></a>

<div  id="锚点"></div>

CSS Sprites的原理（图片整合技术 ） （CSS精灵图）/雪碧图

一、将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。

二、图片整合和优势：

1）通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。

2）通过整合图片来减小图片的体积。

宽高自适应     

自适应：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据  窗口或子元素自动调整 ，这就是自适应。

块级元素

（1）宽度自适应：元素宽度的默认值为auto

（2）高度自适应 ：元素高度的默认值{height：auto}

浮动元素

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷

方法一：给父元素添加声明overflow：hidden；（缺点：会隐藏溢出的元素）

方法二：在浮动元素下方添加空块元素 ，并给 该元素添加声明：clear：both；height：0；overflow：hidden；（缺点 ：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能 ）

方法三：万能清除浮动

选择符：after{content:" ",clear:borth;display:block;height:0;visibility:hidden;/overflow:hidden}

 伪元素

1）after（与content属性一起使用，定义在对象后的内容）
如：div：after{content：url（logo.jpg）;}
div:after{content:"文本内容";}
2)before:与content属性一起使用，定义在对象前的内容。
如：div：before{content："在其前放内容"；}
3）first-letter：定义对象内第一个字符的样式。
4）first-line：定义对象第一行文本样式。

 display：none与visibility：hidden的区别

display：none为不占为隐藏；visibility：hidden为占位隐藏。

窗口自适应：盒子根据窗口的大小进行改变

设置方法：html，body{height：100%}

两栏布局

calc（）函数的使用
calc()函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width：calc（100%-10px）
任何长度值都可以使用calc（）函数进行计算；
calc（）函数支持"+","-","*","/"运算；
calc（）函数使用标准的数学运算优先级规则。

三栏布局

采用float实现。