2018-10-31|2018-10-31 二阶段day3 2018-10-31二阶段day3

1.标准流和浮动

1.标准流标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度；并且可以设置宽度和高度行内标签，一行可以显示多个，默认宽度和高度都是内容的宽度；设置宽高无效行内块标签，一行可以显示多个，默认宽度和高度都是内容的宽高；设置宽高有效块级标签：h1-h6, p, hr, ol\ul\dl\li, table, tr,div 行内标签：a, img, td, input，select，option, textarea, span

2.display属性

1.display(设置标签的性质) block - 将标签设置为块级标签 inline-block - 将标签设置为行内块标签 (注意：一般不会通过将标签转换成行内块来解决问题, 因为行内块标签在现实的时候左右中间会有不能消除的空隙) inline - 将标签设置为行内标签

- 锐客网abc123 123我是段落1 【2018-10-31|2018-10-31 二阶段day3】我是段落2

3.float属性

1.浮动原理: a.浮动会让标签脱离标准流进行布局(脱流) b.没有浮动的标签即占池底的位置，也占水面位置。浮动后只占水面位置2.float属性 left - 左浮动 right - 右浮动3.脱流后的布局规则：不管什么标签，脱流后都是一行可以显示多个，可以设置宽度和高度

- 锐客网p{ background-color: chartreuse; float: left; width: 200px; } a{ background-color: sandybrown; width: 200px; float: left; }div{ width: 200px; }div1div2div3 aaa

4.消除浮动

1.清除浮动清除浮动指的是清除因为浮动而产生的高度塌陷问题2.高度塌陷当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题3.清除浮动的方法： a.添加空的div：在父标签的最后添加一个空的div,并且设置样式clear属性的值为both b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden

- 锐客网/*方案2*/ #div2{ overflow: hidden; }

5.文字效果

- 锐客网文章图片对此，苏宁易购官方事后回应称，公告显示财政部在检查中发现苏宁存在的 “资产转让未同时转递延收益531.89万元、重复申报研发费用加计扣除342.28万元”问题，此问题为财政部在检查时发现的会计事务所执业质量存在的问题，而非所谓的“逃税等问题突出”。而财政部指出的 “资产转让未同时转递延收益531.89万元”是指苏宁的会计师事务所在确认收入时没有同转递延收益，与纳税无关，且事实上苏宁已经就该收入全额、依法、及时地缴纳了税款。关于“重复申报研发费用加计扣除342.28万元”该重复申报问题存在，是会计工作中的失误，其导致苏宁漏缴了以342.28万元为基数计算得出的40万余元的所得税。苏宁方面表示，对于财政部会计信息质量检查公告中提及的问题，苏宁高度重视，已经组织公司内部进行认真核查，对于指出的会计事务所执业质量问题已立即采取整改措施，并将引以为戒。同时，小米方面也回应称，相关报道涉及小米的部分与事实严重不符。财政部此次公告的检查为2017年财政部会计监督检查，是针对2016年的会计信息质量进行的检查。根据财政部公告，小米存在部分费用摊销核算错误、对外赠送商品未作为视同销售行为申报缴税、报销发票管理不规范、费用管理制度不完善等问题。以上问题均已整改完成，并获得财政部认可。部分费用摊销核算问题，主要为房租及部分装修费用摊销的起始时间以及部分共用费用在集团企业间的分摊存在一些偏差，公司已经进行了相关账务调整，不存在偷逃税款的行为。

6.定位

- 锐客网#div1{ width: 600px; height: 400px; background-color: hotpink; } #div2{ width: 400px; height: 300px; background-color: navajowhite; position: relative; /*裁掉自己的子标签超出自己的范围的部分*/ overflow: hidden; } #div3{background-color: green; /*1.absolute*/ /*宽高不确定的应用*/ /*width: auto; height: auto; position: absolute; left: 50px; right: 50px; top: 20px; bottom: 30px; *//*2.relative*/ /*width: 100px; height: 100px; position: relative; top: 50px; *//*3.fixed*/ /*width: 100%; height: 100px; position: fixed; top: 0px; right: 0px; *//*4.sticky*/ /*width: 100%; height: 100px; position: sticky; bottom: 0px; */width: 100px; height: 100px; position: absolute; right: -25px; }

盒子模型

- 锐客网#div1{ /*设置内容部分和padding部分的背景颜色*/ background-color: hotpink; /*1.设置内容的大小*/ width: 100px; height: 100px; /*2.设置padding*/ /*a.分开设置*/ /*padding-left: 50px; padding-top: 20px; padding-right: 20px; padding-bottom: 30px; *//*b.一起设置*/ padding: 20px; /*同时设置四个padding值都为20px*//*3.设置border*/ /* * border值的格式：线的样式颜色宽度 * 线的样式 - solid(实线)\double(双实线)\dashed(点划线)\dotted(虚线) */ /*border-left: solid blue 13px; border-top: solid yellow 10px; border-right: solid yellowgreen 12px; border-bottom: solid sienna 12px; */ /*同时设置*/ /*border: solid lightskyblue 10px; *//*4.设置圆角*/border-radius: 20px; /*分开切每个角的圆角*/ /*border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-top-right-radius: 50px; *//*5.添加margin*/ margin-left: 20px; margin-top: 50px; }姓名: