背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height:400px; /*background-color: red; 背景色为红色*/ /*background-color: purple; 背景色为紫色*/ /*background-image: url("yq.png"); 设置背景图片，图片的地址为yq.png*/ /*background-repeat: repeat; 背景图片平铺排满整个网页（默认）*/ /*background-repeat: repeat-x; 背景图片只在水平方向上平铺*/ /*background-repeat: repeat-y; 背景图片只在垂直方向上平铺*/ /*background-repeat: no-repeat; 背景图片不平铺*/ /*background-position: center center; 设置背景图片所在的位置*/ /* 第一个值代表的是距离左边的大小 第二个值代表的是距离上边的大小 */ /*background-position: 50px 100px;*/ border: 1px solid red; /*给div添加一个边框线*/ /* 只要是前缀一样的属性名， 都可以简写, 没有顺序要求*/ background: red url("yq.png") center center no-repeat ; } </style> </head> <body> <div></div> </body> </html>
边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*border-width: 3px;*/ /*border-color: red;*/ /*border-style: solid;*/ /*给块级标签p添加一个边框线宽度为3px，颜色为红色，实线的边框*/ border-left-color: purple; border-left-style: solid; border-left-width: 5px; /*给边框的左侧添加属性，宽度为5px，颜色为紫色，实线的边框*/ border-right-color: red; border-right-style: solid; border-right-width: 5px; /*给边框的右边添加属性，宽度为5px，颜色为红色，实线的边框*/ border-top-color: red; border-top-style: dashed; border-top-width: 3px; /*给边框的上边添加属性，宽度为3px，颜色为红色，矩形虚线的边框*/ border-bottom-color: red; border-bottom-style: dotted; border-bottom-width: 10px; /*给边框的下边添加属性，宽度为10px，颜色为红色，点状虚线的边框*/ /* 简写 */ /* border: 3px solid red;*/ } div { width: 400px; height: 400px; background: red; /*border-radius: 20px;*/ /*border-radius: 200px;*/ border-radius: 80%; /*border-radius用这个属性实现圆角边框的效果，将border-radius设置为长或高的一半即可得到一个圆形， 其值大于50%实现的效果也是一个圆*/ /*border-bottom-left-radius: 50%;*/ /*border-top-right-radius: 50%;*/ } /*给块级标签div添加属性宽度为400px，高度400px，背景色为红色*/ </style> </head> <body> <p>洋哥很帅</p> <div></div> </body> </html>
display属性
用于控制HTML元素的显示效果。
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*#d1 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: red;*/ /* display: inline-block;*/ /*}*/ /*display: inline;可以使用此id名的标签获得行级标签的特点*/ /* #d2 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: green;*/ /* display: inline-block;*/ /*}*/ /*display: inline-block;可以使用此id名的标签同时获得块级标签和行级标签的特点*/ #d1 { width: 100px; height: 100px; background: red; display: block; } #d2 { width: 100px; height: 100px; background: green; /*display: inline-block;*/ display: block; } /*display: block;可以使用此id名的标签获得块级标签的特点*/ /*#d1 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: red;*/ /* !*display: block;*!*/ /* !*display: none;*!*/ /*}*/ /*#d2 {*/ /* width: 100px;*/ /* height: 100px;*/ /* background: green;*/ /* !*display: inline-block;*!*/ /* !*display: block;*!*/ } </style> </head> <body> <!--<div id="d1" style="visibility: hidden"></div>--> <!--<div id="d2"></div>--> <span id="d1">span1</span> <span id="d2">span2</span> </body> </html>
盒子模型
margin外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
推荐使用简写：
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序：上右下左
常见居中：
.mycenter {
margin: 0 auto;
}
margin值不叠加，非常重要，面试可能会问
padding内填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
推荐使用简写：
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { /*margin: 0;*/ /*margin相当于两个标签（元素）之间的距离*/ margin-top: 10px; margin-left: 20px; margin-right: 30px; margin-bottom: 40px; /*一个值代表四个方向*/ /*margin: 10px;*/ /*两个值， 第一个代表上下， 第二个代表左右*/ /*margin: 10px 20px;*/ /*三个值，第一个代表上， 第二个代表左右， 第三个代表下*/ /*margin: 10px 20px 30px;*/ /*上右下左*/ /*margin: 10px 20px 30px 40px;*/ } p { margin: 0; } p { border: 3px solid red; } </style> </head> <body> <p>我是大帅哥</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*margin值不叠加，非常重要，面试可能会问*/ #d1 { width: 100px; height: 100px; background: red; margin-bottom: 30px; } #d2 { width: 100px; height: 100px; background: green; margin-top: 50px; } </style> </head> <body> <div id="d1">div1</div> <div id="d2">div2</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 300px; height: 300px; /*background: red;*/ border: 3px solid red; /*margin-bottom: 30px;*/ } #d2 { width: 50px; height: 50px; background: green; /*margin-top: 50px;*/ /*padding-left: 100px;*/ /* margin-left: 75px;*/ /*让块级元素居中， 而且只能水平居中*/ margin: 0 auto; } </style> </head> <body> <div id="d1"> <div id="d2"></div> </div> </body> </html>
float
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 100px; height: 100px; background: red; /*float: left;*/ float: left; } #d2 { width: 100px; height: 100px; background: green; float: left; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> </body> </html>
clear
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素。
清除浮动
清除浮动的副作用（父标签塌陷问题）
主要有三种方式：
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { border: 3px solid red; } #d2 { width: 100px; height: 100px; background: red; float: left; } #d3 { width: 100px; height: 100px; background: green; float: left; } #d4 { /*height: 100px;*/ /* 清除浮动*/ clear: left; } .clearfix:after { content: ‘‘; display: block; clear: both; } </style> </head> <body> <div id="d1" class="clearfix"> <div id="d2"></div> <div id="d3"></div> <!-- <div id="d4"></div>--> </div> </body> </html>
overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { width: 200px; height: 100px; border: 3px solid red; /*overflow: hidden;*/ overflow: scroll; } </style> </head> <body> <p> 内容会被修剪，并且其余内容是不可见的。内容会被修剪，并且其余内容是不可见的。内容会被修剪，并且其余内容是不可见的。内容会被修剪，并且其余内容是不可见的。内容会被修剪，并且其余内容是不可见的。内容会被修剪，并且其余内容是不可见的。内容会被修剪，并且其余内容是不可见的。 </p> </body> </html>
溢出小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: #eeeeee; } div { width: 120px; height: 120px; border-radius: 50%; border: 3px solid red; margin: 0 auto; overflow: hidden; } #d1 img { width: 100%; } </style> </head> <body> <div id="d1"> <img src="1111.png" alt=""> </div> </body> </html>
定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { width: 100px; height: 100px; background: red; /* 定位, 默认是static，不能改变位置*/ /*相对定位*/ /*position: static;*/ /*改成relative之后，性质已经发生改变了，有原来的不能改变位置，转为可以改变位置，哪怕你不移动位置，性质也发生了改变*/ position: relative; /* 向左移动100px， 向上移动100个px*/ left: 100px; top: 100px; } #d2 { width: 100px; height: 100px; background: red; position: relative; } #d3 { width: 100px; height: 200px; background: green; position: absolute; left: 100px; top: 100px; } #d4 { width: 100px; height: 100px; background: blue; position: fixed; right: 20px; bottom: 20px; /*left: 10%;*/ } </style> </head> <body> <!-- 定位： 1. 静态 2. 相对定位 relative 相对于原来的位置定位 3. 绝对定位 absolute 相对于父标签定位, 如果没有父标签，相对于body 4. 固定定位 fixed 相对于浏览器窗口 --> <!--相对定位--> <!--<div id="d1"></div>--> <!--绝对定位， 相对的父标签要先定位--> <!--<div id="d2">--> <!-- <div id="d3"></div>--> <!--</div>--> <!--固定定位--> <div style="height: 500px;background: red" id="d5"></div> <div style="height: 500px;background: green"></div> <div style="height: 500px;background: orange"></div> <div id="d4"> <a href="#d5" style="color: white">回到顶部</a> </div> </body> </html>
z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: #eeeeee; } #d2 { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 9999; } #d3 { width: 200px; height: 200px; position: fixed; left: 50%; top: 50%; background: white; margin-left: -100px; margin-top: -100px; z-index: 10000; } </style> </head> <body> <div id="d1">我是最里面的内容</div> <div id="d2"></div> <div id="d3"> <p>username: <input type="text"></p> <p>password：<input type="text"></p> <button>登陆</button> </div> </body> </html>
opacity
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { background: rgba(110,120,130,0.2); } #d2 { color: green; opacity: 0.1; } </style> </head> <body> <div id="d1">div111</div> <div id="d2">div222</div> </body> </html>