布局技巧
1.只要是块元素想到宽高
2.div默认的宽100%,高度为零。(块元素都这样)
3.盒子中有文字,想到文字的水平(text-align)、垂直(line-height)的位置
4.看到a标签就想到下划线、颜色、修改颜色去除下划线
5.a链接修饰小技巧
让一个行内行内块元素在元素中居中:给大的块元素加上text-align:center;
(1)伪类a:hover{
background:#eee;鼠标放上去背景色变为#eee;
color:orange;鼠标放上去字体变色
}
(2)a{
text-align:center;整体居中
text-decoration:none;取消下划线
display:inline-block;/*转为块元素*/
175px;
height:259px;
}
6.div盒子修饰小技巧
div{200px;
height:200px
padding-top:30px;内填充填充了30px的空白,要在div减去30px=200-30=170px,否则会变形
padding:50px;上下左右
padding:50px 50xp;第一个值代表上下 、第二个值代表左右
padding:50px 50xp 50px;上 左右 下
padding:50px 50xp 50px 40px;上 ,右,下,左。顺时针
margin-left:59px;
margin-top:20px;
margin-right:50px;
margin-bottom:50px;(和padding用法相同)
margin:0 auto;盒子居中·
padding:0px;margin:0px;清除块元素间距、h1、body
}
7.边框
粗细、颜色、样式。
div{
边框类型
border-style:dashed;虚线
边框颜色
boder-color:#00f;
边框宽度
boder-10px;
三元素连写
boder:10px #000 solid;
boder-top:10px #000 solid;上、left、right、bottom
圆角boder-radius可设八个值
boder-radius:20px;
boder-radius:10px 20px 30px 40px;顺时针左上开始
boder:no;
}
8.盒子模型bug
1.两个盒子小盒子、大盒子上外边距margin-top合并。
解决:a、padding。b、
9.元素隐藏
display:none;元素隐藏不占空间
display:block;元素一块元素显示
visibility:hidden;隐藏占空间
visibility:visible;显示
10.遇到列表ul{
list-style:none;
padding:0;margin:0;
}
li{
float:left;//浮动多个元素排一行、块元素浮动后转为行内块
}