CSS在HTML文件中的引入方式,浮动和清除浮动

1.CSS在HTML文件中的引入方式

行内式

<div class="fr" style="color:red;">aa</div>

内嵌式

<style>
    .one {
        width: 200px;
        }
</style>

外链式

<link rel=”stylesheet” href =”css/base.css” />

2.浮动

  • 浮动目的:可以让多个块级元素放到一行上
  • 浮动类别:float: left right none
  • 正常流:normal flow

    注:一个大盒子里面有多个小盒子,其中某个小盒子设置浮动,则所有的小盒子都要设置浮动

3.清除浮动

  1. 时间:根据实际需要来清除浮动
  2. 目的:为了解决父盒子高度为0的问题
  3. 方法:
    1. 额外标签法
    2. overflow: hidden
    3. 伪元素
css
.clearfix: after{
    content:””;
    Visibility:hidden;  
    Display:block; 
    Height:0;
    Clear:both;
}
css
.clearfix{
    Zoom:1;
}



4. 双伪元素

.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

备注

Font 字体

Font: 字体加粗 字号/行高 字体; 必须有字号和字体。
Font-weight:bold; 约等于700 ,正常是400

  • S del 删除线
  • I em 倾斜
  • U ins 下划线

注:这些小标签主要用于写一些小图标,例如:淘宝的购物车图标等。尽量不用div,div主要用于布局使用

猜你喜欢

转载自blog.csdn.net/u011504806/article/details/79323759