CSS快速学习4：浮动和盒模型

浮动属性：

Float：定义网页中其他文本如何环绕该元素。

有三个属性值：

left：元素活动浮动在文本左面；

right：元素浮动在右面；

none:默认值，不浮动。

浮动的三大显著特征：

1.div块元素失去“块状”换行显示特征，变为行内元素。

2.紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示。

3.占据行内元素的空间，导致行内元素围绕显示。

浮动元素的宽度由子元素的宽度决定。

Clear：清除浮动

如果前一个元素存在左浮动或右浮动，则换行以区隔

只对块级元素有效

属性值

none：允许两边都可以有浮动对象

both：清除两边浮动

left：清除左边浮动

right:清除右边浮动

如果父元素出现高度塌陷，给高度塌陷的元素添加overflow：hidden

盒模型组成部分：

CSS盒子模式都具备这些属性：内容（content）、填充（padding）、边框（border）、边界（margin）.

盒模型的相关元素：

1.border的使用方法

border:边框宽度边框风格边框颜色;

例如：border:5px solid #f00

border-style的值：

solid实线，dotted点线，dashed虚线，double双线，groove槽边，ridge岭边，inset凹边，ouset凸边，none无边框，默认值，hidden无边框。

2.padding的使用方法

padding区域在border与content之间；背景色和背景图像会覆盖padding和content组成的区域；

属性值的4种方式：

四个值：上右下左 {padding:10px 20px 30px 40px;}

三个值：上左右下 {padding:10px 20px 30px ;}

二个值：上下左右 {padding:10px 20px ;}

一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/

padding不可以为负值

padding-left	padding-left:10px;	左内边距为10px
padding-right	padding-right:5px;	右内边距为5px
padding-top	padding-top:20px;	上内边距为20px
padding-bottom	padding-bottom:8px;	下内边距为8px

3.margin的使用方法

外边距(margin)在border之外，margin区域不应用背景;

CSS中margin默认值为0

边界：margin，在元素外边的空白区域，被称为边距。

margin:2px 4px 6px;/*定义元素上边界为2px，左右边界4px下边界为6px，*/

margin:0 auto;/*在浏览器中横向居中。

说明：可单独设置一方向边界，如：margin-top:10px;

在非浮动的情况下，margin两者相遇取最大值，比如一个5px和一个10px,显示效果为10px。

在非浮动的情况下，当我们的父元素既没有padding值也没有border值，子元素的margin-top会和父元素合二为一，导致父元素产生margin-top的效果。

在浮动的情况下，margin值相遇取相加值。

CSS快速学习4：浮动和盒模型相关推荐

css--DIV+CSS布局、常用属性、盒模型、自定义字体、标签的分类及相互转换
目录一.DIV+CSS布局 1.1 布局时常用的属性 1.2 布局 - 上中下结构 1.3 布局 - 上中下 - 左右 1.4 圣杯布局和双飞翼布局二.字体属性 2.1 字体颜色 2.2 字体大 ...
html盒模型向上浮动,HTML5盒模型、浮动和定位
在此之前我们先了解一下块级元素和行内元素的区别一.块级元素 1.总是从新的一行开始 2.高度.宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素二.行内元 ...
CSS快速学习5：文本溢出和XHTML元素分类
文本溢出 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/sroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会出现在元素框之外: ...
CSS3学习笔记三---怪异盒模型 | 弹性盒*
一:怪异盒模型 1:box-sizing: content-box:正常盒子模型 2:box-sizing: border-box:怪异盒模型两者区别:正常盒子宽高设置好了,之后加padding.b ...
《CSS世界》笔记二：盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐写在前面在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...
CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素内联元 ...
CSS快速学习（2021.2.7-15）
注意: 这波是赶作业,所以看的速成视频.(从win32到electron到html和css,假期过大半东西还没做出来555) 仍旧是众所周知的学习网站:b站,找到了DasAutoooo老师的视频. 学 ...
学习css3的弹性盒模型
Flexbox通常能让我们更好的操作他的子元素布局,例如: 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行: 可以快速让他们布局在一列: 可以方便让他们对齐容器的左.右 ...
CSS快速学习9：浏览器兼容
五大浏览器内核 •Trident (MSHTML) (三叉戟:三叉线:三齿鱼叉) •Gecko (壁虎) •Presto ( 迅速的) •Webkit (Safa ...

CSS快速学习4：浮动和盒模型

CSS快速学习4：浮动和盒模型相关推荐

最新文章

热门文章