css基础

css概述

css的基本语法

css的导入方式

内联方式：只能设置单独的网页元素格式
内部方式：可以设置整个网页中元素样式
外部方式：可以设置所有网页中元素样式

基本选择器

*= 包含
^= 开头包含
$= 结尾包含

文字属性

文本属性

列表属性

尺寸、显示、轮廓属性

浮动属性

clear属性

父元素塌陷问题？

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

<div id="box" style="border: 1px solid red">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

执行结果如下图：

解决办法：
①解决方案一：给父元素添加高度 不能自适应

<div id="box" style="border: 1px solid red; height:100px">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

结果如下图

②解决方案二：给父元素添加一个overflow属性 属性值hidden 触发Bfc:可能会隐藏元素

  /*第二种*/
        #box{
            overflow: hidden;
        }

③解决方案三：给父元素添加一个空div 破坏页面结构

#fix{
         height: 0px;
         clear: both;
     }
<div id="box" style="border: 1px solid red;">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="fix"></div>
</div>

④解决方案四：使用伪类元素给父元素添加内容【推荐】 不好理解

#box:after{
            content: ""; /*空字符串*/
            display: block; /*块级元素*/
            clear: both;/*清除浮动影响*/
        }

overflow(溢出):当内容超出容器的大小时，如何处理内容

#div4{
            width: 100px;
            height: 100px;
            background-color: green;
            overflow: auto;
            /*
              visible:可见，默认
              auto:内容溢出才出现滚动条
              hidden:隐藏
              scroll:不管内容有没有溢出都出现滚动条
            */
        }

定位属性

盒子模型

边框

外边距

内边距

实现圆角

			/*圆角*/
            /*四个圆角的半径都是10px*/
            border-radius: 10px;
            /*左上角   右上角   右下角   左下角*/
            /* border-radius: 5px 10px 15px 20px;*/

css3扩展属性