CSS学习笔记（一）

2021-04-25 21:04:36 阅读：209 来源： 互联网

标签：padding 圣杯 clearfix 布局笔记学习中间 div CSS

1.手写clearfix

/* 手写 clearfix */
.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

2.offsetWidth是什么？

答：offsetWidth实际获取的是盒模型(width+border + padding)

3.border-box：width=content+padding+border

4.BFC设置：

　　1.float不是none2.display：flex，inline-box3.overflow不是hidden4，position：abs或者fixed

应用：清除浮动

5.圣杯布局和双飞翼布局：

作用：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

标签：padding,圣杯,clearfix,布局,笔记,学习,中间,div,CSS
来源： https://www.cnblogs.com/zisi/p/14701939.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS学习笔记（一）

作用：

区别：