day3-课后总结

CSS属性

1.标准流和浮动

标准流布局：在标准流中。块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度，并且可以设置宽度和高度
行内标签，一行可以显示多个，默认宽度和高度都是内容的宽高；设置宽高无效
行内块标签，一行可以显示多个，默认宽度和高度都是内容的宽高；设置宽高有效

块级标签：h1-h6,p,hr,ol\ul\dl\li,table,tr,div
行内标签：a,img,td,input,select,option,textarea,span

2.display属性（设置标签的性质）

block - 将标签设置为块级标签
inline-block - 将标签设置为行内块标签
注意：一般不会通过将标签转换成行内块来解决问题，因为行内块标签显示的时候，左右中会有缝隙，无法消除
inline - 将标签设置为行内标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            display: block - 将a转换成块级标签
        -->
        <a href="", style="display: block;background-color: hotpink; width: 200px;">abc</a>
        <!--
            display: inline-block - 将a转换成行内块标签
        -->
        <a href="", style="display: inline-block;background-color: darkcyan; width: 300px;">123</a>
        <a href="", style="background-color: darkkhaki; width: 300px;">123</a>
        
        <p style="display: inline; background-color: lightskyblue; width: 200px;">我是段落1</p>
        <p style="display: inline; background-color: lightskyblue;">我是段落2</p>
        
    </body>
</html>
4.png

3.float属性

1.浮动原理
a.浮动会让标签脱离标准流进行布局（脱流）
b.没有浮动的标签既占池底的位置也占水面的位置，浮动后只占水面位置

2.float属性
left - 左浮动
right - 右浮动

3.脱流后的布局规则：不管什么标签，脱流后都是一行可以显示多个，可以设置宽度和高度

 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            p{
                background-color: salmon;
                float: left;
                width: 60px;
                height: 150px;
                
            }
            a{
                background-color:darkorange;
                width: 200px;
                height: 130px;
                float: left;
            }
            *{
                margin: 0;
                padding: 0;
            }
            
        </style>
        <title></title>
    </head>
    <body>
        <!-- 1.设置float属性后会脱流 -->
        <!-- <p>我是段落1</p>
        <p>我是段落2</p>
        <a href="">123</a>
        <a href="">abc</a> -->
        <div style="float: right;background-color: fuchsia;height: 100px;width: 300px;">div1</div>
        <div style="background-color: seagreen;height: 200px;width: 300px;">div2</div>
        <div style="float: left;background-color: gold;height: 200px;width: 300px;">div3</div>
    
    </body>
 </html>
5.png

4.清除浮动

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

 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*方案2*/
            #div2{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div style="background-color: hotpink; height: 100px;"></div>
        
        <!--div2会出现高度塌陷问题-->
        <div id="div2" style="background-color: yellow;">
            <div style="background-color: peru; height: 100px; width: 200px;float: left;"></div>
            <div style="background-color: seagreen; height: 200px;width: 200px; float: right;"></div>
            
            <!--方案1-->
            <!--<div style="clear: both;"></div>-->
        </div>
        <div style="background-color: lightblue; height: 120px;"></div>
        
    </body>
 </html>
6.png

5.文字环绕

文字环绕；被环绕的标签(例如图片对应的标签)浮动；文字对应的标签不浮动

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

6.定位

CSS可以通过left,right,top,bottom来对标签进行定位。前提是设置好参考对象
1.定位属性
left - 标签左边距
right - 标签右边距
top - 标签上边距
bottom - 标签下边距
注意：a.定位需要通过position属性来设置参考对象
b.当标签的宽度固定的时候，同时设置left和right只有left有效；
c.可以同时设置left和right，不设置宽度，或者宽度值为auto的时候，标签会自动拉伸；
---------top和bottom同理
2.position
initial - 默认值
static - 不希望自己的子标签相对自己定位的时候菜使用static

absolute - 相对第一个非static和非initial的父标签进行定位

relative - 相对于自己在标准流中的位置定位；
如果一个标签希望自己的子标签能够相对自己定位，就设置这个标签的position为relative（自己不定位）
fixed - 相对于浏览器定位
sticky - 粘性定位，只针对网页底部的标签定位。如果网页内容超过一屏(需要滚动)的时候相对浏览器定位，否则相对标准流定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            #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;
                
                
                
            }
            
        </style>
        
    </head>
    <body>
        
        <div id="div1">
            <div id="div2">
                <!--<div style="width: 100px; height: 100px; background-color: honeydew;"></div>-->
                <div id="div3">
                    
                </div>
            </div>
        </div>
        
        <div id="" style="height: 200000px; background-color: slategray;">
            
        </div>
        
        
        
    </body>
</html>

7.盒子模型

html中所有可见的标签都是盒子模型。有固定的结构，包括：内容、padding、border、margin四个部分
内容 - 可见的，设置width和height实质就是设置内容的大小；默认大小跟标签中的内容有关
添加子标签或者设置文字内容都是添加或者显示在内容部分的
可以设置背景颜色，会作用于内容部分
padding - 可见的，分上下左右四个部分，一般默认都是0
可以设置背景颜色，会作用于padding部分
border - 可见的，分上下左右四个部分;一般默认都是0
border的背景颜色需要自己设置
marjin - 不可见，但是占位置；分上下左右四个部分；一般默认值为0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #div1{
                /* 设置内容部分和padding部分的背景颜色 */
                background-color: chartreuse;
                /* 设置内容大小 */
                height: 150px;
                width: 150px;
                /* position: relative;
                left: 50px;
                top: 50px; */
                /* 设置padding */
                /* a.分开设置 */
                /* padding-left: 20px;
                padding-top: 20px; */
                /* b.一起设置 */                
                padding: 20px; /*同时设置四个padding值都为20px  */
                /* 3.设置border */
                /* 
                 border值的格式 线的样式 颜色 宽度
                 线的样式 - solid（实线）/double双线/dashed点划线/dotted/虚线
                 */
                /* border-left: solid blue 5px;
                border-top: dotted gold 5px;
                border-right:double slateblue 5px;
                border-bottom: dashed fuchsia 5px; */
                
                border: solid limegreen 6px;
                
                /*4. 设置圆角 */
                /*  border-radius: 10px;*/
                border-radius: 20px;
                /* 分开切每个角的圆角 */
                /* border-top-left-radius: 55px; */
                
                
                /* 5.添加margin */
                margin-left: 30px;
                
                
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <!-- <div id="" style="background-color: #FF69B4;width: 15px;height: 15px;">
                
            </div> -->
            会作用于内容部分可以设置背景颜色，会作用于内容部分
            
            
        </div>
        <form action="" method="get">
            姓名：<input type="password" name="密码" id="" value="password"style="padding-left:20px ;" />
            
            
            <input type="submit" value="OK"/>
        </form>
        
    </body>
</html>
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,678评论 1赞 45
  • HTML学习笔记（完）
    概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时，所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,367评论 0赞 7
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,334评论 2赞 66
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,619评论 0赞 6