css基础操作2
今日内容总结
边框
/*border-left-width: 边框大小(px);*/
/*border-left-style: 边框格式;*/
/*border-left-color: 颜色选择*/
简写:
border-left: 边框大小 边框格式 颜色选择;
此时的left针对的是左边的边框 也可以自定义上下和右边的边框
border: 10px solid orange; /*针对全部的边框*/
画图
border-radius: 50%;
边框的样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
display
'''
行内标签是无法设置长款 只有块儿级可以设置
'''
display: none 隐藏标签(页面上不会显示 也不会保留标签的位置)
visiblity: hidden 隐藏值 但是原来值的位置会处于一个空白的状态
盒子模型
margin: 用于控制元素与元素之间的距离; margin的最基本用途就是控制元素周围空间的间隔 从视觉角度上达到相互隔开的目的
podding: 用于控制内容与边框之间的距离
Border: 围绕在内边距和内容外的边框
Content: 中间的内容 显示文本和图像
盒子模型边距的调整与移动
padding: 20px; >>>>> 上下左右
padding: 20px 40px; >>>>> 上下 左右
padding: 10px 20px 30px; >>>>> 上 左右 下
padding: 10px 20px 30px 40px; >>>>> 上 右 下 左(顺时针)
/*margin与padding用法一致*/
可以使用margin做到水平方向居中的操作(常见也可以使用其他来完成)
margin: 0 auto;
浮动
浮动就是用来做页面布局的
浮动元素会生成一个块儿级框 而不论它自身是什么元素
#关于浮点的两大特点
1.浮点的框可以向左或向右移动 直到它的外边缘碰到包含框或另一个浮动框的边框为止
2.由于浮动框不在文档的普通流中 所以文档的普通流中的块框表现得就像浮动框不存在一样
浮动得三种取值
- left 向左取值
- right 向右取值
- none 默认值 不浮动
浮动带来的影响以及解决方法
#影响
浮动的元素是脱离正常文档交流的 会造成父标签塌陷
解决浮动所带来的影响的核心 >>>> #clear
#解决方法
先提前写好样式类
.clearfix:after{
content:'';
display: block;
clear: both;}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
clear属性
clear属性规定元素的哪一测不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧不允许浮动元素 |
| none | 默认值 允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承clear属性的值 |
注意:clear属性只会对自身起作用 而不会影响其他元素
溢出
溢出现象:
当一个元素固定为某一个固定大小 的那内容在元素中放不下
溢出解决(overflow)
| 值 | 描述 |
|---|---|
| visible | 默认值 内容不会被修剪 会在元素框之外(溢出的原因) |
| hidden | 内容会被修剪 并且其余内容是不可见的 |
| soroll | 内容会被修剪 但是可以使用滚动条来查看修剪的内容 |
| auto | 如果内容被修剪 可以使用滚筒条来查看修剪的内容 |
| inherit | 规定应该从父元素继承overflow属性的值 |
- overflow (水平和垂直均设置)
- overfiow-x (设置水平方向)
- overflow-y (设置垂直方向)
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签定位)
4.fixed固定定位(基于浏览器窗口固定不动)
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.c1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.c2 {
height: 50px;
width: 50px;
background-color: #ff6700;
float: right;
margin-right: 400px;
position: relative;
}
.c3 {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
<div class="c3"></div>
</div>
</body>
</html>
z-index
#基于z轴上的一个参数
x、y轴对应的是横纵轴 对应的是平面之间的关系
而z轴对应的是空间中的关系(高)
'''
不同的z-index 对应的高度不同 高参数的z-index会遮挡低参数的z-index
'''
浙公网安备 33010602011771号