css_day5

登录模块练习

/* 任何的项目开始之前，都必须要先设置好初始化代码 */
/* 初始化代码：很多标签，在默认情况下有自带的css样式，例如a标签的下划线，
li标签的小点点，p上间距，这些默认的样式，会影响到我们做布局，所以一开始的时候，
就会手动将其清除 */
*{
    margin: 0;
    padding: 0;
    /* 清除默认的内外边距 */
}

a{
    text-decoration: none;
    /* 清除a标签的下划线 */
    color: #000;
}

li{
    list-style: none;
    /* 清除li标签前面的小点点 */
}

input{
    border: none;
    /* 清除input默认的边框 */
    outline: none;
    /* 清除input外轮廓线/高亮线 */
}

body{
    font-size: 12px;
    /* 将浏览器的默认字体大小改为12px */
    /* 为什么标签的高度不会等于文字的高度 */
    /* 原因是因为标签有默认的行高 */
    /* 将标签的高度设置到等于文字的高度 */
    line-height: 1;
    /* 行高等于一的意思，就是1*当前文字大小 */
}

浮动

CSS的布局的三种机制

• 标准流——盒子在一诞生的时候就是标准流——盒子模型
• 浮动流——浮动一开始不是拿来做布局，而是为了解决文字环绕图片的问题

/* display: inline-block; */
/* 盒子与盒子之间有回车产生的空隙 */
float: left;
/* 浮动元素，可以实现模式转换，拥有行内快的特点 */
/* 浮动元素，脱离标准流/脱标，不占据标准流的位置 */

/* 浮动元素的顺序与css代码结构无关，由html结构代码的顺序决定 */

/* 当父盒子浮动了，那么子盒子会跟着父盒子 */
/* 子盒子浮动的范围，只能在父盒子内 */

/* 浮动元素顶部对齐 */

li:hover a{
            /* 当鼠标悬停在li标签身上的时候，找到后代a，并且改变它的颜色 */
            color: white;
        }

• 定位流