先定义背景墙类

.box{

background:blue;

display: flex;

justify-content: center; /*flex-start; flex-end; flex-between;*/

}

再统一定义每个块大小

.box div {

     width:  20px;

      height: 20px;

}

分别定义每个块的颜色：

.box1 {

     background: red;

}

.box2 {

     background: orange;

}

.box3{

      background: green;

}

margin:-100px 0 0 -100px;

使用 这句代码让绝对定位的元素精确居中

1、top: 50%; left:50%;

这句是让.box1的左上角位于父容器中心点

2、margin:-100px  0 0 -100px;

将元素向左移动自身宽度的一半（100px),向上移动自身高度的一半（100px),使元素的中心点与父容器的中心点重合。

除了框长宽的设置，还需要考虑文字大小，别溢出框外

定位

绝对定位 position: absolute

相对定位position : relative

固定定位  position: fixed

块元素

<div><p>(<h1>....<h6>)<ol>\<ul>\<dl>,<table>\<address>\<blockquote>\<form>

内联元素

<a>\<span>\<br>\<i>\<em>\<strong>\<label>\<q>\<var>\<cite>\<code>

内联块元素

<img>\<input>

固定定位：

position: fixed; 

定位原点：

bottom:0

right:0

没理解任务，定位是什么意思

原点坐标？

层模型的相对定位，需要先建立关联关系

position: relative;

再进行位移：

left\top\bottom\right

向右移动，要选left

div1{ float:left;}

div2{float:right;}

元素的三种布局模型

1、流动模型 flow

2、浮动模型 float

3、层模型  layer

margin(top,right,bottom, left)

padding(top,right,bottom,left)

border(top,right,bottom,left)

填充后并未居中

需要使用text-align: ceter; 和line-height: 100px; 

#box1 {

    width: 100px;

    height: 100px;

    border: 1px solid red;

    padding: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

}

原来可以缩写，按（左上、右上、右下、左下）顺序

border-radius: 15px 30px 10px 30px;

设置圆角的命令有点长。不太方便。

border-top-right(left)-radius

border-bottom-left(right)-radius

这节课为何不讲清楚把哪个属性的值设为none?

display的值设置为none 

元素的高宽行高顶底边距都可设置

内联块状元素（inline-block）

同时具备内联元素、块状元素的特点，代码 display:inline-block

内联元素: <span>,<a><label>,<strong>,<em>(行内元素）

div{

       display:inline;//将元素设置 为内联元素。

}

内联元素特点：

常用的块状元素

<div>

<p>

<h1>

<h6>

<ol>

<dl>

<table>

<address>

<blockqueote>

<form>

常用的内联元素

<a> <span><br><i><em><strong><label><q><var><cite><code>

内联块状元素

<img><input>

设置文字或者图片居中

text-align: center/left/right.

字母间距： letter-spacing: 50px

单词间距：word-spacing: 20px

缩进  text-indent

2em:   文字的2倍

加大号

font-size

加粗

font-weight

字体样式的缩写:

body{

       font:  XX  XX  XXXX  font-size与line-height中间要加 "/".

}

应该还是就近原则：

内联样式>id选择器>类选择器>标签选择器>通配符选择器

子选择器

.food>li  {

        border: 1px    solid  red;  // 这里没有逗号。

}

类选择器可以并列

.stress{

         color: red;

}

.bigsize {

            font-size:  25px;

}

<p>到了<span  class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课......</p>

ID选择器不可以并列, 不能出现id="stressid  bigsizeid">

#stressid {

            color:red;

}

#bigsizeid{

            font-size:  25px;

}

<p>到了<span  id="stressid   bigsizeid">三年级</span>下学期时，我们班上了一节公开课......</p>

需注意 ID选择符的设置结构：

<div   id="XX">xxxxxxxxxx</div>

你选了哪个ID，就要先定义这个ID,  用#

#XX {  ...}

和类一样，这个内容要放在头部的style里。

如果发现自已在自已认为并不高级的认知里打转，说明自已还没有深入更高级的认知。当你进入一个更高层级的认知，那感觉就像打开了新世界大门。