2017_7_14 float、盒子、第一次做静态网页心得

浮动、盒模型

1浮动

1.标准流中，默认从左往右，从上到下布局；

2.float:left/right/none;(不浮动)

3.浮动的元素将脱离标准流；

4.浮动后的元素相当于行内块级元素

5.浮动的元素虽然脱离了标准流，但没有脱离文本流。所以在布局中，我们可以将文本环绕图片，这是因为text与img都是文本流，虽然两者的盒子重叠，但是文本流不重叠。

 

多个盒模型浮动时，盒子的摆放是找上一个元素盒子最低高度开始摆放。

 

2盒模型

2.1盒模型

对于父元素的第一个子元素，最好不要用margin-top

 

Margin:0 auto;居中

 

Width/height指的是content内容的宽高

Padding内填充，指边框与内容之间的间距

Border指边框

Margin外边距

 

Content的width/height+padding+border+margin就是一个盒模型的宽度

 

2.2padding

 

padding:10px 20px 30px 40px；上右下左（顺时针）

 

Padding:10px 20px 30px;存在三个值时，还是默认上右下左，此时左默认找右的值20px；存在两个值时同理。

 

padding-left/right/top/bottom

 

注意点：1.padding不能为负值；

   2.背景色与背景图会覆盖padding+content；

3.padding改变，盒子大小也会改变，想保证盒子不变，需从元素的宽或高上减掉。

 

margin

注意点：1.margin区域没有背景；

2.margin可以为负值。

 

 

 

网页制作时心得

1.display:block;可以将行内元素变为块元素；

2.制作a标签的列表时，列表项的宽高不能给li dl dt，一定要加给a标签；

3.列表链接，如果只给li加，则只有点到文字时才能跳转，如果把a标签变成块元素，则点击块的范围都可以跳转；

4.文字在盒子中垂直居中，可直接将该文本的line-height设置为盒子的height；

5.快捷键，直接创建3个被li包裹的a标签  li*3>a[href=”#”]{a标签包裹的内容}，再ctrl+e；

6.插入img时默认img有变线，所以需要用盒子包裹img，再将盒子的宽高设置的img的像素大小，则可以将变线去掉；

7.文本、图片居中都可用text-align:center;