设置长宽
- 给标签设置长宽, 只有块级标签才能设置,
- 行内标签设置了也没有任何作用, 仅仅只取决于内部文本大小
<style>
div {
200px;
height: 400px;
}
span {
400px;
height: 200px;
}
</style>
<div>div标签长宽</div>
<span>span标签长宽</span>
设置字体属性
- 字体类型
- 字体大小
- 字体粗细
- 字体颜色及透明度
<style>
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: bolder; /*lighter: 变细, bolder: 加粗*/
color: rgba(128, 128, 128, 0.3); /*数字范围0~255, 0.3表示透明度, 数字越小透明度越高*/
/*color: red;*/
}
</style>
<p>设置字体属性!</p>
设置文字属性
- 文字对齐方式
- 文字装饰: 上划线, 下划线, 删除线, none
- 首行缩进
<style>
p {
text-align: center; /*center: 居中对齐, left: 左对齐, right: 右对齐*/
text-decoration: line-through; /*over/underline: 上/下划线, line-through: 删除线*/
text-decoration: none; /*用来去除a标签默认的下划线*/
text-indent: 48px;
}
a {
text-decoration: none;
}
</style>
<a href="https://www.qq.com">点我点我</a>
<p>设置文字属性!</p>
设置背景属性
-
背景颜色
-
- 背景图片默认铺满整个区域
- 通常一个页面上的一个个小图标并不是单独的,
- 而是一张非常大的图片上有网页所需要用到的所有的小图标
- 通过position参数控制div背景图片的位置显示不同的图标样式
- 现在技术更高端, 把图片转换成代码, 根据代码动态解析出图片
<style> div { 400px; height: 400px; background-color: green; background-image: url("背景图片.png"); background-repeat: no-repeat; /*no-repeat: 不平铺, repeat-x: 水平方向平铺*/ background-position: center center; /*第一个参数作用于x轴, 第二个参数作用于y轴*/ /*background: url("背景图片.png") yellow no-repeat center center;*/ } </style> <div>设置背景属性!</div> -
背景图片示例
<style> #d1 { height: 600px; background: url("背景图片.png"); background-attachment: fixed; /*背景图片不会随着页面的滚动而滚动*/ } </style> <div style="height: 400px; background-color: red"></div> <div style="height: 400px; background-color: green"></div> <div id="d1"></div> <div style="height: 400px; background-color: blue"></div>
设置边框
- boder后面写三个参数: 粗细, 颜色, 样式
- 可以单独设置某一边的边框样式,
- 也可以简写成统一的设置
p {
border-top: 3px solid red;
border-left: 2px dotted green;
border-bottom: 4px dashed blue;
/*border: 1px solid aqua;*/
}
<p>设置边框!</p>
-
画圆, 将border-radius设置为长或高的一半
<style> div { border: 1px solid black; background-color: red; height: 400px; 400px; /*border-radius: 200px;*/ /*border-radius: 50%;*/ border-radius: 50px; /*设置圆角度*/ } </style> <div></div>
display属性
-
inline:
- 将块级标签变成行内标签,
- 变成行内标签后不再受width和height参数影响, 仅取决于文本内容大小
.c1 { 50px; height: 50px; background-color: red; border: 1px solid green; display: inline; /*将块级标签变成行内标签*/ } <div class = "c1">display参数中的inline参数值!</div> -
block
- 将行内标签变成块级标签,
- 变成块级标签后独占一行, 并且可以通过width和height参数设置长宽
<style> .c1 { border: 5px solid red; display: block; 400px; height: 400px; } </style> <span class = "c1">display参数中的block参数值!</span> -
inline-block
- 标签既可以设置长宽, 也能够全部在一行显示, 同时具有块级标签和行内标签的特点
<style> .c1 { border: 5px solid red; display: inline-block; 200px; height: 100px; } .c2 { border: 5px solid green; display: inline-block; 100px; height: 200px; } </style> <span class = "c1">display参数中的inline-block参数值!</span> <span class = "c2">display参数中的inline-block参数值!</span> -
display参数中的none参数值和visibility参数中的hidden参数值
- display: none 隐藏标签, 并且标签原来占的位置也没有了
- visibility: hidden 隐藏标签, 但是标签原来的位置还在
<div style="display: none">display参数中的none参数值!</div> <div style="visibility: hidden">visibility参数中的hidden参数值!</div> <div>div标签!</div>
盒子模型---每个标签(元素)都有盒子模型
-
以快递盒为例:
- 两个快递盒之间的距离, 外边距, margin
- 快递盒盒子的厚度, 边框, border
- 快递盒中的物品距离内边框的距离, 内边距/内填充, padding
- 物品的大小, 文本内容大小, content
<style> body { margin: 0; /*只写一个参数, 上下左右全是0*/ } /*去除body与浏览器之间的页边空白*/ .c1 { border: 1px solid red; margin-bottom: 10px; padding-top: 20px; } .c2 { border: 1px solid green; padding: 30px; } .c3 { 50px; height: 50px; border: 1px solid aqua; margin: 0 auto; /*只能左右居中, 不能上下居中*/ } </style> <div class="c1">盒子模型! <div class="c3">div中的div!</div> </div> <div class="c2">盒子模型!</div>
浮动
-
在CSS中任何元素都可以浮动, float
-
浮动的元素是脱离正常文档流的, 原先占据的位置会让出来
-
但是浏览器会优先展示文本内容
<style> .c1 { 100px; height: 100px; background-color: red; float: left; } .c2 { 100px; height: 100px; background-color: green; float: right; } </style> <div class="c1">浮动!</div> <div class="c2">浮动!</div> <div class="c3" style="background-color: pink; 100px; height: 100px">浮动!</div>
浮动带来的负面影响
-
会造成父标签塌陷, 类似于口袋瘪了
<style> .c1 { 100px; height: 100px; background-color: red; float: left; } .c2 { 100px; height: 100px; background-color: green; float: right; } #d1 { border: 10px dotted aqua; } </style> <div id = "d1">div父标签! <div class="c1">浮动!</div> <div class="c2">浮动!</div> </div> -
解决浮动造成父标签塌陷的问题: 哪个父标签塌陷了, 就给它添加clear_fix这个类属性值
<style> .c1 { 100px; height: 100px; background-color: red; float: left; } .c2 { 100px; height: 100px; background-color: green; float: right; } #d1 { border: 10px dotted aqua; } /*公共样式*/ .clear_fix:after { content: ''; clear: both; /*左右两边都不能有浮动元素*/ display: block; } </style> <div id="d1" class="clear_fix">div父标签! <div class="c1">浮动!</div> <div class="c2">浮动!</div> </div>
溢出属性
<style>
div {
height: 50px;
50px;
border: 3px dashed green;
overflow: hidden; /*溢出的内容直接隐藏*/
/*overflow: scroll;*/
/*overflow: auto;*/
}
</style>
<div>溢出属性!溢出属性!</div>
圆形头像示例
<style>
div {
height: 200px;
200px;
border: 5px dashed green;
border-radius: 50%;
overflow: hidden;
}
img {
100%;
}
</style>
<div>
<img src="圆形头像示例.jpg" alt="女生刘亦菲不见了">
</div>
定位
所有的标签默认都是静态的, 无法改变位置, position: static, 要想定位必须先将静态状态修改成定位状态
-
相对定位(了解): relative, 相对于标签原来的位置移动
<style> .c1 { 100px; height: 100px; background-color: gold; position: relative; left: 100px; top: 100px; } </style> <div class="c1"></div> -
绝对定位(小米的购物车), absolute, 相对于已经定位过的父标签(只要不是static), 再做定位
<style> .c1 { 50px; height: 50px; background-color: gold; position: absolute; top: 100px; left: 100px; } #d1 { 100px; height: 100px; background-color: blue; position: relative; /*将d1从一个不是定位的标签变成已经定位的标签*/ } </style> <div id="d1">绝对定位中的父标签! <div class="c1"></div> </div> -
固定定位(回到顶部), fixed, 相对于浏览器窗口, 固定在某个位置不动
<style> #d1 { 80px; height: 20px; position: fixed; bottom: 30px; right: 50px; border: aqua 5px solid; } </style> <div style = "height: 500px; background-color: red"></div> <div style = "height: 500px; background-color: green"></div> <div style = "height: 500px; background-color: blue"></div> <div id = "d1">固定定位!</div> -
位置的变化是否脱离文档流
- 不脱离文档流: 相对定位
- 脱离文档流: 浮动的元素, 绝对定位, 固定定位
z-index控制z轴
<style>
#d1 {
200px;
height: 200px;
background-color: green;
position: fixed;
top: 50%;
left: 50%;
margin: -100px -100px;
}
#d2 {
100%;
height: 1000px;
background-color: aqua;
}
</style>
<div id = "d1">z-index上层页面</div>
<div id = "d2">z-index下层页面</div>
透明度
<style>
#d1 {
background-color: rgba(220, 80, 70, 0.3); /*调节背景色透明度*/
}
#d2 {
background-color: aqua;
opacity: 0.3; /*调节全标签透明度*/
}
</style>
<div id="d1">背景色透明度</div>
<div id="d2">全标签透明度</div>