06002 PHP学习总结 – 恵玩科技

昨日回顾

盒子模型深入:

一个盒子的尺寸构成:是由以下几部分构成的:

margin   border   padding   内容区

宽度方向: 左右margin   左右border-width   左右padding   内容区的width

高度方向: 上下margin   上下border-width   上下padding   内容区的height

块盒子的宽高:完全遵从上述规则

行内盒子的宽高:

宽度: 左右margin   左右border-width   左右padding   内容区width由其内容决定

高度: 上下border-width   内容区的height由其内容决定

行内盒子和块盒子其实可以相互转换:

转换为块盒子: display: block;

转换为行内盒子:display: inline;

背景:

背景颜色:  background-color:

背景图片:     background-image: url(图片路径url);

背景图片的重复性: background-repeat: repeat // no-repeat // repeat-x  // repeat-y

背景图片的定位:         background-position: x方向  y方向;

x方向: left   center   right   5px   -5px

y方向: top    center  bottom  5px  -5px

背景综合: background:  背景颜色 背景图片  背景图重复性  背景图定位;

对比:

边框综合: border:  线型  线宽  线色;

 

列表样式:

list-style-type:  前导符设定, 比如有:   disc  //  circle   //square  //  lower-roman

list-style-position:  前导符位置设定:是放在li里面还是li外面, outside  // inside

list-style-image: url(…):  前导图设定。

综合属性:list-style: ……

 

div布局总结

内容与表现分离思想

 

分块思想

 

整体到局部,

 

标准流与非标准流

标准流:所有元素如果没有专门设定其定位(或浮动),那么就称这也的盒子的正常表形为“标准流”

元素的原始定位方式(就是所谓标准流)遵循这个原则: 在遵循块盒子和行内盒子的基础上,尽量往左上角挤靠。

 

非标准流: 人为定位或浮动就改变了元素的原始定位方式。

 

除了浮动能够改变元素(盒子)的定位之外,我们还可以通过如下属性来改变定位方式:

position: static:  静态定位,其中这是所有元素的原始定位,也就是自然流方式的定位。

position: relative;  相对定位:相对于其父盒子的定位方式。

position: absolute; 绝对定位。其实是指在整个网页中任意指定位置(也可以说是相对于body)或其父盒子(父盒子应该是非静态定位的)。绝对定位通常类似“凭空粘在网页上的某个位置”

position: fixed;        固定定位。其实是相对于真个浏览器的可视范围而定位的。固定定位通常类似“凭空粘在窗口上的某个位置”

以上相对定位,绝对定位和固定定位,都需要配合left和top属性才能有效。

left:离指定的元素(定位初始点)的左边多少(px)

right:离指定的元素(定位初始点)的右边多少(px)

top:离指定的元素(定位初始点)的顶边多少(px)

bottom:离指定的元素(定位初始点)的底边多少(px)——很少用

 

层叠顺序:

正常标准流的所有盒子,我们都可以认为是“平铺”到一个平面(比如地面)上作为一层的东西,可以当作0层。

层叠就是分多层放置盒子(元素,标签),即可以放在第2层,第3层。。。。。。。。

 

常见居中总结:

行内盒子里面的内容(文字)无所谓中。

 

文字(行内元素)在块盒子(块元素)中水平居中: text-align: center

文字(行内元素)在块盒子(块元素)中垂直居中: 设定行高等于盒子高(height:30px; line-height:30px;)

 

块盒子在其父块盒子中水平居中: margin: 0 auto;

快盒子在其父块盒子中垂直居中: 没有特别的直接属性可以做到。

 

图片和文字在垂直方向对齐: 在图片上使用:vertical-align: middle

 

外边距溶合:

当两个盒子的上下外边距(margin-top,margin-bottom)相互“触碰”(交汇)的时候,他们之间的实际外间隙是他们中的较大者。

 

样式作用的优先级:

多个样式(选择器)的设定对某个对象都有效的时候,谁最后说了算(优先)?

 

基本优先级:

!important设置 >  行内样式  > id选择器  > 类选择器(含伪类) >  标签选择器  > 通用选择器  〉 继承

 

选择器的优先级权重计算公式:

id选择器的个数*1000  + 类选择器的个数 * 100  + 标签选择器的个数 * 10  +  通用选择器个数*1

 

 

 

 

打赏作者