day044CSS相关属性之盒子模型、float浮动、overflow溢出属性、position定位

本节内容：CSS相关属性2

1、CSS盒子模型

2、float浮动

3、overflo溢出属性

4、position（定位）

一、CSS盒子模型

1、margin：外边距，控制元素间的距离，整个模型实际占的大小；

2、border：边框，文字的边框，在内边距和外边距之间；

3、padding：内边距，内容到边框的距离；

4、content：内容，盒子的内容，显示文本和图像。

1、margin外边距的写法

1、普通写法：

.margin-test{ # 选择器选择这个

margin-top:5px;

margin-right:10px;

margin-bottom:15px;

margin-left:20px;

}

一般浏览器会默认给加上一个margin，

所以我们一般写CSS样式的时候，都会先写一个body的上下左右的margin都设置为0.

2、如果将上下两个标签都设置了margin是什么效果

3、推荐使用简写：

顺序：上右下左

.margin-test {

margin: 5px 10px 15px 20px;

}

4、常见居中：

.mycenter {

margin: 0 auto; #上下0像素，左右自适应，居中的效果

}

如果你写的是三个：margin: 10px 20px 10px;意思是上为10，左右为20，下为10

2、padding内填充

写法跟margin相同：

.padding-test {

padding-top: 5px;

padding-right: 10px;

padding-bottom: 15px;

padding-left: 20px;

}

1、推荐使用简写：

顺序：上右下左

.padding-test {

padding: 5px 10px 15px 20px;

}

补充padding的常用简写方式：

提供一个，用于四边；

提供两个，第一个用于上－下，第二个用于左－右；

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；

提供四个参数值，将按上－右－下－左的顺序作用于四边；

二、float浮动

脱离了标准文档流，

1、写法

.div1{

float: left;

}

三种取值

　　　　left：向左浮动

　　　　right：向右浮动

　　　　none：默认值，不浮动

先后顺序，一般按html写的顺序排，也可以自己写左右

效果：

2、标签浮起后，出现的副作用

浮动元素会生成一个块级框，而不论它本身是何种元素。

若父标签也没有，设置任何高度

将无法撑起自己的父标签，会被下面的标签顶上来，然后浮起的标签，盖在便签上

fe:浮起的副作用（浮起标签和下面的标签重叠）

解决办法：

3、浮动元素特点介绍：

浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

css浮动参考示例

4、clear清除浮动

为什么要用清除浮动：

把一个块级标签变成一个类似内敛标签的感觉，不好操控，容易混乱，

所以一般都用浮动来进行布局。

clear属性规定元素的哪一侧不允许其他浮动元素。

clear属性只会对自身起作用，而不会影响其他元素。

1、清除浮动的三种方式

浮动的副作用（父标签塌陷问题），所以要清除浮动

主要有三种方式：

1、固定高度就是我们刚才的示例，在父标签里面加一个其他的标签

2、伪元素清除法 css来解决

3、overflow:hidden（用溢出属性解决）

fe1:第一种

fe2:第二种，伪元素清除法（使用较多）：

.clearfix:after {

content: "";

display: block;

clear: both;}

CSSCopy

四、overflow溢出属性（先看下面的例子）

设置方向

overflow（水平和垂直均设置）

overflow-x（设置水平方向，只出现x轴的滚动条）

overflow-y（设置垂直方向，只出现y轴的滚动条）

1、防止溢出，文本不显示或者超出文本框

fe1:运用overflow示例，做圆形头像

运用overflow，做圆形头像

<!DOCTYPE HTML>

<html>

<head>

<title>圆形的头像示例</title>

<style>

* {

margin: 0;

padding: 0;

}

.header-img {

width: 150px; #如果这个高度和宽度比图片的像素小怎么办，图片显示不全啊，因为用户上传的头像没准多大像素的，就需要设置下面哈格.header-mg>img，里面写上max-width:100%了

height: 150px;

border: 3px solid white;

border-radius: 50%; #圆形的边框

overflow: hidden; #溢出的内容隐藏

}

.header-img>img {

max-width: 100%; #相当于将图片的大小设置为父级标签的大小来显示了，因为用户上传的头像的像素我们是不知道的，就让它按照父级标签的大小来，就能放下整个头像了，就不会出现头像显示不全的问题了

　　　　#直接写width:100%就行，上面写max-width的意思是如果图片大于咱们设置的标签高宽的时候，就按照父级标签的大小来，比父级标签的高宽小的时候，就不需要按照父级标签的大小来了，了解一下就行了

}

</style>

</head>

<body>

</div>

</body>

</html>

HTMLCopy

五、position定位

小范围的布局一般都是定位做的，大范围的布局一般都是用float来做的

1、几种基本的相关定位

1、static（无定位，咱就不说了，主要看相对和绝对定位）

2、relative（相对定位）：

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置左上角为参照物。

元素还占据着原来文档流的空间，不会出现父级标签塌陷的问题。

移动方向：

往右移动：right:100px

都是按照元素自己的左上角进行计算的

3、absolute（绝对定位）

设置为绝对定位的元素框从文档流完全删除，也会有父级标签塌陷的问题

不占位置，

2、fixed（固定）：回到顶部的示例

不管页面怎么动，都在整个屏幕的某个位置

对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。

这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。

但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

fe:定位代码示例

定位代码示例

<!DOCTYPE html>

<head>

<title>返回顶部示例</title>

<style>

* {

margin: 0;

}

.d1 {

height: 1000px;

}

.scrollTop {

padding: 10px;

text-align: center; #水平居中

position: fixed;

right: 10px; #距离窗口右边框的距离

bottom: 20px; #距离窗口下边框的距离

/*height：20px；

　　　 line-height：20；当line-height等于height的值的时候，就能实现一个文本居中的效果 */

}

</style>

</head>

<body>

</body>

</html>

HTMLCopy

3、z-index（确定层叠关系，就是谁在前面）

结论：

1、z-index 值表示谁压着谁，数值大的压盖住数值小的，

2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，

都可以使用z-index，而浮动元素float不能使用z-index

3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，

或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

4、从父现象：父亲怂了，儿子再牛逼也没用

fe:position的示例，用来定义模态对话框

position的示例，用来定义模态对话框

#自定义的一个模态对话框示例代码：

<!DOCTYPE html>

<head>

<title>自定义模态框</title>

<style>

.cover {

#rgba的最后一个参数就是透明度的意思，所以如果我们这样写，就不需要写下面那个opcity了，但是这个只表示的背景颜色的透明度，opcity是标签的透明度及标签的内容(包括里面的文字)及标签下面的子标签的透明度

position: fixed;

top: 0;

right: 0; top\right\bottom\left都设置为0，意思就是全屏，这个标签把全屏都覆盖了

bottom: 0;

left: 0;

z-index: 998;

#opcity:0.4; #设置元素的透明度

}

.modal {

position: fixed;

width: 600px;

height: 400px;

left: 50%; #设置了left：50%和top：50%，你就会发现，你这个标签的左上角相对于页面的左面是50%，上面是50%，所以我们还要移动窗口，往左移动标签宽度的一半，往上移动高度的一半就行了。就是下面的margin设置

top: 50%;

margin: -200px 0 0 -300px; #左下右上，别忘了，往左移动要负值，往上移动要负值，因为它的移动是按照自己标签的左上角来移动的。

z-index: 1000;

}

</style>

</head>

<body>

</body>

</html>

HTMLCopy

六、综合示例

1、顶部导航菜单

顶部导航菜单

<!DOCTYPE HTML>

<html>

<head>

<title>li标签的float示例</title>

<style>

/*清除浏览器默认外边距和内填充*/

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none; /*去除a标签默认的下划线*/

}

.nav {

height: 40px;

width: 100%;

position: fixed;

top: 0;

}

ul {

list-style-type: none; /*删除列表默认的圆点样式*/

margin: 0; /*删除列表默认的外边距*/

padding: 0; /*删除列表默认的内填充*/

}

/*li元素向左浮动*/

li {

float: left;

}

li > a {

display: block; /*让链接显示为块级标签*/

padding: 0 15px; /*设置左右各15像素的填充*/

color: #b0b0b0; /*设置字体颜色*/

line-height: 40px; /*设置行高*/

}

/*鼠标移上去颜色变白*/

li > a:hover {

color: #fff;

}

/*清除浮动解决父级塌陷问题*/

.clearfix:after {

content: "";

display: block;

clear: both;

}

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

HTMLCopy

2、小米商城的示例，

按照红框--黄框--子框--蓝框来看整个布局：

产品经理需求–>UI（视觉、交互等各种UI）将这些页面做成图片（包括里面的文字大小图片大小等都给你准备好，标的很清楚）–>

前端工程师（通过前端代码来实现UI的页面）–>后端工程师（写提供数据、处理数据的逻辑）–>DBA管理数据

fe:给大家一个css只做动画效果的方式：

鼠标移动到标签上的时候，出现动态效果和阴影的效果：

鼠标移动到标签上，出现动态和阴影效果

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

/*给标签加上鼠标移动上去的一些效果*/

#test{

height: 200px;

border: 1px solid black;

}

#test:hover{

box-shadow: 0 5px 10px; /*给标签加阴影的效果，参数1是水平方向的阴影，参数2的5px是垂直方向上的阴影，参数3是阴影的范围*/

transform: translate3d(3px,-2px,0); /*鼠标移动上去之后有个标签往上台的效果，三个参数是：x轴，y轴，z轴，现在的效果是y轴方向往上移动2px,x轴往右移动3px*/

transition:all,.2s linear; /*这个的意思是所有的新样式改变，在0.2秒内慢慢的显示出来*/

}

</style>

</head>

<body>

</body>

</html>

HTMLCopy