CSS 盒模型 浮点
盒模型
- CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的
方式。 - 最内部分是元素内容,直接包围内容的是内边距。内边距呈现
了元素的背景。内边距的边缘是边框。边框以外是外边距。
元素的尺寸
height 设置元素的高度。属性值:auto:默认。/px、cm 等
单位定义高度。/百分比
width 设置元素的宽度属性值:auto:默认。/px、cm 等单
位定义高度。/百分比
- max-height 设置元素的最大高度。属性值:auto:默认。/px、
cm 等单位定义高度。/百分比 - max-width 设置元素的最大宽度。属性值:auto:默认。/px、
cm 等单位定义高度。/百分比 - min-height 设置元素的最小高度。属性值:auto:默认。/px、
cm 等单位定义高度。/百分比 - min-width 设置元素的最小宽度。属性值:auto:默认。/px、
cm 等单位定义高度。/百分比 - 当属性值用百分比时是相对于父元素的尺寸来说的。
- 最大最小宽高主要用于动态控制缩放等情况下,这里暂做了解。
padding属性:元素的内边距
- padding-top 属性设置元素的上内边距(空间)。
- padding-right 属性设置元素右内边距(空白)。
- padding-bottom 属性设置元素的下内边距(底部空白)。
- padding-left 属性设置元素左内边距(空白)。
- padding 属性接受长度值或百分比值,但不允许使用负值。
padding * 同时设定四个边距
padding ** 分别设定上下、左右边距
padding *** 分别设定上、左右、下边距
padding **** 分别设定上、右、下、左边距
border属性
- border 属性:
可以按顺序设置如下属性:
border-width
border-style - solid 定义实线。/dotted 定义点状边框/double
定义双线… o border-color
margin 属性
- 围绕在元素边框的空白区域是外边距。设置外边距会在元素外
创建额外的“空白”。 - margin-top 属性设置元素的上外边距(空间)。
- margin-right 属性设置元素外内边距(空白)。
- margin-bottom 属性设置元素的下外边距(底部空白)。
- margin-left 属性设置元素左外边距(空白)。
- margin 属性接受长度值或百分比值,允许使用负值o margin * 同时设定四个外边距
- margin ** 分别设定上下、左右外边距
- margin *** 分别设定上、左右、下外边距
- margin **** 分别设定上、右、下、左外边距
外边距的合并
- 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一
个外边距。 - 合并后的外边距的高度等于两个发生合并的外边距的高度中的
较大者。
两种盒子的模型
一种是 W3C 的标准盒子模型;一种是 IE 的盒子模型。
怪异盒模型 (ie 盒模型)
box-sizing 属性可以为三个值:content-box(default),
border-box,padding-box。
content-box,border 和 padding 不计算入 width 之内
border-box,border 和 padding 计算入 width 之内,其实就是怪
异模式了~
inherit 使元素继承父元素的盒模型模式
CSS其他属性
opacity:透明度设定
opacity 与通过 rgba()设定透明度的区别:前者同时作用于元
素的标签内容,后者只是作用于元素本身。
鼠标的样式 curso
- hand 是手型
- pointer 也是手型,推荐使用这种。
- crosshair 是十字型
欣知大数据—孙也 - text 是移动到文本上的那种效果
- wait 是等待的那种效果
- default 是默认效果
- e-resize 是向右的箭头
- ne-resize 是向右上的箭头
- n-resize 是向上的箭头
- nw-resize 是向左上的箭头
- w-resize 是向左的箭
- sw-resize 是左下的箭头
- s-resize 是向下的箭头
- se-resize 是向右下的箭头
- auto 是由系统自动给出效果
溢出的处理
- overflow 如果内容溢出了元素内容区域,是否对内容的边
缘进行裁剪。 - overflow-x 如果内容溢出了元素内容区域,是否对内容的
左/右边缘进行裁剪。
欣知大数据—孙也 - overflow-y 如果内容溢出了元素内容区域,是否对内容的
上/下边缘进行裁剪。
visible 不裁剪内容,可能会显示在内容框之外。
hidden 裁剪内容-不提供滚动机制。
scroll 裁剪内容-提供滚动机制。
auto 如果溢出框,则应该提供滚动机制。
轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,
可起到突出元素的作用。
outline 在一个声明中设置所有的轮廓属性:
- outline-color 设置轮廓的颜色。
- outline-style 设置轮廓的样式。
- outline-width 设置轮廓的宽度。
- outline-offset 设置轮廓到边框的距离。注:css 新增属性, 不可以写到符合属性里。
display
display 的属性值很多,有些目前支持度不好,有些会放到以后课程
或综合实例中讲解,这里介绍几种常用的情况。
- none 此元素不会被显示。
- block 此元素将显示为块级元素。特征:换行,可设置宽
高尺寸。 - inline 行内元素,默认。特征:大小自适应;不换行。
- inline-block 行内块元素。特征:可以设置大小,但是不可
以换行。 - 其他:
list-item/table/inline-table/table-cell/table-caption…
CSS浮动
CSS浮动的概念
使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以
左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边
缘。浮动属性:用 float 属性, 它的属性值有两个,为 right
和 left
浮动的异常
使用浮动常出现的问题:
- 对附近的元素布局造成改变,使得布局混乱(覆盖)
- 因为元素脱离了文档流,会造成一种坍塌的现象。简单的说就
是原来的父元容器是被元素撑开的,当浮动之后,父容器的高
度就会坍塌
清除浮动
- 方式一:给前面一个父元素设置高度
缺点:元素容器不可以自适应高度 - 方式二:在浮动的元素后面加一个空元素,设置属性为 clear:
both。 在浮动元素后面的元素设置 clear:both。
欣知大数据—孙也
缺点:成本太高,添加了一个元素,难维护
clear 属性取值:
none:默认取值,按照浮动元素的排序规则(左浮动找左浮动,
右浮动找右浮动)
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:清除所有浮动元素 - 方式三:通过设置父容器 css 的样式: “overflow:hidden”
通过 overflow:hidden;来清除浮动,其实 overflow 无形中对
父容器高度进行了测量, 是设置父容器高度的另一种方法。 - 方式四:after 伪类:对父元素的 after 伪类进行设置。
用伪元素选择器和内墙法结合使用来给元素清除浮动