今日内容概要
- 边框
- 盒子模型
- 浮动
- 定位
- 补充说明
- 简易博客页面搭建
今日内容详细
边框
border-left-widh: 5px;
border-left-style: dotted;
border-left-color: #0000ff;
border-left: 3px solid black;
border: 10px solid orange;
画圆
border-radius: 50%;
display
"""
行内标签是无法设置长度 只有块儿级可以设置
"""
display:none 彻彻底底的隐藏表情(页面上不会显示 也不会保留标签的位置)
visibility: hidden 隐藏的不彻底
盒子模型
我们可以将标签看成是一个盒子(快递盒)
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: 0 auto;
浮动
浮动就是用来做页面布局的
浮动现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档刘的 会造成父标签塌陷
如何解决浮动的影响
clear
解决浮动带来的影响终极方法
先提前写好样式类
.clearfix:after {
content: '';
display: block;
clear: both;
}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
溢出
div {
height:150px;
width:150px;
border:5px solid greenyellow;
border-radius:50%;
overflow:hidden;
}
div img {
max-width:100%;
}
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
.ci {
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
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:400;
background-color:white;
z-index:101;
position:fixed;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
}