内部盒子相对于外部盒子居中
正方形盒子
内部元素宽高设置100%继承外部元素的宽高
外部元素设置四周内边距
.box{
width:100px;
height:100px;
padding:30px;
border:1px solid #000;
}
.box .box1{
width:100%;
height:100%;
background-color:orange;
}
box-sizing:border-box
将padding 与border缩进设置的盒子宽高内部
设置为context-box就改回去了
padding
盒子内边距
一个值 上下左右
两个值 1.上下 2.左右
三个值 1.上 2.左右 3.下
四个值 1.上 2.右 3.下 4.左
padding-top
padding-right
padding-bottom
padding-left
margin
盒子相对浏览器居中
.box{
width:100px;
height:100px;
margin:100px auto;
}
浏览器默认的margin 是body的margin 默认是8px
IE8是上下16px 左右8px
IE7是 上下16px 左右11px
position
absolute 绝对定位
重新新建一个层 把自己之前的位置让出来
设置绝对定位之后 可以加以下四个
left 距离左
right 距离右
top 距离上
bottom 距离下
绝对定位:当父级元素没有开启定位时 默认向上找有定位的元素 如果都没有 就相对于html整个文档定位
relative 相对定位
没有新建层 原本的位置还占据
设置相对定位之后 可以加以下四个
left 距离左
right 距离右
top 距离上
bottom 距离下
相对定位 :相对自身定位
一般子绝父相
注意:
1.非定位元素如果在定位元素下方 设置绝对定位后 不会覆盖未定位元素
2.如果定位元素在非定位元素上方 设置绝对定位后 会覆盖未定位元素
但是 此时给未定位元素设置相对定位后 原来未定位的元素会覆盖原来设置绝对定位元素
z-index
元素的层级
越大越在上
两栏设计
html,body{
heigth:100%;
margin:0;
overflow-y:hidden;
}
.left{
position:absolute;
left:0;
top:0;
width:300px;
heigth:100%;
background-color:green;
}
.rigth{
height:100%;
margin-left:300px;
background-color:orange;
}
float
浮动没有新建一个层级
float以后块级元素变成内联块
浮动流:块级元素无法识别浮动流元素的位置
内联 内联快 浮动 溢出隐藏 纯文本都可以识别浮动元素的位置 除了块级元素
清除浮动
方式一 在其后添加一个块级元素 加上clearfix
.clearfix {
clear: both;
}
<div class="box">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
<p class="clearfix"></p>
</div>
方式二
ul,
div::after {
content: '';
clear: both;
display: block;
}
<div class="box">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
</div>
//或者
.clearFix::after {
content: '';
clear: both;
display: block;
}
<div class="box clearFix">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
</div>
方式三
.box {
overflow: hidden;
}
<div class="box">
<div class="inner-box box1"></div>
<div class="inner-box box2"></div>
</div>
伪类伪元素
伪元素 必须要加上content:“”
京东轮播图小圆点
.slider {
position: relative;
width:590px;
height:470px;
}
.slider .indicator {
position: absolute;
left:46px;
bottom:20px;
width:152px;
height:18px;
}
.slider .indicator .indicator-dot {
display: block;
float:left;
position: relative;
width:18px;
height:18px;
box-sizing: border-box;
}
.slider .indicator .indicator-dot.active::before {
content:"";
display: block;
width:18px;
height:18px;
background-color: #fff;
border-radius: 50%;
opacity: .2;
}
.slider .indicator .indicator-dot::after {
content:"";
display: block;
position: absolute;
left:4px;
top:4px;
width:6px;
height:6px;
border:2px solid #fff;
border-radius: 50%;
opacity: .4;
}
.slider .indicator .indicator-dot.active::after {
opacity: 1;
background-color: #fff;
}
<div class="slider">
<div class="indicator">
<i class="indicator-dot active"></i>
<i class="indicator-dot"></i>
<i class="indicator-dot"></i>
<i class="indicator-dot"></i>
<i class="indicator-dot"></i>
<i class="indicator-dot"></i>
<i class="indicator-dot"></i>
<i class="indicator-dot"></i>
</div>
<img src="./img/q.jpg" alt=""></img>
</div>
content
添加小图标时使用
p:before {
content: url(img/icon.png);
margin-right: 5px;
vertical-align: middle;
}
<p>点击发送信息</p>
p:before {
content: attr(data-username);
}
<p data-username="superatc">,欢迎来到本网站</p>
盒子阴影
box-shadow
水平位置(必) 垂直位置(必)模糊距离 阴影的尺寸 阴影的颜色 阴影的种类
阴影尺寸是对偏移量的扩展 当有偏移量的时候 效果相当于 没有偏移量的时候 把阴影尺寸值加到偏移量上 比如下面的box1与box2的效果是一样的
但是当没有偏移量的时候 阴影尺寸会在原基础上向四周扩展
.box1 {
width: 300px;
height: 150px;
background-color: orange;
box-shadow: 10px 10px 5px 5px;
}
.box2 {
width: 300px;
height: 150px;
background-color: orange;
box-shadow: 15px 15px 5px;
.box3 {
width: 300px;
height: 150px;
background-color: orange;
box-shadow: 0 0 10px 10px;
}
inset 阴影效果向内 不加就向外
让上面被遮住 其余三个方向有阴影
body {
margin: 0;
}
.header {
position: relative;
z-index: 1;
width: 100%;
height: 60px;
background-color: yellow;
}
.box {
width: 300px;
height: 200px;
background-color: orange;
margin-left: 200px;
box-shadow: 0 0 10px #666;
}
<div class="header"></div>
<div class="box"></div>
border-radius
纯圆 宽高相同 border-radius设置为50%
半圆角 border-radius设置为height的高度的一半
当盒子中有img图片时 设置圆角会被图片遮住 怎么解决呢
.box {
width: 440px;
height: 248px;
border: 1px solid #000;
border-radius: 20px;
overflow: hidden;
}
img {
width: 100%;
}
<div>
<img src="./img/q.jpg" alt="" />
</div>
background-repeat
设置背景图片是否重复
默认值是repeat重复
no-repeat 不重复
repeat-x x方向重复
repeat-y y方向重复
background-size
设置背景图片的尺寸
第一个值为宽 第二个值为高
contain 无论页面怎么放大缩小 图片是否被挤压 都要将图片完整的显示出来(图片自身的宽高比不变 必须缩放直到完整的放到容器中 不会剪切 容器该留白留白)
cover 不管图片和盒子多大 只要占满整个盒子 多余切除不要(宽高比例不变 铺满整个容器的宽高 多余的被剪切掉)
background-position
图片在盒子中的位置
center center 居中
50% 50% 居中
10px 30px 距离左侧q10px 距离右侧30px
top right 右上
bottom right 右下
…
先是横坐标 再是纵坐标
background-image
设置背景图片
url() 里面存放图片路径
让背景图片在页面缩放的时候 图片不会被挤压变形
background-size:cover
而且让图片在页面中正确的位置显示
background-position:center center
页面很高 滚动条滚动时让背景图片不滚动
background-attachment:fiexd
background
复合写法
顺序
background-color background-image background-repeat background-arrachment background-position/background-size