美文网首页
2018-09-19day3CSS布局

2018-09-19day3CSS布局

作者: 汤姆猫是只疯猫 | 来源:发表于2018-09-19 19:42 被阅读0次

    一、标准流和display属性

    1.标准流:浏览器对默认标签默认的布局方式就是标准流
    2.标准流布局原则:
    块级:a.块级标签一个占一行(不管标签的宽度是否是浏览器宽度)
    b.默认宽度是浏览器的宽度,默认高度是内容的高度
    c.直接设置宽和高有效
    行内块标签:(img)
    a.多个行内块可以在一行显示
    b.默认的宽高是内容的宽高
    c.直接设置宽高有效
    行内标签:
    a.多个行内可以在一行显示
    b.默认的宽高都是内容的宽高
    c.直接设置宽高无效
    3.display属性:转换标签的性质
    block:块级
    inline:行内
    inline-block:行内块
    注意:行内标签和其他标签之间默认有间隙,而且这个间隙无法消除

    二、浮动

    1.怎么浮动
    通过给float属性赋值为left或right来让标签浮动,浮动会让标签脱流
    浮动的目的就是让竖着显示的横着来(针对块)
    2.浮动的效果:
    a.所有的标签浮动后,一行可以显示多个;默认的宽高是内容的大小;可以设置宽高
    b.一行显示不了的时候才会自动换行
    3.注意事项:
    a.如果同一级的标签,后边的需要浮动,前面的也要浮动,否则可能会出现显示的问题
    b.浮动的标签不占池底,只占水面的位置;不浮动的既占池底又占水面

    三、浮动(文字环绕)

    <img src="img/load.png" alt="" style="float: left; width: 100px; height: 100px;"/>
    p标签里加文字

    文字环绕.png

    四、清除浮动

    1.清除浮动:清除浮动不是将标签的浮动给去掉,而是清除因为浮动而产生的高度塌陷的问题
    高度塌陷:父标签不浮动,子标签浮动,并且不设置父标签的高度,就会产生高度塌陷的问题(父标签)

    方案一:添加空盒子,在高度塌陷的标签(父标签)的最后添加一个空的div,并设置样式clear的值为both
    方案二:给父标签添加样式设置overflow的值为hidden
    方案三:万能清除法

    <!--方案一:添加空盒子-->
    <div id="" style="clear: both;"></div>
    
    /*方案二:设置overflow*/
    #father{
        overflow: hidden;
    }
    
    /*方案三:*/
    #father:after{
        display: block;
        clear: both;
        content: '';
        visibility: hidden;
        height: 0;
    }
    #father{
        zoom: 1;
    }
    

    五、定位

    CSS中通过left,right,bottom,top属性来设置标签到上下左右的距离(但是默认情况下这些值不是都有效的)
    想要让定位属性有效,必须通过position属性来设置参对象
    1.position
    initial:默认值,没有相对定位
    absolute:相对第一个非static/initial父标签进行定位
    relative: 相对于自己在标准流中位置来定位。(当标签本身不希望去定位,只是想让自己的子标签可以相对本身来定位的时候使用)
    fixed:相对应浏览器定位
    sticky:当网页的内容不超过一屏(不滚动)的时候,就按照标准流进行定位。超过了就相对浏览器定位

    2.注意:如果想要设置right值要保证相对标签的宽度是确定的。如果想要设置bottom值要保证相对对象的高度是确定的

    3.技巧:当遇到某个方向定位死活都无效的时候,可以尝试让这个标签浮动,然后再定位

    六、盒子模型

    html中所有可见的标签都是一个盒子模型:包括长和宽决定的内容的大小、padding、border、margin四个部分组成。
    其中内容、padding、border是可见,margin不可见

    1.内容:设置width和height影响的就是内容部分的大小。添加子标签、添加内容都是放在内容部分的
    2.padding:在内容的外围,可见部分,如果标签有背景颜色,那么这个部分的颜色和内容的一致
    3.border:边框,border是在padding的外围,如果没有padding就在内容的外围,可见部分。可以设置颜色和大小

    /*1.内容*/
    width: 100px;
    height: 100px;
    
    /*2.padding
     * padding-方向:宽度
     */
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    /*同时设置上右下左的padding值*/
    padding: 10px 20px 100px 50px;
    
    /*同时设置上下和左右*/
    padding: 20px 100px;
    
    /*同时设置所有方向的padding都是20px*/
    padding: 100px;
    
    /*3.border:宽度 样式 颜色
     * 样式:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
     */
    /*单独设置某一边的边框*/
    border-left: 20px solid red;
    
    /*同时设置四个边的边框*/
    border: 10px solid red;
    
    
    /*4.margin:宽度
     * 
     */
    margin-left: 200px;
    

    七、其他常用的属性

    1.字体相关的属性
    字体颜色:color
    字体大小:font-size
    字体名:font-family
    字体加粗:font-weight(bolder(更粗的)/bold(加粗)/normal(常规)/100—900)
    字体倾斜:font-style(italic/oblique/normal)
    2.对齐方式:text-align
    left:左对齐
    right:右对齐
    center: 水平方向居中
    3.行高:line-height 设置一行的高度
    4.文本修饰:text-decoration
    none: 取消修饰
    underline:下划线
    overline:上划线
    line-through:删除线
    5.首行缩进:text-indent
    注意:单位是:em(表示空格)
    6.字间距:letter-spacing
    单位可以是:px ,em
    7.背景图片
    background:图片地址 是否平铺 x方向的坐标 y方向的坐标 背景色
    8.设置圆角

    相关文章

      网友评论

          本文标题:2018-09-19day3CSS布局

          本文链接:https://www.haomeiwen.com/subject/dyoinftx.html