最新Css学习总结.docx

inline02

inline03

inline04

c）包裹inline元素的外层元素加上font-size:

0px和-webkit-text-size-adjust:

none实现，但省略号不会出现

a{

background:

red;

font-size:

14px;

}

.overWidth{

white-space:

nowrap;

border:

1pxsolidgray;

font-size:

0px;

-webkit-text-size-adjust:

none;

}

a01

a000000002

2）Inline元素的width和height无效

3）Inline元素的padding都有效，但margin左右有效，上下无效。

4）Inline元素包裹inline元素，外层元素的width和height会被内部的撑开。

.overWidth{

display:

inline;

border:

1pxsolidgray;

}

a01

a000000002

5）Block/inline-block元素包裹inline元素，默认超width自动换行，height撑开。

a）强制不换行可以通过white-space:

nowrap来实现，此时超width的就会浮出来，可以通过overflow:

hidden和text-overflow:

ellipsis配合实现省略显示。

.overWidth{

white-space:

nowrap;

width:

100px;

border:

1pxsolidgray;

overflow:

hidden;

text-overflow:

ellipsis;

}

a01

a000000002

6）超长省略文字需要加在block元素上，且字体不为0才可以。

所以最好解决方案就是用block元素，内部inline元素margin-top:

-8px处理。

节II.04inline-block

此类元素是inline+block的合体

1）margin和padding都有效；width和height都有效；

.inline{

display:

inline-block;

width:

200px;

background:

red;

margin:

10px;

padding:

10px;

}

inline01

inline02

inline03

inline04

2）还是存在8像素的间隔

3）Block/inline-block元素包裹的inline-block元素，默认超width会换行，hieght撑开，可以通过white-space:

nowrap强制不换行，但不能实现文本省略显示。

a{

background:

red;

font-size:

14px;

display:

inline-block;

}

.overWidth{

white-space:

nowrap;

width:

100px;

border:

1pxsolidgray;

overflow:

hidden;

text-overflow:

ellipsis;

}

a01dd

a000000002

节II.05Inherit

继承父元素的display属性。

节II.06Flex

实现盒子布局，主要分为容器和子元素相种。

在容器元素上用display:

flex指定为flex盒子，在子元素上用flex指定元素所占用的格子数。

Flex容器重要属性：

1）Flex-direction：

表示项目排列方向，可以有四个，左到右，右到左，上到下，下到上

2）Flex-wrap：

表示是否允许换行，默认不允许（nowrap）

3）Flex-flow：

是flex-direction和flex-wrap的组合写法

.wrap02{

width:

600px;

height:

200px;

border:

1pxsolidred;

display:

flex;

flex-flow:

columnwrap

}

.grid02{

flex-basis:

60px;

background:

gray;

}

01

02

03

04

05

4）Justify-content：

设置项目的间隔对齐方式（X轴），注意space-between（两端对齐，项目之间间隔一样，顶边）；space-around（每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍）

.wrap02{

width:

600px;

height:

200px;

border:

1pxsolidred;

display:

flex;

flex-flow:

columnwrap;

justify-content:

space-around;

}

.grid02{

flex-basis:

60px;

background:

gray;

}

01

02

03

04

05

5）Align-items：

属性定义在交叉轴上的对齐方式（Y轴，垂直对齐），stretch可以拉申（默认值）

.wrap02{

width:

600px;

height:

200px;

border:

1pxsolidred;

display:

flex;

flex-wrap:

wrap;

align-items:

center;

}

.grid02{

flex-basis:

200px;

background:

gray;

}

01

02

03

04

05

Flex项目的重要属性：

1）Align-self：

项目自身的对齐方式，可以覆盖容器的align-items属性的值

2）Flex：

他是flow-grow\flow-shrink\flex-basis简写，设置元素占用的格子数，如下例子格子是均分的

.wrap{

width:

400px;

height:

200px;

border:

1pxsolidred;

display:

-webkit-flex;

display:

flex;

}

.grid{

background:

gray;

flex:

1;

}

.mid{

flex:

2;

background:

red;

}

01

01

01

3）Flex-grow：

所有子元素之和小于容器宽度时，如果处理剩余宽度，flex-grow默认为0，如果设置为正数，则表示索取剩余宽度值，公式如下：

子元素自身宽度+剩余宽度*（子元素自身glex-frow）/（所有子元素的flex-grow之后和）

.wrap{

width:

400px;

height:

200px;

border:

1pxsolidred;

display:

-webkit-flex;

display:

flex;

}

.grid{

background:

gray;

flex-grow:

1;

flex-basis:

50px;

}

.mid{

flex-basis:

60px;

background:

red;

}

01

01

01

Grid1和grid3计算：

50+240*1/2=170

Grid2计算：

没有设置flex-grow属性，所以为固定值

4）Flex-shrink：

所有子元素之和大于容器宽度时，如果处理超出宽度，flex-shrink默认为1，值越大减小的越厉害，值为0，表示不减少,公式如下：

子元素自身宽度–超出宽度*（子元素自身宽度*子元素自身的flex-shrink/（所有子元素宽度*子元素的flex-shrink之和））

.wrap{

width:

400px;

height:

200px;

border:

1pxsolidred;

display:

-webkit-flex;

display:

flex;

}

.grid{

background:

gray;

flex-basis:

200px;

}

.mid{

flex-basis:

100px;

background:

red;

}

01

01

01

Grid1和grid3计算：

200–100*200/500=160

Grid2计算：

100–100*100/500=80

注意事项：

1）Flex-grow和flex-shrink不好和flex直接混合应用，此两个值是在固定宽度的情况下进行均分的算法，如果嵌入flex属性，算法还不明确。

第III条Float

节III.01Float的特性

Ø应用于文字围绕图片

Ø创建一个块级框

Ø多列浮动布局

Ø浮动元素的宽度、高度自适应，但可以设置其值。

节III.02核心解决的问题

文字围绕图片：

img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。

001文件内容文件内容文内容文件内容

文件内容文件内容文件内容文件内容文件内内容文件内容

文件内容文件内容文件内容文件内容文件内容

文件内容文件内容文件内容文件内容文内容文件内容文件内容

p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容

文件内容文件内容文件内容文件件内容文件内容文件内容

文件内容文件内容文件内容文件内容文件内容文件内容文件内容文件内容

文件内容文件内容文件内容文件内容文件内容文件内内容文件内容

文件内容文件内容文件内容文件容文件内容文件内容

文件内容文件内容文件内容文件容文件内容文件内容

效果图：

（a）这是一个问题

浮动元素与正常元素相邻，且浮动元素与正常元素之间没有清除浮动，此时正常元素会被浮动元素盖住，但包含的内容会围绕浮动元素显示。

100px;height:

200px;background:

red;float:

left;">001

100px;height:

200px;background:

gray;float:

none;">

002

效果图：

001浮动，002没有浮动，但002元素本身被001盖住，但内容却围绕001显示。

节III.03非核心且主要应用领域

分栏布局：

让区块先水平排列，然后超出部分另起一行。

（a）主要特点

Ø父级高度塌陷（这也是一个严重的问题）

.wrap{

background:

red;

padding:

10px;

width:

auto;

}

.left{

background:

gray;

width:

200px;

height:

100px;

float:

left;

}

.right{

background:

yellow;

width:

100px;

height:

100px;

float:

left;

}

left

right

Ø宽、高变成自适应子元素，但宽、高的设置有效。

.wrap{

background:

red;

padding:

10px;

float:

left;

}

.left{

width:

100px;

background:

gray;

}

.right:

{

width:

200px;

background:

yellow;

}

left

right

（b）解决高度塌陷的问题

首先我们需要了解BFC和IFC这两人个基本的概念，因为他与浏览器的渲染有着密切的关系。

（i）BFC（块级格式化上下文）

他是一个独立渲染的区域，规定区域内部如何布局，且与外部毫不相干，主要规则如下：

Ø内部的box会垂直方向，一个接一个地放置

ØBox垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的Margin会发生重叠

ØBFC区域不会与float重叠

.head{

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

最新 Css 学习 总结

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。