4、CSS属性
1、设置长宽
/*设置长宽*/
<style>
p {
background-color: red;
height: 200px; /*高度*/
width: 200px; /*宽度*/
}
span {/*行内标签无法设置长宽，就算你写了，也不会生效*/
background-color: green;
height: 200px;
width: 400px;
}
</style>
2、样式大小与颜色
<style>
p{
font-family: "Arial Black"; /*更改字体样式(了解性内容)*/
font-size: 24px; /*字体的大小*/
font-weight: bolder /*bolder字体加粗，lighter字体变细，inherit继承父元素的粗细值*/
color: red; /*字体颜色改变，可以直接写颜色的英文*/
color: rgb(128,23,45); /*字体颜色改变，可以通过三基色改变*/
color: rgba(23, 128, 91, 0.9); /*第四个参数是颜色的透明度 范围是0-1*/
}
</style>
/*小技巧：颜色获取可以利用pycharm提供的取色器或者QQ微信截图功能*/
3、文字对齐
<style>
p{
text-align: center; /*文字居中*/
text-align: right; /*文字右对齐*/
text-align: left; /*文字左对齐*/
text-align: justify; /*两端对齐*/
text-indent: 32px /*文字缩进*/
text-decoration: underline; /*下划线*/
text-decoration: overline; /*上划线(在头顶加根线)*/
text-decoration: line-through; /*删除线*/
text-decoration: none; /*无任何样式(常用于给a标签去掉下划线)*/
}
</style>
4、背景图片
<style>
/*纯色图片*/
div {
height: 500px; /*设置高度*/
width: 400px; /*设置宽度*/
background-color: red; /*设置背景色*/
}
/*自定义背景图片*/
div {
height: 500px;
width: 500px;
background-image: url("ycy.png"); /*url里可以填本地图片也可以填网络图片的地址，图片默认平铺 铺满*/
background-repeat: no-repeat; /*不铺满，图片有多大铺多大*/
background-repeat: repeat-x; /*往x轴铺满*/
background-repeat: repeat-y; /*往y轴铺满*/
background-position: 20px 80px; /*第一个参数是离左边距离20px，第二个参数是离上边距离80px*/
background-position: center center; /*居中*/
background-attachment: fixed; /*图片固定效果，具体说不清楚，可以直接去试试*/
}
</style>
5、设置边框
<style>
p {
background-color: red; /*设置背景色*/
border-width:5px; /*设置边框宽度*/
border-style: solid; /*设置边框样式*/
border-color: green; /*设置边框颜色*/
}
/*支持对单独某一个边框的设置*/
div {
border-left-width: 5px; /*设置左边框*/
border-left-color: red;
border-left-style: dotted;
border-right-width: 10px; /*设置右边框*/
border-right-color: greenyellow;
border-right-style: solid;
border-top-width: 10px; /*设置上边框*/
border-top-color: deeppink;
border-top-style: dashed;
border-bottom-width: 10px; /*设置下边框*/
border-bottom-color: tomato;
border-bottom-style: solid;
}
span {
border: 3px solid red; /*设置边框为3px，颜色为红色*/
} /*支持简写*/
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50% /*50%，长宽一样就是圆，不一样就是椭圆*/
} /*可以画圆*/
</style>
6、display属性
/*能够让标签具有自身没有的属性和特征*/
<style>
#d1 {
display: none;
} /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
#d2 {
display: inline;
} /*将标签设置为行内标签的特点*/
#d1 {
display: block;
} /*将标签设置成块级标签的特点*/
#d2 {
display: inline-block;
} /*标签既可以在一行显示又可以设置长宽（同时具有行内和块级标签的特点）*/
</style>
7、盒子模型
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
| 属性 | 功能 |
|---|---|
| margin: | 用于控制标签与标签之间的距离；margin的最基本用途就是控制标签周围空间的间隔，从视觉角度上达到相互隔开的目的。 |
| padding: | 用于控制内容与边框之间的距离； |
| Border(边框): | 围绕在内边距和内容外的边框。 |
| Content(内容): | 盒子的内容，显示文本和图像。 |
<style>
body {
margin: 0; /*上下左右全是0*/
margin: 10px 20px; /*第一个上下 第二个左右*/
margin: 10px 20px 30px; /*第一个上 第二个左右 第三个下*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
}
p {
border: 3px solid red;
padding-left: 10px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 50px;
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px; /*规律和margin一模一样*/
}
</style>
8、浮动
/*浮动的元素,没有块儿级一说,本身多大浮起来之后就只能占多大
只要是设计到页面的布局一般都是用浮动来提前规划好*/
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
9、解决浮动带来的影响
浮动带来的影响会造成父标签塌陷的问题
/*解决浮动带来的影响-推导步骤
1.自己加一个div设置高度,由于没有技术含量，这个方法极为愚蠢，所以我们无需学习，pass掉
2.利用clear属性*/
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
/*3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码*/
.clearfix:after {
content: '';
display: block;
clear:both;
}
/*之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的，到哪都一样，并且名字就叫clearfix*/
10、溢出属性
一般我们在向框框中导入图片时，要是图片大于框框，我们又想让图片显示出主要部分，那么我们就需要用到overflow这个属性，他的属性如下
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
|---|---|
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
/*用overflow: hidden;同时调整位置来设置头像，具体如下*/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圆形的头像示例</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #fcbaba;
}
.d1 {
width: 500px;
height: 500px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
}
.d1>img {
width: 100%; /*占标签100%*/
}
</style>
</head>
<body>
<div class="d1">
<img src="1234.jpg" alt="">
</div>
</body>
</html>
11、定位
(1) 相对定位
/*相对定位(了解)
相对于标签原来的位置做移动relative*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
#d1 {
height: 100px;
width: 100px;
background-color: red;
left: 50px; /*从左往右 如果是负数 方向则相反*/
top: 50px; /*从上往下 如果是负数 方向则相反*/
/*position: static; !*默认是static无法修改位置*!*/
position: relative; /*相对定位*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
(2) 绝对定位
/*绝对定位(常用)相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d2 {
height: 100px;
width: 200px;
background-color: red;
position: relative; /*性质已经变成定位过的了*/
}
#d3 {
height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
</style>
</head>
<body>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
(3) 固定定位
/*固定定位(常用)相对于浏览器窗口固定在某个位置*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d4 {
position: fixed; /*写了fixed之后,定位就是依据浏览器窗口*/
bottom: 10px;
right: 20px;
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: #0066ff"></div>
<div style="height: 500px;background-color: #4dcd17"></div>
<div id="d4">↑顶部</div>
</body>
</html>
12、验证浮动和定位是否脱离文档流(原来的位置是否还保留)
文档流中：
内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
换句话说就是一个块标签在消失了以后，其他标签会不会顶替原来的位置
1.不脱离文档流
相对定位：
2.脱离文档流
1.浮动：浮动有父标签塌陷的副作用，说明浮动会脱离文档流
2.绝对定位
3.固定定位
13、z-index模态框
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
以百度登陆页面为例 其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
.modal {
background-color: white;
height: 200px;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆页面</h1>
<p>username:<input type="text"></p>
<p>password:<input type="text"></p>
<button>点我点我~</button>
</div>
</body>
</html>
14、透明度opacity
/*它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体*/
opacity: 0.5;
浙公网安备 33010602011771号