5.css企业开发经验，习惯盒模型，层模型

文本对齐方式text-align

    <!-- 文本对齐方式 text-align -->
    <!-- <div>31省区市新增确诊病例96例 本土病例81例;江苏新增38例本土确诊病例 其中扬州36例;东京奥运中国军团的“封神之作”;这场战争越来越惨烈 中美这两天都有动作！;张勇阿里回应"女员工被侵害":震惊气愤羞愧</div> -->
    <!-- 文本对齐方式 text-align -->

/* 文本对齐方式 text-align*/
/* 文本默认正常的展示方式是：左对齐 */
/* 水平的展示方式：默认text-align:left; */
/* right:居右；center:居中显示 */
/* 
div{
    border:1px solid #000;
    text-align:right;
} 
*/
/* 文本对齐方式 text-align */

单行文本所占高度 行高 line-height

    <!-- 单行文本所占高度 行高 line-height -->
    <!-- <div>31省区市新增确诊病例96例 本土病例81例;江苏新增38例本土确诊病例 其中扬州36例;东京奥运中国军团的“封神之作”;这场战争越来越惨烈 中美这两天都有动作！;张勇阿里回应"女员工被侵害":震惊气愤羞愧</div> -->
    <!-- 单行文本所占高度 行高 line-height -->


    <!-- 单行文本利用text-align水平居中；line-height垂直居中 -->
    <!-- <div>31省区市新增确诊病例96例 </div> -->
    <!-- 单行文本利用text-align水平居中；line-height垂直居中 -->

/* 单行文本所占高度 行高 line-height*/
/* 默认的字体的高度是16px；因为font-size用于设置字体高度；未设置，默认是16px */
/* 文字现在呈多行显示，每一行文字所占的高度并不等于文字本身的高度：叫文本的所占高度，即文本的行高：line-height */
/* 若line-height:16px;每一行之间便一点空隙都不留，字挨着字 */
/* 
div{
    border:1px solid #000;
    height:200px;
    line-height:16px;
} 
*/
/* 单行文本所占高度 行高 line-height */


/* 单行文本利用text-align水平居中；line-height垂直居中 */
/* 水平居中：text-align:center; */
/* 文本所占高度，就是单行的文本占的高度，行高； */
/* 若单行文本的所占高度 == 容器的高度；便垂直居中了 */
/* 还有一种就是加padding;line-height = height比较通用 */
/* 
div{
    text-align:center;
    border:1px solid #000;
    height:200px;
    line-height:200px;
} 
*/
/* 单行文本利用text-align水平居中；line-height垂直居中 */

文本首行缩进 text-indent

    <!-- 文本首行缩进 text-indent -->
    <!-- <div>31省区市新增确诊病例96例 本土病例81例;江苏新增38例本土确诊病例 其中扬州36例;东京奥运中国军团的“封神之作”;这场战争越来越惨烈 中美这两天都有动作！;张勇阿里回应"女员工被侵害":震惊气愤羞愧</div> -->
    <!-- 文本首行缩进 text-indent -->

/* 文本首行缩进 text-indent */
/* 文本首行缩进连个字符 */
/* （1）在前面加空格文本 ：不可以，不确定几个；肯定对齐不了；其次空格在每一个操作系统或者在每一个输入法的不同的全角和半角的展示形式都是不一样的；那空格是非常不合理的 */
/* (2)text-indent:首行缩进 */
/* 单位是给一个衡量标准的一个东西，分两种（1）绝对单位；（2）相对单位 */
/* 绝对单位：m cm mm nm um.... */
/* px 一般是对于屏幕来说；一个px只能展示一个颜色；一个屏幕上有很多种颜色，它是由无数个非常小的像素格组成的 */
/* 屏幕清晰与否也是看像素点多不多；屏幕的分辨率就是在说像素； */
/* 屏幕分辨率：每英寸所能容纳的垂直像素点数；即像素点越小，越清晰；像素点越大，分辨率越低 */
/* 所以像素应该是相对单位 */
/* em也是相对单位：1em  = 1 * 该元素/该标签的font-size */
/* 在这里：1em = 1 * 16px = 16px; */
/* 互联网上一些通用字体给我们的方便就是，让字体的高等于字体的宽，所以缩进2em，就是缩进两个字体的高度，而高度=宽度，即缩进两个字体的宽度 */
/* 有一些题目中：文字的行高是1.2倍行高：没有说单位，这里应该是em;line-height:1.2em */
/* 单位em; */
/* 
div{
    text-indent:2em;
} 
*/
/* 文本首行缩进 text-indent */

text-decoration

    <!-- css属性 text-decoration  -->
    <!-- del标签自带text-decoration:line-through  -->
    <!-- 
    <del>原价50元</del>
    <span>原价50元</span> 
    -->

    <!-- css属性 text-decoration -->

    <!-- 利用text-decoration,cursor，仿造a标签 -->
    <!-- 
    <a href="http://www.baidu.com">www.baidu.com</a>
    <span>www.baidu.com</span>
     -->
    <!-- 利用text-decoration,cursor，仿造a标签 -->

/* css属性 text-decoration */
/* text-decoration: text-decoration-line(文本修饰的位置，line-through underline overline ...), text-decoration-color（文本修饰的颜色）, text-decoration-style(文本修饰的样式，solid dotted dashed wavy[波浪线】),text-decoration-thickness（文本修饰线的粗细） */
/* 中划线：line-through;
下划线：underline; 
上划线：overline
none : 这个元素没有线
*/
/* 
span{
    text-decoration:line-through;
} 
*/
/* 设置del没有修饰线 */
/*
del{
    text-decoration:none;
}
*/
/* css属性 text-decoration */



/* 利用text-decoration,cursor，仿造a标签 */
/* 加下划线 */
/* cursor:当鼠标移入时，鼠标的样式 
pointer 小手
help 问号
resize.......好多
*/
/*
span{
    text-decoration:underline;
    color: rgb(85, 26, 139);
    cursor:pointer;
}
*/
/* 利用text-decoration,cursor，仿造a标签 */

伪类选择器

    <!-- 伪类选择器 全权重同标签和属性选择器，为10-->
    <!-- <a href="http://www.baidu.com">www.baidu.com</a> -->
    <!-- 伪类选择器 -->

/* 伪类选择器 */
/* 当鼠标移入该标签领域内，加上css；移走，去掉css */
/*
a:hover{
    background-color: red;
}
*/
/* 伪类选择器 */

标签分类

    <!-- 标签分类   依旧是css的特性 属性display-->
    <!-- 
    1.行级元素  inline 内联
    （1）内容决定元素大小，即内容决定元素所占位置
    （2）不可以通过css改变宽高
    span strong a em del
    2.块级元素  block 
    （1）独占一行
    （2）可以通过css改变宽高
    div p ul li ol form address
    3.行级块元素  inline-block
    （1）内容决定大小
    （2）可以通过css改变宽高
    img
     -->
    <!-- 标签分类 -->

/* 标签分类   依旧是css的特性 属性display */
/* span里面有display:inline;
div里面：display:block;
img里面：display:inline-block; */
/* 我们便可以通过更改display来改变元素的特点 */
/*
span{
    display:inline;
}

div{
    display:block;
}
img{
    display:inline-block;
}
*/
/* 标签分类   依旧是css的特性 属性display */

四张图片排成一排

    <!-- 四张图片排成一排 -->
    <!-- bug:图片之间有空隙 -->
    <!-- 凡是带有inline的（inline-block）的元素，都带有文字特性，文字特性：文字之间将会被被分割 -->
    <!--     
    <img src="test.png" alt="" width="200px">
    <img src="test.png" alt="" width="200px">
    <img src="test.png" alt="" width="200px">
    <img src="test.png" alt="" width="200px"> 
    -->

    <!-- 正常解决办法把空格去了就可以了 -->
    <!-- <img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"> -->
    <!-- 四张图片排成一排 -->

/* 四张图片排成一排 */
/* 有些人通常这么解决,设置左间距为负值，她便会往左陷了 */
/* 但是我们传送给服务器的时候通常会压缩代码，分两个步骤：
（1）系统会将img等这样的一个单词用一个字母来代替-》文件缩小了；
（2）去空格去回车的压缩；文件缩小了，用户从服务器下载的时候更快了； */
/* 即文件传送到服务器，你文件中的一些空格回车就会自动去掉，然而又使用了margin-left往左硬陷，他就过了，不准了 */
/*
img{
    margin-left:-6px;
}
*/
/* 四张图片排成一排 */

先定义功能后选配

    <!-- 企业开发经验，先定义功能，在写结构，即先写css -->
    <!-- 先定义功能，后选配 -->
    <!-- 
    <div class="red size3"></div>
    <div class="green size2"></div>
     -->
    <!-- 企业开发经验，先定义功能，在写结构，即先写css -->

/* 企业开发经验，先定义功能，在写结构，即先写css */
/* 三种颜色，三种尺寸，组合到一起便是很多种 */
/* 这种手法还有一个好处：你定义好的功能，其他人也可以用 */
/* 可以把自己写好的功能封装起来放到文件里去，以便后续开发使用 */
/* 
.red{
    background-color: red;
}
.green{
    background-color: green;
}
.gray{
    background-color: gray;
}
.size1{
    width:100px;
    height:100px;
}
.size2{
    width:200px;
    height:200px;
}
.size3{
    width:300px;
    height:300px;
} */
/* 企业开发经验，先定义功能，在写结构，即先写css */

标签选择器功能：初始化标签

    <!-- 标签选择器最重要的作用：初始化标签 -->
    <!--     
    <em>em字体加红，不斜体</em>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul> -->
    <!-- 标签选择器最重要的作用：初始化标签 -->

/* 标签选择器最重要的作用：初始化标签 */
/* 自定义的功能 自定义标签，让标签出生的时候的样式便是我们设计好的 */
/* 定义好em的初始样式之后，至此之后所有的em标签都是这个样式 即变红 */
/*
em{
    font-style:normal;
    color:#c00;
}*/
/* 其实有很多标签都需要初始化，因为有好多标签所携带的样式，并不是我们想要的 */
/* a标签的下划线去掉，字体颜色改变 */
/*
a{
    text-decoration: none;
    color:#424242;
}*/
/* 将ul的大圆点去掉  去掉自带的间隔*/
/*
ul{
    list-style:none;
    padding:0px;
    margin:0px;
}*/
/* 标签选择器最重要的作用：初始化标签 */

通配符选择器功能：初始化所有标签

/* 通配符选择器 权重是0 */
/* 好处：初始化所有标签，因为权重是0，后续用户想自定义，随便一个选择器就可以更改，没有影响 */
/* 基本所有标签都自带间隔即padding和margin */
/* 使用通配符选择器，初始化所有标签，去掉他们的内边距和外边距 */
/* body有一个天生的margin:8px  */
/*
*{
    padding:0px;
    margin:0px;
}*/
/* 通配符选择器 */

盒子模型

    <!-- 盒子模型 -->
    <!-- 盒子模型是针对于html每一个元素的，每一个元素都符合盒子模型的语法特点 -->
    <!-- 盒子的三大部分：盒子壁（border) 内边距(padding) 盒子内容(width+height) -->
    <!-- 盒子模型 = 盒子的三大部分 + 外边距(margin);即margin + border + padding + content(width + height) -->
    <!-- <div>盒子内容</div> -->
    <!-- 盒子模型 -->

/* 盒子模型 */
/* margin:外边距；border:边框即盒子壁；padding:内边距；content=(width+height)盒子内容 */
/*
div{
    width:100px;
    height:100px;
    background-color: red;
    border:10px solid #000;
    padding:10px;
    margin:100px;
}*/
/* 盒子模型 */

一个盒子在另一个盒子居中

    <!-- 一个盒子在另一个盒子居中 -->
    <!--     
    <div class="wrapper">
        <div class="content"></div>
    </div> 
    -->
    <!-- 一个盒子在另一个盒子居中 -->

/* 一个盒子在另一个盒子居中 */
/* 即让里面的盒子和外面的盒子一样大，里面的而盒子充当外面盒子的内容去，外面盒子四周加padding即可 */
/* padding复合属性：padding:padding-top padding-right padding-bottom padding-left */
/*
padding写一个值代表4个值，即四周padding内边距相同；
写俩个值也同样是代表四个值：第一个值代表上下，第二个值代表左右；
写三个值：第一个值代表top，第二个值代表左右,第三个值代表bottom；三个值的时候固定左右相等，因为作为一个盒子来说，左右等距的情况最多；
四个值：top right bottom left  顺时针

margin，border-width同padding也是复合属性;
*/
/*
.wrapper{
    width:100px;
    height:100px;
    background-color: red;
    padding:50px;
    border:10px solid green;
}
.content{
    width:100px;
    height:100px;
    background-color: #000;
}*/
/* 一个盒子在另一个盒子居中 */

盒模型计算

    <!-- 盒模型的计算问题 -->
    <!-- <div></div> -->
    <!-- 盒模型的计算问题 -->

/* 盒模型的计算问题 */
/* 求盒子可视区的宽高 margin不算盒子；外边距他是盒模型的*/
/*
realWidth = border-width-left + padding-left + width + padding-right + border-width-right;
10px + 20px + 100px +20px +10px = 160px;
realHeight = border-width-top + padding-top + height + padding-bottom + border-width-bottom;
10px + 10px + 100px + 30px + 10px = 160px;
*/
/*
div{
    width:100px;
    height:100px;
    background-color: red;
    border:10px solid #000;
    padding:10px 20px 30px;
    margin:10px 20px;
}*/
/* 盒模型的计算问题 */

远视图

    <!-- 远视图 -->
    <!-- 四层盒子 wrapper>box>content>content1 -->
    <!--     
    <div class="wrapper">
        <div class="box">
            <div class="content">
                <div class="content1"></div>
            </div>
        </div>
    </div> -->
    <!-- 远视图 -->

/* 远视图 */
/* 关键点：每一个块都在他父级的中间;让他的父级和他同宽高，加父级四周padding；padding会用父级的被禁颜色填充 */
/* 即用自身padding包裹内容区 先写最里层；之后会涉及到盒模型的计算问题*/
/*
.content1{
    width:10px;
    height:10px;
    background-color: #fff;
}
.content{
    width:10px;
    height:10px;
    background-color: #0f0;
    padding:10px;
}
*/
/* box的宽和高应该等于content可视区的宽高 */
/* boxwidth = contentwidth + contentpaddingleft +  contentpaddingright = 10 + 20 = 30
boxheight = contentheight + contentpaddingtop +  contentpaddingbottom = 10 + 20 = 30 */
/*
.box{
    width:30px;
    height:30px;
    padding:10px;
    background-color: #fff;
}*/
/* 计算方式同上 就是加了两边的padding*/
/*
.wrapper{
    width:50px;
    height:50px;
    padding:10px;
    background-color: #0f0;
}*/
/* 远视图 */

绝对定位absolute

    <!-- 绝对定位absolute -->
    <!-- <div class="test"></div> -->

    <!-- 绝对定位脱离原来位置进行定位 -->
    <!--     
    <div class="demo"></div>
    <div class="box"></div> -->
    <!-- 绝对定位absolute -->

/* 绝对定位absolute */
/* 定位还要配合top（上边线距上） left（左边线距左）;只和position配合 */
/* right（右边线距右） bottom（下边线距下） */
/*
.test{
    position:absolute;
    left:100px;
    top:100px;

    width:100px;
    height:100px;
    background-color: red;
}*/

 /* 绝对定位脱离原来位置进行定位 */
 /* 下面的box窜上去了 */
 /* 当一个元素成了绝对定位元素的时候，他就脱离了原来的层，跑到上一个层上面去了，所以在原先的层他的那一块就真空了，别人就可以上去了 */
/*
 .demo{
    width:100px;
    height:100px;
    background-color: red;

    position:absolute;
    opacity: 0.5;
}

.box{
    width:150px;
    height:150px;
    background-color: green;;
}
*/
/* 绝对定位absolute */

相对定位relative

    <!-- 相对定位relative -->
    <!--     
    <div class="demo"></div>
    <div class="box"></div> -->

    <!-- 当有其他元素时 -->
    <!--     
    <div class="demo"></div>
    <div class="box"></div> -->
    <!-- 相对定位relative  -->

/* 相对定位relative  */
/*
.demo{
    position:relative;
    top:100px;
    left:100px;
    width:100px;
    height:100px;
    background-color: red;
}*/

/* 当有其他元素时 */
/* 还是分层了，ralative保留原来位置进行定位，也去另一个层面了，但是原来占据的地方不给 */
/*
.demo{
    width:100px;
    height:100px;
    background-color: red;

    position:ralative;

    opacity: 0.5;
}

.box{
    width:150px;
    height:150px;
    background-color: green;;
}*/
/* 相对定位relative  */

定位

    <!-- 定位 -->
    <!--     
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div> -->
    <!-- 定位 -->

/* 定位 */
/* absolute定位相对于最近的有定位的父级进行定位，若没有有定位的父级，则相对于文档进行定位 */
/* relative是相对于自己原来出生的位置进行定位的 */
/* 定位的话要找参照物，没有参照物的话，是不精准，不可控的， */
/* 一般用relative（保留原来位置进行定位，对后续元素无影响）作为参照物，用absolute(可以随意的更换自己的参照物，定位更加灵活）进行定位 */
/*
.wrapper{
    position:relative;

    margin-left:100px;
    width:200px;
    height:200px;
    background-color: orange;
}

.content{
    position:relative;

    width:100px;
    height:100px;
    background-color: #000;
    margin-left:100px;
}
.box{
    position:absolute;
    left:50px;

    width:50px;
    height:50px;
    background-color: yellow;
}*/
/* 定位 */

固定定位fixed(广告定位)

    <!-- position:fixed  -->
    <!-- <div>增强。。。。的药物</div> -->
    <!-- position:fixed -->

/* position:fixed */
/* 和absolute差不多 广告定位*/
/* 无论滚动条，页面怎么动，他都不动 */
/* 固定定位 */
/*
div{
    position:fixed;
    left:0px;
    top:300px;

    width:50px;
    height:200px;
    background-color: red;
    color:#fff;
}
*/
/* position:fixed */

用定位做水平垂直居中

    <!-- 用定位做水平垂直居中 -->
    <!-- <div></div> -->
    <!-- 用定位做水平垂直居中 -->

* 用定位做水平垂直居中 */
/* 运用margin;因为定位使用left top居中的是左顶点；使用margin让中心点居中：正好是容器宽高的一半 */
/* 也可以使用计算函数：left:calc(50% - 50px) */
/*
div{
    width:100px;
    height:100px;
    background-color:red;

    position:absolute;
    left:50%;
    top:50%;

    margin-top:-50px;
    margin-left:-50px;
}*/
/* 用定位做水平垂直居中 */