【HTML&CSS】CSS学习

    1、盒子模型的介绍

    content 内容区域（蓝色）

    padding 内边距区域（绿色）

    border 边框区域（黄色）

    margin 外边距区域（橙色）

    2、内容区域的宽度和高度

    width

    height

    3、边框 border

    ①例如 border:1px solid red;（不分先后border-width border-style border-color）

    solid 实线

    dashed 虚线

    dotted 点线

    ②单方向 border-方位

    注：border会撑大盒子

    4、内边距 padding

    写法：顺时针

    上 右 下 左

    上 左右 下

    上下 左右

    上下左右

    注意：padding会撑大盒子

    应用：例如导航栏的文字有多有少，a标签不用设置width，设置padding即可

    5、CSS3盒子模型（自动内减）

    给盒子设置属性box-sizing:border-box;

    拓展：

    清楚默认的内外边距

    ①通配符，效率较低

    * {

        margin:0;

        padding:0;

    }

    ②并集选择器，性能更好

    选择器1,选择器2,···,选择器n {

        margin:0;

        padding:0;

    }

    版心居中 margin:0 auto;

    6、外边距折叠现象

    ①合并现象：垂直布局的块级元素，上下的margin会合并

    ②塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用到父元素上

    解决办法：

    a.给父元素设置border或padding-top，分隔父子元素的margin-top

    b.给父元素设置overflow:hidden

    c.转换成行内块元素（对子元素操作）

    d.设置浮动

    7、行内元素的垂直内外边距

    若想通过margin、padding改变行内标签的垂直位置，无法生效

    解决办法：line-height

    1、结构伪类选择器

    根据元素在HTML的结构关系中查找元素

    减少对类的依赖，保持代码整洁

    由于查找某父级选择器中的子元素

    E:first-child {}    匹配父元素中第一个子元素，并且是E元素

    E:last-child {}     最后一个

    E:nth-child(n) {}   第n个

    E:nth-last-child(n) {}  倒数第n个

    n可以填公式（这里的n从0开始）

    偶数：2n、even

    奇数：2n-1、2n+1、odd

    找到前5个：-n+5

    找到从第5个往后：n+5

    2、伪元素

    一段页面中的非主体内容可以使用伪元素

    区别：

    元素：HTML设置的标签

    伪元素：由CSS模拟出的标签效果

    种类：

    ::before 在父元素内容的最前添加一个伪元素

    ::after  最后

    注意：

    必须设置content属性才能生效

    伪元素默认是行内元素

    3、标准流

    标签的默认排列规则

    常见标准流排班规则：

    块级元素：从上到下，垂直布局，独占一行

    行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

    4、浮动

    ①作用：图文环绕、网页布局

    ②代码 float:left/right;

    ③特点：

    a.浮动元素会脱离标准流（脱标），在标准流中不占位置

    b.浮动元素比标准流高半个级别，可以覆盖标准流中的元素（字不行）

    c.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

    d.浮动的标签，顶对齐，一行可以显示多个，可以设置宽高

    拓展

    CSS书写顺序：

    1、浮动 display

    2、盒子模型 margin、border、padding 宽度高度背景色

    3、文字样式

    注意：做主导航要li套a

    5、清除浮动

    ①清除浮动带来的影响

    ②清除浮动的方法

    a.直接设置父元素高度

    但有些布局不能规定父元素高度，eg新闻列表

    b.额外标签法

    c.单伪元素清除法

    .cleanfix::after {

        content:'' ;

        display:block ;

        clean:both ;

    }

    .cleanfix::after {

        content:'' ;

        display:block ;

        clean:both ;

        height:0 ;

        visibility:hidden ;

    }

    优点：项目中使用，直接给标签加类即可清除浮动

    d.双伪元素清除法

    写法

    .cleanfix::before, .cleanfix::after {

        content:'' ;

        display:table ;

    }

    .cleanfix::after {

        clean:both ;

    }

    优点：项目中使用，直接给标签加类即可清除浮动

    e.给父元素设置 overflow:hidden