2019-01-03

一、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
,群组选择器
[]属性选择器
关系选择器:
    空格 子孙关系
    >   儿子关系
    ~   兄弟关系(不会往上找)
    +   相邻兄弟
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,965评论 1 45
  • 霞~晚霞 美丽而又让遐想,触不及而又想拥入怀中,你...
    ALettertoMyself阅读 988评论 0 0
  • 触不可及是为殇
    魚陌阅读 1,092评论 0 0
  • 今天记住不对儿子进行任何指导,只观察
    冰糖糖冰阅读 761评论 0 0