54-71浮动与盒子

1.0浮动属性.

脱离原先文档的流，飘起来

3D效果

具体操作

1.01想要图片排列

排不开自动会换行

1.02左右浮动float

有顺序，先写的先浮动

浮动见缝插针

文字不会被挡

1.03清除浮动clear

操作

注意位置的放置，不同位置不同运行

写固定高度

overflow:hiden,让浮动计算高度

案例：

2.0盒子模型

2.01内边距

设计一个两个三个四个等等

padding-方向

清空内边距方法padding:0，在style里面添加

2.02边框border

e.g. 10px(粗细）solid(样式)

样式分类

solid实线 double双线 dashed虚线 dotted点状线

背景也会蔓延到边框

空格隔开

代码示例

2.03外边距:magin-top:100px

负值反方向走

图块居中，第二个必须为auto，横向居中

关于特性问题：

1.兄弟关系，两个盒子垂直外边距与水平外边距问题。

01垂直方向，外边距取最大值。

02水平方向，外边距会合并。

2.父子关系，给子加外边距，但作用到父身上了，怎么解决？

01子margin-top==>父的padding-top内边距，注意高度计算。

02给父盒子设置边框

03加浮动

04overflow:hidden.BFC

透明的，增加边框

2.04PS案例

放大缩小

盒子模型案例

针对图片的编辑，包括量宽高等，取色，举行截图

3.0溢出属性：文本太长设计省略

3.01 overflow:visble，hidden，scroll ，auto ，inherit

-x，-y

3.02可以复合使用

3.03案例

图片宽度具体教学，包含位置，所用代码，图片切取

3.04 溢出省略号

01 white-spacing：

namal 默认值

nowrap不换行，除非遇到</br>

pre预格式化文本-保留空格，tag，回车

pre-wrap 显示空格，回车，换行

pre-line:显示回车，不显示空格，换行

02 省略号的显示与代码

text-overflow:clap 裁切

text-overflow:ellipsis显示三个点

4.0元素显示类型

出生就带某种属性

4.01块元素

block element

p标签里面不要嵌套，但可放文本

4.02行内元素和内块元素

这样写也成立

4.03盒子模型

4.04元素类型互相转换

控制使用inline,block,line-block

4.05 display none的使用，鼠标放上才显示。

5.0二级菜单

鼠标放上才显示

多层标记，对box里的item进行设计

对item中的ul标记

.box>li子代选择器

.box li全选中，唯有另外名可特定选择