九、盒子模型-浮动

1.浮动

最早用于控制图片(图片文字环绕)

浮动的盒子在标准流之外,鼠标移动到下盒子上观察浮动

float
标准流

2.float会改变元素的display属性

会变成inline-block

3.案例

3.1 简单布局

给浮动盒子套一个标准流的父元素

float
float
标准流

3.2 小米


3.3 导航栏


4.清除浮动

清除浮动的原因:

标准流父元素套浮动子元素,用来减少对下方标准流布局的影响。

而有些浮动子元素的高度并不确定,故很难给父元素确定的大小,这时候就需要运用清除浮动的布局。

4.1 额外标签法(隔墙法)

float
float
标准流

4.2 父级添加overflow属性方法

float
float
标准流

4.3 使用after伪元素清除浮动

float
float
标准流

4.4 使用双伪元素清除浮动

float
float
标准流


十、CSS样式书写顺序

1.布局定位(display position float clear visbility overflow)

2.自身属性(width height margin padding border background)

3.文本属性(color font text-decoration text-align vertical-align white-space break-word)

4.其他属性(CSS3)(content cursor border-radius box-shadow text-shadow background)



十一、定位

1.静态定位(static)

就是默认定位,无定位的意思


2.相对定位(relative)

即相对于其原先在标准流中的位置

1. 其他元素会受其标准流位置影响,即标准流的位置影响保留

鼠标移动到上盒子观察

relative
标准流

3.绝对定位(absolute)

1. 以最近一层有定位的(即不为static)的上级元素为定位参照

否则以文档(body)为定位参照(仅左右定位时,以标准流原高度为准)

2. 在任何情况下原位置影响不保留

后来加上:四个值均存在时,优先使用 top left 的值

鼠标移动到上盒子观察

relative的父元素
absolute
标准流兄弟元素

4.最合适的定位 ——— 子绝父相

父元素对其他元素无影响,子元素无所谓

relative父元素
absolute子元素
普通标准流元素

5.固定定位(fixed)

见侧边栏

无视父元素,仅以文档为定位参照。


6.绝对定位水平居中


7.堆叠顺序

拥有定位的盒子,其层级后来者居上:

通过z-index属性来调整定位元素的层叠性(鼠标移动到盒子上来置z-index 1):


7.绝对定位改变display属性

绝对定位后自动转化为一个类似行内快的display属性

需要块级的通栏盒子,则必须给一个w100%

span w100%

8.浮动绝对定位无塌陷问题



十二、CSS高级技巧

1.显示及隐藏元素

隐藏后位置不保留
鼠标移动到上方的盒子来观察隐藏:

我会隐藏

鼠标移动到下方的盒子来观察显示:

我会显示

2.可见性(visibility)

隐藏后位置保留
鼠标移动到下方的盒子来观察隐藏:

我会隐藏

3.溢出隐藏(overflow)

鼠标移动到下方来观察溢出隐藏:

text 文本 text 文本 text 文本 text 文本 text 文本

4.CSS用户界面样式

鼠标样式


去除轮廓线:outline: none;


防止拖拽文本域


文本垂直对齐(vertical-align)

仅对inline & inline-block有效

常用于图片、表单和文字对齐

text 文本 text 文本 text 文本 text 文本 text 文本

去除图片在父元素中的底端空白缝隙

图片默认与文字基线对齐,下方缝隙是文字基线以下的预留空间

解决方法一、图片display:block;则此行不会容纳任何其他元素,则不会预留基线以下的空间。

解决方法二、图片与文字基线对齐vertical:(top/middle/bottom);

移动鼠标观察方法二:

溢出的文字用省略号表示

单行显示 → 溢出隐藏 → 省略号替代

文本 text 文本 text 文本 text 文本 text

5.滑动门技术

随意伸缩的固定背景样式

微信官网nav:

滑动门的动态展示:

6.margin负值应用

盒子紧邻border变粗的问题,鼠标移动到下方盒子上观察:

1
2
3
4
5
6

紧邻盒子border会被周围盒子覆盖

1
2
3
4
5
6

解决:

:hover添加定位

1
2
3
4
5
6

7.制作三角形

三角形的本质是边框:

调节宽高变换更多形状,鼠标移动到盒子上观察:

为了照顾低版本浏览器的兼容性和定位的准确性,我们还需要加上:
font-size:0;
line-height:0;