A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[学习交流] 技术贴

© 花开彼岸时 初级黑马   /  2019-4-20 22:51  /  596 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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水平 垂直 模糊颜色




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马