2019-01-03

2019-01-12  本文已影响0人  陳先生_2211

一、css

1.css引入方式(3+1)

1)行内(style 属性)
2)页内(style 标签)
3)页外(link标签:记住rel=stylesheet)
4)@import(css语法 只能写在css里面,不建议使用 会造成页面抖动)

2.盒子模型(w3c盒子模型+ie盒子模型)

1)w3c盒子模型
    描述hmtl中元素组成和占位大小的模型
    包括:content padding border margin
    border-sizing:border-box;宽高代表:content+padding+border
2)ie盒子模型(了解)

3.浮动(float:布局方面,解决块级不能同一行显示的问题)

1)脱离文档流(从上到下,从左到右)(普通流、浮动流、定位流),不再占有原来的位置
2)浮动元素到哪里停下:父块边界和其他浮动元素(紧挨着上一个浮动元素)
3)副作用:因为脱离文档流,不占用原来的位置,所以撑不开父级(造成高度崩塌,为0)
4)清除浮动
    (1.新建空div,设置css属性clear:both
    (2.给父级设置overflow:hidden
    (3.利用伪对象清除浮动
利用伪对象清除浮动:
            .son{
                float: left;
            }
            .father::after{
                content:" ";
                height: 0;
                display: block;
                clear: both;
            }
            /*
             * 利用伪元素清除浮动
             * after:在父级内的最后一个地方新建一个元素*/

4.css选择器

*通配符
.class类名
#id id
,群组选择器
[]属性选择器
关系选择器:
    空格 子孙关系
    >   儿子关系
    ~   兄弟关系(不会往上找)
    +   相邻兄弟
上一篇下一篇

猜你喜欢

热点阅读