CSS中的float、position、页面自适应属性、font 属性简写

CSS中的float
float中的四个参数

float:right;  右浮动
float:left; 左浮动
float:none;  不浮动
float:inherit; 继承

float属性实现文本环绕
float属性定义了元素在哪个方向进行动
在HTML中任何元素都是可以浮动的。

float浮动的真正原因以及副作用

浮动的元素不占有原空间
使得元素脱离了标准流
父元素塌陷及其他元素异位

css中的定位机制

2. 定位
1. 标准流(普通流)
3. 浮动

CSS中的position
HTML中的三种布局方式

浮动
标准流
定位

position属性的意义

通过top、right、bottom、left实现位置的改变
position属性决定了元素将如何定位

position中的可选参数

relative
static
absolute
fixed
inherit

relative 参数特性

可以利用 top right bottom left 进行定位
不脱离文档流
为子定位划分作用域
移动区域为整个网页

absolute 参数特性

可以利用 top right bottom left 进行定位
脱离文档流
为子定位划分作用域
移动区域为整个网页

fixed 参数特性

可以利用 top right bottom left 进行定位
脱离文档流
为子定位划分作用域
移动区域为整个窗口区

定位中的层级

z-index改变层级
通过顺序插入,越后添加的定位元素层级越大
不同父元素中的子元素的层级各不相干

z-index 属性值

z-index:auto(默认值)
z-index:inherit(继承)
z-index:number(number指具体数值)

z-index 特性

z-index大的元素会覆盖z-index小的元素
可以设置元素的叠加顺序,但依赖定位属性
z-index为auto的元素不参与层级比较
z-index 为负值,元素被普通流中的元素覆盖

定位与边距的异同

position通过定位改变距离
margin、padding通过控制边距改变距离

页面自适应属性

width、min-width、max-width 的使用

 

 

 

 

 

【width 属性】
当元素的 width 设置为 100%时,元素随着页面宽度的变化而变化,不管页面缩
小或放大到什么程度,元素宽度都会全部展示在页面中
demo:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.3">
<title>width=100%</title>
<style type="text/css">
div{
width:100%;
height:200px;
border:5px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【min-width 属性】
设置了 min-width 属性,当页面缩小到这个值时,元素的宽度不能再进行缩小,
比如下面的 demo,当页面的宽度大于 1100px 时,元素会随着页面宽度的放大
而自适应放大;当页面的宽度小于 1100px 时,元素不再进行自适应缩小
demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.3">
<title>width=100%</title>
<style type="text/css">
div{
min-width:1100px;
height:200px;
border:5px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【max-width 属性】
设置了 max-width 属性,当页面放大到这个值时,元素的宽度不能再进行放大,
比如下面的 demo,当页面的宽度小于 1100px 时,元素会随着自使用缩小,但
是当页面的宽度大于 1100px 时,元素便不会再自适应放大,它最宽也就 1100px
demo:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.3">
<title>width=100%</title>
<style type="text/css">
div{
max-width:1100px;
height:200px;
border:5px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

font 属性简写

一、 font 的属性比较多,有:font-style,font-variant,font-weight,font-
size,font-family,我们可以把它们按照顺序统一放在 font 属性中,在
一个声明中设置所有字体属性。
二、 简写 font 属性需要注意以下几点:
按 照 font-style font-variant font-weight font-size/line-
height font-family 顺序来写
先写字体大小在写字体
font-size/line-height 作为一组使用,中间用斜杠区分
多个值之间用空格分开
多个字体之间用逗号分开
三、 通过案例对比简写与分开写
1、  使用 font 分开写

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>font 分开写</title>
<style type="text/css">
div{
font-size:20px;
font-family:"微软雅黑";
font-weight:bold;
font-variant: small-caps;
font-style:italic;
color:orange;
}
</style>
</head>
<body>
<div>CSS 层叠样式表(Cascading Style Sheets)</div>
</body>
</html>

2、  使用 font 简写
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简写 font 属性</title>
<style type="text/css">
div{
font: small-caps italic bold 20px "微软雅黑",serif;
color:orange;
}
</style>
</head>
<body>
<div>CSS 层叠样式表(Cascading Style Sheets)</div>
</body>
</html>

https://www.imooc.com/

发布者

deng

听闻余生久不遇,相逢别错过。

发表评论

电子邮件地址不会被公开。 必填项已用*标注