CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

我可能是个大佬

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量155

点赞数 2

分类专栏：学习笔记文章标签：学习笔记

本文链接：https://blog.csdn.net/howareutoday/article/details/89556323

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前方挖坑。。
box-sizing:border-box; 解决border和padding把盒子撑大的问题。
list-style:none;取消li前面的小点
text-decoration:none;取消a链接的下划线

文档流

分为：标准流、浮动、定位

浮动

float:left(right/none);

可以使三个div占一行（如果使用display:inline-block，三个div会有间隙）。

浮动首先创建块的概念（包裹）。
浮动的元素总是找离他最近的父级元素的内边距对齐。
元素排列：和上一个浮动元素顶部对齐，和上一个不浮动元素底部对齐。
行内元素添加浮动后会有行内块特性。

版心与布局流程

版心（可视区）
常见宽度：960px,980px,1000px,1200px.
布局流程
1、确定页面可视区
2、确定行模块以及列模块
3、制作HTML结构
4、CSS初始化
一列式

    /*相同的样式，选择 并集选择器*/
    .top,
    .banner,
    .main,
    .footer{
      width: 960px;
      text-align: center;/*文字居中对齐*/
      margin: 0 auto;/*盒子居中对齐*/
      margin-bottom: 10px;
    }
    .top{
      height: 80px;
      background-color: pink;
    }
    .banner{
      height: 120px;
      background-color: purple;
    }
    .main{
      height: 500px;
      background-color: hotpink;
    }
    .footer{
      height: 150px;
      background-color: black;
    }
  </style>

两列式

	.main{
   	  width:960px
      height: 500px;
    }
    .left{
      width: 350px; /*给边距留出10px 350+10+600=960*/
      height: 500px;  /*高度不继承*/
      background-color: skyblue;
      float: left;
    }
    .right{
      width: 600px;
      height: 500px;
      background-color: salmon;
      float: right;
    }

平均布局式
~~太简单懒得写了~~

清除浮动

clear:both;

本质
解决父级元素因为子级元素浮动而引起了高度为0的问题。
额外标签法
在浮动盒子后添加一个空盒子（结构混乱，不推荐）
父级overflow法
在父级盒子里添加：overflow:hidden;（触发BFC）
（会导致溢出元素隐藏）
after伪元素法

    .clearfix:after{
      content: "."; /*内容小点，不要空，否则旧版本有空隙*/
      display: block; /*转换为块级元素*/
      height: 0;
      visibility: hidden;/*隐藏盒子*/
      clear: both;/*清除浮动*/
    }
    .clearfix{
      *zoom:1; /*只有ie6.7才执行*/
    }

双伪元素法（推荐）

.clearfix:after,
   .clearfix:before{
     content: "";
     display: table; /*触发BFC 防止外边距合并*/
   }
   .clearfix:after{
     clear: both;
   }
   .clearfix{
     *zoom:1; /*只有ie6.7才执行*/
   }