标签：定位 浏览器 标签 100px 边框 margin CSS 属性
1.边框属性
| 边框 |
描述 |
| none |
无边框 |
| dotted |
点状虚线边框 |
| dashed |
矩形虚线边框 |
| solid |
实线边框 |
1.黑色点状虚线边框
border: 4px dotted black;
2.黑色矩形虚线边框
border: 4px dashed black;
3.黑色实线边框
border: 4px solid black;
4.圆形边框（长宽必须px一致）
height:400px; 高
width:400px; 宽
border: 5px solid black; 黑色实线边框
boder-radius= 50%; 表示边框趋于圆的幅度
2.display隐藏属性
<input type="text" style="display: none">
可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
常用于钓鱼网站
3.盒子模型
| 把标签比作盒子 |
解释 |
属性 |
| 两个盒子之间的距离 |
标签之间的距离 |
外边距(margin) |
| 盒子内物体距离盒子内壁 |
内部文本与边框的距离 |
内边距(padding) |
| 盒子的厚度 |
标签的边框 |
边框(border) |
| 物体自身的大小 |
标签内部的内容 |
内容(content) |
需要掌握的操作
margin-top: 20px; 和上边标签距离20px
margin-bottom: 100px; 和下边标签距离100px
margin-left: 100px; 和左边标签距离100px
margin-right: 100px; 和右边标签距离100px
#body标签自带8px的外边距
简写：
margin:0; 外边距上下左右都为0
margin: 10px 20px; 上下10 左右20
margin: 10px 20px 30px; 上10 左右20 下30
margin: 10px 20px 30px 40px; 上10 右20 下30 左40
margin还可以让内部标签居中展示
margin:0 auto 上下0,左右居中
margin:100px auto 上100px 左右居中
padding使用方式与margin一致
4.浮动布局
float:left\right 浮动朝左\右
页面布局必不可少的操作
#浮动会造成父标签塌陷
解决浮动造成的父标签塌陷：
1.提前写一个clearfix样式
.clearfix:after {
content: '';
display: block;
clear: both;
}
2.遇到标签塌陷就给标签最后加clearfix类值即可
<div class="c3 clearfix"></div>
"""浏览器针对文本是优先展示(浮动的元素如果遮挡会想办法展示)"""
5.overflow溢出属性
| 值 |
作用 |
| visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden |
内容会被修剪，并且其余内容是不可见的。 |
| scroll |
如果内容被修剪，则浏览器会显示上下左右滚动条以便查看其余的内容。 |
| auto |
如果内容被修剪，则浏览器会显示上下滚动条以便查看其余的内容。 |
| inherit |
规定应该从父元素继承 overflow 属性的值。 |
1.制作圆形边框头像
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 200px; /*标签高宽200px*/
width: 200px;
border: 5px solid red; /*5px 线性 红色边框*/
border-radius: 50%; /*边框变成圆形*/
overflow: hidden; /*溢出属性—超出范围不显示*/
}
div img{
max-width:100%; /*与上面溢出固定搭配：无论边框多大,图片都是百分百显示*/
}
</style>
</head>
<body>
<div>
<img src="图片地址" alt="">
</div>
</body>
6.定位属性
static(静态)
所有的标签'默认都不能直接用left、top等值修改位置' 必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 100px;
width: 100px;
position: relative; /*相对定位:相对于标签原位置做定位*/
left: 100px; /*距离左边标签100px*/
}
#d2{
background-color: blue;
height: 200px;
width: 500px;
position: absolute; /*绝对定位:基于已经定位过的父标签做定位*/
left: 100px; /*距离左边标签100px*/
top: 100px; /*距离上边标签100px*/
}
#d3{
height: 100px;
width: 100px;
border: 5px solid red; /*给标签加边框5px 线性 红色*/
position: fixed; /*固定定位:相对于浏览器窗口做定位*/
right: 100px; /*距离右边标签100px(由于是固定定位,所以是距离浏览器右侧)*/
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<div id="d3"></div>
</body>
/*绝对定位中 不管d1移动到什么位置,d2永远跟着d1一起移动*/
/*固定定位中 不管浏览器拉多宽,d3永远随着浏览器的宽度改变距离右侧100px位置*/
7.z-index 层叠顺序
浏览器界面其实是一个三维坐标系 z轴指向用户
z-index其实就是设置对象的层叠顺序
浮动最顶层的一般称为模态框
z-index: 99; #0以上都可以
1.制作浮动样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover{
background-color: rgba(127,127,127,0.6);
position: fixed; /*固定定位*/
left: 0; /*距离浏览器上下左右都是0*/
right: 0;
top: 0;
bottom: 0;
z-index: 99; /*层叠顺序为99*/
}
.modal{
height: 200px;
width: 500px;
background-color: white;
position: fixed; /*固定定位*/
z-index: 999;
left: 50%; /*距离浏览器左边50%*/
top: 50%; /*距离浏览器上边50%**/
margin-left: -250px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>最下面</div>
<div class="cover"></div> /*中间层一般用cover*/
<div class="modal"> /*浮动的一般用modal模态框*/
<form action="">
<p>name:<input type="text"></p>
<p>pwd:<input type="text"></p>
</form>
</div>
</body>
8.opacity 透明效果
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
用于三层界面的样式
标签：定位,
浏览器,
标签,
100px,
边框,
margin,
CSS,
属性
From： https://www.cnblogs.com/lvqingmei/p/16945827.html