1.定位
将某个单位定位到一个点
1.1边偏移(定位=定位模式+边偏移)
top:80px 顶部偏移
bottom:80px 底部偏移
left:80px 左偏移
right:80px 右偏移
1.2定位模式 (重点:常用后三个)(子绝父相)
position:static 静态定位(不用)
position:relative 相对定位
position:absolute 绝对定位
position:fixed 固定定位
相对定位特点:对照自己原来的位置进行偏移
不会自己去定位,一般配合绝对定位去使用.
绝对定位特点:如果父级没有定位,
子级盒子就会以浏览器为参照物定位
固定定位特点:(fixed)-重点
position:fixed
以浏览器为定位置固定盒子,父级盒子无法束缚.
1.3盒子绝对定位居中 原理
.GGG {
width: 400px;
height: 450px;
border: 2px #ccc solid;
left: 50%; 左右偏移
margin-top: -200px ;
top: 50%; 上下偏移
margin-left: -225px;
background: pink;
}
1.4 z-index 堆叠顺序 定位元素
z-index:1 数值越大盒子越靠上
只有 3定位属性其中一个才能使用,
可取正值或者负值,默认值为0, 取值不需要带单位.
1.5定位改变display 属性
绝对定位和固定定位会将盒子转换为行内块元素
1.6圆角矩形
border-top-left-radius:20px; 左上
border-top-right-radius:20px; 右上
border-bottom-right-radius:20px; 右下
border-bottom-left-radius:20px; 左下
如果4个角数值相同: border-radius:15px;
border-radius: 左上角 右上角 右下角 左下角
1.盒子模型
border 边框
padding 内边距
margin 外边距
内容 实体化宽高
1.2边框样式(强制记忆)
border-width:1px; 边框宽度显示
border-style:solid; 实线条 样式
border:dashed; 虚线
border:dotted; 点线
border-color:颜色; 边框颜色
/*边框综合写法,工作常用写法*/
border:粗细 样式 颜色;
1.3 四个边框方向(强制记忆)
border:-top: 上边框
border-bottom: 下边框
border-left: 左边框
border-right: 右边框
border:none 没有边框/隐藏
1.4设置细线表格(记忆)
cellspacing="0" 边框距离粗细
border-collaps:collaps; 合并相邻边框线
1.5内边距
padding:top 上内边距
padding:bottom 下内边距
padding:right 左内边距
,.padding:left 右内边距
1.7外边距 margin
margi:top 同上内边距↑
1.8盒子居中对齐
条件1:盒子必须要设置宽度,显示模式尽量块元素
条件2:设置左右外边距为:auto
margin-left:auto; 居中方法1
margin:auto; 居中方法2
margin:0 auto; 推荐使用
居中方法3,前面0不一定固定,表示margin-top和margin-botton,
可以根据需要调节
1.9文本居中和盒子居中区别
margin-0 auto; 盒子居中 让块元素居中
text-align:center 盒子里文本居中和行内或者行内块元素居中显示
1.10
overflow:hidden 父级盒子不跟着移动
1.11网页布局稳定性
1.12 圆角边框
border-radius:50% 圆形
border-radius: 胶囊形状高度一般px
1.13盒子阴影 box-shadow
6个属性值 水平阴影-垂直-模糊-大小-颜色-内/外阴影
常用:box-shadow水平 垂直 模糊颜色
|
|
收藏
淘帖
踩
