布局技巧

布局技巧

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;/*转为块元素*/

width:175px;

height:259px;

}

6.div盒子修饰小技巧

div{width: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-width: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;//浮动多个元素排一行、块元素浮动后转为行内块

}