布局技巧

布局技巧

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

}

 

勤学似春起之苗,不见其增,日有所长; 辍学如磨刀之石,不见其损,日所有亏!
原文地址:https://www.cnblogs.com/qiaozhiming123/p/13129982.html