【CSS】参考手册 学习
程序员文章站
2024-03-24 19:28:46
...
1. CSS 盒子模型(Box Model)
A. 简介
- 所有
HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。 -
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 - 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- 下面的图片说明了盒子模型
Box Model：
B.①. 内外边距设置
为盒子四边设置属性的方向都同下图（如boder）
B.②外边距一般情况下会自动合并
B.③margin负数时
先画出没有margin属性的两个div
代码如下：
<html>
<head>
<style>
.tdiv {
border-style: dotted;
margin:100px auto;
width:250px;
height: 150px;
}
.div {
width: 100px;
height: 100px;
background-color: aqua;
float: left;
}
.fuchsia {
background-color: fuchsia;
}
</style>
</head>
<body>
<div class="tdiv">
<div class="div"></div>
<div class="div fuchsia"></div>
</div>
</body>
</html>
为上面的蓝色块中加入margin属性
-
margin-left
-
margin-right
-
注意：左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似
C. 一些盒子属性设置
**D. 弹性盒子模型Flexible Box**属性配置
2. 背景设置
3. 边框Border和 轮廓Outline
<style>
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>
<b>注意:</b>
如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>
属性设置
4. 定位Positioning 属性
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。**注意: **Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| initial | 设置该属性为默认值，详情查看 CSS initial 关键字。 |
B. 定位属性有哪些？
5. 一些简单的属性
give you color see see ^ ^ （随意放个链接啦）
6. Text
7. 动画
A. @keyframes 规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>
B. 过渡transition
请看demo
C. 2D/3D转换
| 属性 | 说明 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
| transform-style | 3D空间中的指定如何嵌套元素 | 3 |
| perspective | 指定3D元素是如何查看透视图 | 3 |
| perspective-origin | 指定3D元素底部位置 | 3 |
| backface-visibility | 定义一个元素是否应该是可见的，不对着屏幕时 | 3 |
transform属性有哪些值？
8. 其他不常用
9. 用户外观属性
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 定义元素的外观样式 | 3 |
| box-sizing | 允许您为了适应区域以某种方式定义某些元素 | 3 |
| icon | 为元素指定图标 | 3 |
| nav-down | 指定用户按向下键时向下导航的位置 | 3 |
| nav-index | 指定导航（tab）顺序。 | 3 |
| nav-left | 指定用户按向左键时向左导航的位置 | 3 |
| nav-right | 指定用户按向右键时向左导航的位置 | 3 |
| nav-up | 指定用户按向上键时向上导航的位置a | 3 |
| outline-offset | 设置轮廓框架在 border 边缘外的偏移 | 3 |
| resize | 定义元素是否可以改变大小 | 3 |
下一篇： REST参考手册