黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 花开彼岸时 时间: 2019-4-20 22:51
标题: 技术贴
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水平垂直模糊颜色

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2