html##### 标签 <https://developer.mozilla.org/en-US/docs/Web/H

行内元素块级元素

块元素独占一行，默认宽是父元素的宽，高由内容撑开

行元素不独占一行，默认宽高是由内容撑开。不能设宽高，margin左右有效，padding上下左右都有效，但是上下的padding不会对其他元素造成影响。可以通过line-height调整

捕获-16576814129631.PNG 块元素可以设宽高和内外边距。

行元素不能设宽高。可以通过line-height调整

捕获-16576817718222.PNG

块元素margin padding都有效

行元素margin无论对自身还是周围元素都是上下无效左右有效，上下padding对自身有效但不影响周围元素，左右padding对自身有效且影响其他元素

捕获-16576825464213.PNG 总结：

块元素：独占一行，默认宽是父元素的宽，高默认由内容撑开。可以设宽高和内外边距。

行元素：不独占一行，默认宽高是由内容撑开。不能设宽高，margin左右有效，padding上下左右都有效，但是上下的padding不会对其他元素造成影响。可以通过line-height调整

盒模型

简单的说就是一个盒子，盒子里可以放内容，内容与盒子之间是内边距padding，盒子与盒子之间是外边距margin

捕获-16576835001984.PNG

如下三张图所示，默认盒子的width是内容的宽box-sizinng:content-box，当给盒子添加padding border后盒子宽变大了，这样会影响周围的元素，解决这一现象，将box-sizinng设为border-box，使盒子的width包含padding+border+content。margin只是影响盒子总体占位不包含在width中

行块互转

用display改变元素显示方式，但不会改变元素种类

display: inline 块级元素并排展示，宽高无效。实际开发中用float比较多

display:block 行内元素独占一行，可以设置宽高内外边距

display:inline-block行元素转行内块元素，设置宽高的同时不独占一行。

选择器

html文件中只是写一些标签然后按照从上到下从左到右展示，那么这些标签的宽高背景色怎么设置呢？

通过选择器选中标签元素并设置相关属性，

详情见developer.mozilla.org/en-US/docs/…

www.w3school.com.cn/css/index.a…

选择器优先级

!important 内联1000 id100 类伪类10 标签1 通配0

引入样式表3种方式

<div style="background-color: red;">最常用的div</div>

<style>
 div {
 width: 300px;
 height: 300px;
 background-color: red;
 display: inline;
}
 </style>

<link rel="stylesheet" href="./css/index.css">

实际需求

float/清除浮动

需求：块元素并排展示比如列表li元素；某元素快速靠左靠右

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }

BFC

伪类

定义元素的特殊状态www.w3school.com.cn/css/css_pse…

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

伪元素

在该元素之前或之后加元素，但实际不存在

www.w3school.com.cn/css/css_pse…

flex

position

水平居中

行内元素

父元素是块级元素，父元素上设text-align: center;

块级元素

父元素是块级元素，子元素设 margin: 0 auto;

垂直居中

行内元素

height：30px;
line-height:30px;

块级元素

水平垂直居中

精灵图

介绍：多张小图合成大图，合成后的大图称为精灵图。减少服务器发送次数，减轻服务器压力，提高页面加载速度。

步骤：

创建一个盒子，用span, b, i标签，display: inline-block;

通过PxCook量取小图片大小，将小图片的宽高设置给盒子

将精灵图设置为盒子的背景图片

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

 span {
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
            background-image: url(./images/taobao.png);
            /* 背景图位置属性: 改变背景图的位置 background-position */
            /* 水平方向位置  垂直方向的位置 */
            /* 想要向左侧移动图片, 位置取负数;  */
            background-position: -3px 0;
        }

还原设计图思路

从外到内、从上到下、从左到右

盒子模型>浮动/display>文字样式

清除默认样式

各个标签有默认的margin padding

a标签下划线，li标签圆点，q

* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}
a {
    text-decoration: none;
}

公共类：清除浮动/确定版心

版心一般为banner图

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }

/* 版心 */
.wrapper {
    width: 1200px;
    margin: 0 auto;
}

没得选再用定位，定位用于调整细节

一般header footer有固定高度。其他中间没有固定高度就不写由内容撑开

中间盒子横向排列一般用float:left

浮动后记得清除浮动避免影响后面元素：overflow:hidden

设置margin时候要考虑总宽，总宽要把margin减去

巧用后代选择器，伪元素选择器 :nth-child(n)

背景颜色和高度作为辅助，后续要删除

html

标签

行内元素 块级元素

盒模型