css文本修饰
p标签
- font-family : “楷体” 字体
- font-size : 20px 字体大小
- font-weight : bold 字体加粗
- color : 文本颜色
- text-align : 文本排列
- text-indent : 3em 首行缩进
- line-height : 2em 行高
a标签
- text-decoration : none 样式
css边框线条
线条样式
-
四边边框 border: 15px solid #B22222
-
单边边框 border-left: 15px dashed #0000FF
-
边框圆角 border-radius : 8px
元素溢出时处理
overflow :
- scroll : 溢出时使用滚动条
- hidden : 溢出时隐藏
- auto : 只有侧边的滚动条
css边框边距
改变块元素的边距并不会影响到块元素的一个实际内容显示
- 四边相同边距 padding : 20px
- 四边不同边距 padding : 10px 20px 30px 40px 顺序上左下右
- 单边设置 margin-top
- 对称变 上下 左右
- 左右外边距值为auto时会水平居中 margin: 20px auto
背景图片
- 位置：头标签style中定位整个body
- 基本结构
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(https://img.58cdn.com.cn/ui6/my/images/reg-bg.png);/* 添加背景图片路径 */
background-repeat: no-repeat ;/* 设置背景图的重复效果
repeat-x 水平方向重复出现
repeat-y 垂直方向重复出现
no-repeat 仅出现一次*/
background-size: 100%;/* 默认填满整个屏幕 */
background-attachment: fixed;/* 设置背景图片固定不动 */
background-position: bottom;/* 调整图片的位置 */
}
</style>
</head>
- 使用padding-top来撑起容器的高度 （容器高度=高/宽*100%）
css的定位属性
1、浮动定位float：
- 浮动定位会脱离文档流
- 浮动定位只能左浮动和右浮动
- 浮动时不能超过父元素的边框
2、相对定位：relative
- 相对上一次的位置进行（X Y）的偏移
- 无论如何偏移相对定位不会释放自己所占的位置，不会脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
border: 3px solid #0000FF;
word-break: break-all;
padding: 30px;
}
#div0{
position: relative; /* 开启相对定位*/
border: 2px solid #C850C0;
width: 100px;
height: 100px;
top: 20px; /* 相对原位置高增加20px,也就是向下平移20px*/
left: 22px;
}
</style>
</head>
<body>
<div id="div1">
我是你的父元素框
<div id="div0">
把我进行相对定位
</div>
</div>
</body>
</html>
3、绝对定位：absolute
- 绝对定位元素位置相对于已经定位的最近的父元素
- 如果要参照最近的父元素，那这个父元素必须开启定位，否则参照上一级
- 开启绝对定位的元素和文档流没有关系，所以他们可能会覆盖其他元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d0{
width: 200px;
height: 100px;
border: black 2px solid;
position: relative;
}
#d1{
width: 200px;
height: 30px;
background-color: #808080;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div id="d0">
最近的开启定位的父元素
<div id="d1">
把我绝对定位
</div>
</div>
</body>
</html>
4、固定定位：fixed
- 坐标原点固定，始终相对于浏览器窗口定位
- 位置固定，拖动滚动条时，固定定位的元素位置仍然不变
元素的层级z-index
- z-indes可以设置元素的层级，值为正数
- 层级越高就优先显示
- 如果层级一样，优先显示靠下的元素
- 祖元素层级再高，也不能覆盖子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrapper {
position: relative;
}
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
width: 300px;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
width: 200px;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 100px;
left: 200px;
top: -25px;
height: 7em;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="dashed-box">Dashed box</div>
<div class="gold-box">Gold box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
元素的显示方式
- 块元素：从上到下排列
- 行内元素：从左到右，不能设宽高(span,a)
- 行内块元素：从左到右，可以设宽高(input,img)
display设置显示方式
- none：不显示该元素，释放其占用位置
- block：将元素设置为块元素
- inline：将元素设置为行内元素
- inline-block：将元素设置为行内块元素