border

1
2
3
4
border-width:定义边框粗细
border-style：边框样式  dashed(虚线边框) dotted(点线边框) solid(实线边框)
border-color：边框颜色
border-collapse:合并相邻的边框

清楚内外边距

1
2
3
4
*{
margin:0
padding:0
}

padding（内边距）:

1个值：上下左右
2：上下，左右
3：上，左右，下
4：上，左，右，下

防塌陷

1
overflower.hidden

圆角边框

1
2
3
4
border-radius:length
border-radius：左上+右下；右上+左下；
border-radius：左上：右上+左下：右下；
border-radius:左上；右上；右下；左下

盒子阴影

1
box-shadow：h-shadow(水平阴影，可取负)；v-shadow（垂直阴影，可取负）；blur(模糊距离)；spread(阴影尺寸)；color；inset(将外部阴影该为内部阴影)

行内块转换

1
display

网页布局第一准则

多个块级元素纵向排列找标准流，对各块级元素横向排列找浮动

浮动

1
float:

浮动特性

1.设置了浮动（float）的元素最重要特性

（1）.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称托脱标）

（2）.浮动的盒子不再保留原先的位置

2.如果多个盒子都设置了浮动，则它们会按照属性值-行内显示并且顶端对齐排列

3.浮动元素会具有行内块元素特性

​ 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

​ 如果块级元素盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

​ 浮动的盒子中间是没有空隙的，是紧挨在一起的

​ 行内元素同理

浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

clear

清除浮动方法

1.父级添加overflow属性

2.父级添加after伪元素

3.父级添加双伪元素

清除浮动–额外标签法

​ 在最后一个浮动的子元素后面添加一个额外标签，添加清除浮动样式

清除浮动–父级添加overflow

​ overflow：hidden

清除浮动–after伪元素法

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:after {
           content: "";
           display: block;
           height: 0;
           clear: both;
           visibility: hidden;
       }

       .clearfix {
           /*IE6、7专有*/
           *zoom: 1;
       }

清除浮动–双伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
.clearfix::before,
      .clearfix::after {
          content: "";
          display: table;
      }

      .clearfix::after {
          clear: both;
      }

      .clearfix {
          *zoom: 1;
      }

图片格式

jpg()产品类的图片、gif（小动画）、png（背景透明的图片）、psd（设计稿文件）

定位=定位模式+边偏移

绝对定位：

1.如果没有祖先元素或祖先元素没定位，则以浏览器为准定位（Document文档）

2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置

3.绝对定位不在占有原先的盒子(脱标)

子绝父相

固定定位不占有原先的位置，可跟版心定位

粘性定位，占有原先位置

行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度

块级元素添加绝对或者固定定位，如果不给高度和宽度，默认大小是内容的大小

脱标的盒子不会出发外边距塌陷

浮动元素不会压住下面的标准流的文字（图片）。绝对定位或固定定位会

1
2
3
4
display:none 隐藏元素,不保留位置

display:block 显示元素，转换为块级元素

1
2
3
visbility:visible 元素可视

visibility:hidden 元素隐藏，保留位置

overflow(溢出)

overflow:visible

overflow:hidden(溢出的隐藏)

overflow:scroll(溢出的部分显示滚动条，不溢出也显示)

overflow:auto(溢出时显示滚动条，不溢出，不显示)