边框
边框属性
border-width（边框宽度）border-style（边框样式）border-color（边框颜色）
border-left-width: 5px;
border-left-style: dotted;
border-left-color: #0000ff;
简写方式:
border-left: 3px solid black;
border: 10px solid orange;
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
除了可以统一设置边框外还可以单独为某一个边框设置样式:
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius
用这个属性能实现圆角边框的效果
将border-radius设置为长或高的一半即可得到一个圆形
画圆
border-radius: 50%;
display属性
行内标签是无法设置长宽，只有块儿级可以设置
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: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
<div style="display:none">222</div>
彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
<div style="visibility: hidden">222</div>
隐藏的不彻底
CSS盒子模型
概念
- margin(外边距):用于控制元素与元素之间的距离；
margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的 - padding(内填充):用于控制内容与边框之间的距离；
- Border(边框):围绕在内边距和内容外的边框
- Content(内容):盒子的内容，显示文本和图像
举例：
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体
content(内容)
2.物体与内部盒子墙的距离
padding(内边距、内填充)
3.快递盒的厚度
border(边框)
4.快递盒之间的距离
margin(外边距)
调整方式
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px; 上下 左右*!*/
/* !*padding: 10px 20px 30px;上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px;上 右 下 左*!*/
margin与padding用法一致
针对标签的嵌套即可以使用margin调整 也可以使用padding调整
内部的标签是外部标签的内容物context。
水平方向可以居中
margin: 0 auto;
https://www.w3school.com.cn/css/css_positioning_floating.asp
浮动
浮动概念简介
浮动就是用来做页面布局的
为什么叫浮动 标签从下面往上浮起来
浏览器不仅仅有水平和垂直两个纬度 还有一个纬度 垂直与你的电脑屏幕
浮动浮动 就是标签漂浮到高处了 可能遮盖住下面的标签
在被嵌套的标签浮动上来时，可能会造成此标签的父标签的塌陷，也就是扁了
请想象父标签由子标签撑起来，子标签浮起来，导致父标签空空如也，所以就塌陷了
浮动的现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷
如何解决浮动的影响
-
在父标签另外起一个标签撑起来（不太行）希望可以 依据浮动标签 动态撑起来
-
clear:left左侧（地面和天空）不允许出现浮动的元素
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after {
content: '';
display: block;
clear: both;
}
谁塌陷了 就给谁添加clearfix样式类就可以了
浏览器会优先展示文本内容(如果被挡住)
div {
height: 150px;
width: 150px;
border: 5px solid greenyellow;
border-radius: 50%;
overflow: hidden; /* 使用overflow属性解决溢出 有多种解决方案 */
}
div img {
max-width: 100%;
}
圆形头像的制作
- 结合
overflow属性和bord-radius可以制作圆形头像。
在div块里嵌套一个图像，设置图像的max-width或者max-height即可
/*avatar*/
.blog-left .blog-avatar{
width: 100px;
height: 100px;
border: 8px outset white;
border-radius: 50%;
margin: 20px auto;
overflow: hidden; /* hidden多出的文本直接隐藏 auto添加滚动条 scroll左右滚动条
}
定位
- 标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
static静态(标签默认的状态 无法定位移动)relative相对定位(基于标签原来的位置)absolute绝对定位(基于某个定位过的父标签做定位)
fixed固定定位(基于浏览器窗口固定不动)
哪些定位可以脱离文档流？
可以脱离:绝对定位 固定定位
不能脱离:相对定位
.c1 {
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2 {
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.c1 {
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
z-index属性
z-index 属性指定一个元素的堆叠顺序
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
实现类似效果:
body {
margin: 0;
}
.cover {
background-color: rgba(127,127,127,0.5);
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 100;
}
.modal {
height: 200px;
width: 400px;
background-color: white;
z-index: 101;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
/* 除了rgba(127,127,127,0.5)可以实现透明的灰色
还可以使用 opacity:0.5 也可以实现