前端---css

css盒模型

1、什么是盒模型？
CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin
CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。
最内部分是元素内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距
2、css设置基本属性

height 设置元素的高度。属性值：auto：默认。/px、cm 等
单位定义高度。/百分比
width 设置元素的宽度属性值：auto：默认。/px、cm 等单
位定义高度。/百分比
auto：默认。、
cm 等单位定义高度。/百分比
 max-width 设置元素的最大宽度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
min-height 设置元素的最小高度。属性值：auto：默认。/px、
min-width 设置元素的最小宽度。属性值：auto：默认。/px、
cm 等单位定义高度。/百分比
2.padding 属性：元素的内边距:  padding-top 属性设置元素的上内边距（空间）。
 padding-right 属性设置元素右内边距（空白）。
padding-bottom 属性设置元素的下内边距（底部空白）。
padding-left 属性设置元素左内边距（空白）。
padding 属性接受长度值或百分比值，但不允许使用负值
3.border 属性：元素的边框，是围绕元素内容和内边距的一条或多条线。
 border 属性：
可以按顺序设置如下属性：
border-width
 border-style
 solid 定义实线。/dotted 定义点状边框/double
定义双线...... o border-color

3、margin 属性：元素的外边距: 围绕在元素边框的空白区域是外边距。设置外边距会在元素外
创建额外的“空白”。
margin-top 属性设置元素的上外边距（空间）。 margin-right 属性设置元素外内边距（空白）。 margin-bottom 属性设置元素的下外边距（底部空白）。
margin-left 属性设置元素左外边距（空白）。
margin 属性接受长度值或百分比值，允许使用负值。
4、外边距的合并：
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一
个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的
较大者。
5.两种盒子模型：
一种是 W3C 的标准盒子模型；一种是 IE 的盒子模型。
怪异盒模型 (ie 盒模型)
box-sizing 属性可以为三个值：content-box（default），
border-box，padding-box。
content-box，border 和 padding 不计算入 width 之内
border-box，border 和 padding 计算入 width 之内（怪异模式）
inherit 使元素继承父元素的盒模型模式

css其他属性

1、opacity：透明度设定：
Firefox, Chrome, Opera 和 Safari 使用属性 opacity
来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值
越小，越透明。
filter:alpha(opacity=x)。x 能
够取的值从 0 到 100。值越小，越透明。
opacity 与通过 rgba()设定透明度的区别：前者同时作用于元素的标签内容，后者只是作用于元素本身
2、鼠标样式
我们可以通过 cursor 属性改变浏览器默认的鼠标样式
比如：

（1）、hand是手型
（2）、pointer也是手型（推荐）
（3）、crosshair是十字型
（4）、wait是等待的效果
（5）、default是默认效果
（6）、auto 系统自动给的效果

3、溢出的效果
overflow如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪
overflow-x如果内容溢出了元素内容区域，是否对内容的左或者右边缘进行裁剪

overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪
visible 不裁剪内容，可能会显示在内容框之外.
hidden 裁剪内容-不提供滚动机制。
scroll 裁剪内容-提供滚动机制。
auto 如果溢出框，则应该提供滚动机制

4、rem:根元素字体的大小：
浏览器默认字体大小为16px em是以父元素字体为基准的
5、.display属性常用属性值：
display的属性值很多，有些目前支持度不好，有些会放到以后课程或综合实例中讲解，这里介绍几种常用的情况。
none 此元素不会被显示。
block 此元素将显示为块级元素。特征: 换行，可设置宽高尺寸
inline 行内元素，默认。特征:大小自适应;不换行inline-block :行内块元素。特征:可以设置大小，但是不可以换行

css浮动

1、浮动的概念
使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性：用float属性，它的属性值有两个，为right 和left两个属性值。

2、使用浮动常出现的问题
1.对附近的元素布局造成改变，使得布局混乱（覆盖）
2.因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的，当浮动之后，父容器的高
度就会坍塌。

4、清除浮动 方式一：给前面一个父元素设置高度
缺点：元素容器不可以自适应高度
方式二：在浮动的元素后面加一个空元素，设置属性为clear：both。在浮动元素后面的元素设置clear：both。
缺点：成本太高，添加了一个元素，难维护 clear属性取值： none:默认取值，按照浮动元素的排序规则（左浮动找左浮动，右浮动找右浮动）
left：不要找前面的左浮动元素 right：不要找前面的右浮动元素 both：清除所有浮动元素
方式三：通过设置父容器css的样式：“overflow：hidden
通过overflow:hidden;来清除浮动，其实overflow无形中对父容器高度进行了测量，是设置父容器高度的另一种方法。
方式四：after伪类：对父元素的after伪类进行设置。 用伪元素选择器和内墙法结合使用来给元素清除浮动