body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

body{
    font-style:italic;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:"宋体",sans-serif;
}

可同时设置几个元素包含的内容的属性

div, p {

        background: pink;

    }

块级元素默认为display:block，无需再加这条语句，内联元素如a，

a{display:block;}

这样既可使a元素具备块级元素特点。

<header>标签代表头部，但是作用等同于div，只是具备语义化

<header> 标签定义页眉,<footer> 标签定义页脚

<header> 标签或<footer> 标签定义文档或者文档的一部分区域的页眉或页脚。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个  <header> 元素和<footer> 元素。

<div>…</div>

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

行内元素（内联元素）水平居中设置

通过给父元素设置 text-align:center 来实现

定宽块状元素水平居中设置

“左右margin”值为“auto”来实现居中

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}

</style>

已知宽高盒子水平垂直居中

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：

3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。

宽高不定盒子水平垂直居中

1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。

2、子元素设置上和左偏移的值都为50%。

3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。

 transform: translate(-50%, -50%);

a:hover{color:red;}表示划过时的伪类选择器。

内联>id>类class>标签>通配*选择器

弹性盒模型

flex属性

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

justify-content属性

本属性定义了项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

center： 居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

space-between：两端对齐，项目之间的间隔都相等。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

align-items属性

本属性定义了项目在交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

center： 交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不设置高度，元素在垂直方向上铺满父容器*/
        width: 200px;
    }

给子元素设置flex占比

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

语法：

<input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

重置按钮的实现

语法：

<input   type="submit"   value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。

2、select标签里面只能放option标签，表示下拉列表的选项。

3、option标签放选项内容，不放置其他标签。

4 value表示向服务器提交的数值 

5、selected="selected"：

设置selected="selected"属性，则该选项就被默认选中。

布局模型

元素有三种布局模型：
1、流动模型（Flow）（默认）

两个特征：

（1）块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。

（2）在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)

让两个块状元素并排显示

div{
    width:200px;
    height:200px;
    border:2px red solid;    float:left;}
<div id="div1"></div>
<div id="div2"></div>

3、层模型（Layer）

定位属性三种形式：

1、绝对定位(position: absolute)

将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

div{
    width:200px;
    height:200px;
    border:2px red solid;    
    position:absolute;
    left:100px;
    top:50px;}
<div id="div1"></div>

2、相对定位(position: relative)

相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

3、固定定位(position: fixed)

固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

绝对定位：脱离文档流，相对于离他最近的具有定位属性的父元素偏移

相对定位：不脱离文档流，相对于它本身原来的位置进行偏移

固定定位：脱离文档流，相对于浏览器窗口进行偏移

relative和absolute组合使用

使得absolute可以相对于其他元素定位

1、参照定位的元素必须是相对定位元素的前辈元素

2、参照定位的元素必须加入position:relative;

#box1{
    width:200px;
    height:200px;    position:relative;        }

3、

定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

#box2{    position:absolute;
    top:20px;
    left:30px;         }

CSS盒模型：

元素分类：在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

元素隐藏：使用none值设置元素时不会被显示。

a{aisplay:block;}       <!--将其他元素转换为块状元素-->
div{display:inline;}     <!--将其他元素转换为内联元素-->
a{display:inline-block;}      <!--将其他元素转换为内联块状元素-->
a{display:none;}              <!--a元素隐藏-->

盒模型：盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

（简单说就是一个盒模型分为：内容、填充、边框、边界四个部分，在css里面直接定义：宽和高，定义的是内容的宽和高）

设置元素背景：background-color

div{background-color:red;}    <!--为块状元素设置-->
a{background-color:green;}    <!--为行内元素设置-->

盒子添加边框：盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{
    border-width:2px;
    border-style:solid; <!--边框常见样式：dashed(虚线)、dotted(点线)、solid(实线)-->
    border-color:#FF0000;
}

一般简写成下面这样：

div{
    border:2px  solid  #FF0000;
}

css 样式中允许只为一个方向的边框设置样式：

div{
    border-top:1px solid red;       <!--为div标签单独设置上边框-->
    border-bottom:1px solid red;     <!--为div标签单独设置下边框-->
    border-left:1px solid red;       <!--为div标签单独设置左边框-->
    border-top:1px solid red;       <!--为div标签单独设置右边框-->
}

设置圆角边框：border-radius

div{
    border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;
}

一般简写：

 div{
     border-radius: 20px 10px 15px 30px;    <!--值顺序为：左上-右上-右下-左下-->
     border-radius:10px;              <!--如果四个圆角都为10px;可以这么写-->
     border-radius:10px 20px;        <!--左上角和右下角圆角为10px，右上角和左下角圆角一样为20px，可以这么写：-->
 }

注意：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形

 div {
        width: 200px;
        height: 200px;
        border: 5px solid red;
        border-radius: 100px;
    }

效果：

盒子设置填充：元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”（使用padding）

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

一般简写：

div{
    padding:20px 10px 15px 30px;  <!--上、右、下、左(顺时针)-->
    padding:10px;           <!--如果上、右、下、左的填充都为10px;可以这么写-->
    padding:10px 20px;      <!--如果上下填充一样为10px，左右一样为20px，可以这么写：-->
}

效果：

设置盒子外边距（边界）：元素与其它元素之间的距离可以使用边界（margin）来设置

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

一般简写：

div{
    margin:20px 10px 15px 30px;    <!--上、右、下、左顺序-->
    margin:10px;                          <!--上右下左的边界都为10px;可以这么写-->
    margin:10px 20px;                 <!--上下边界一样为10px，左右一样为20px，可以这么写-->
}

总结一下：padding和margin的区别，padding在边框里，margin在边框外。

1、type:

   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中