目录
2.标准盒模型【box-sizing:content-box】默认
十六、css常见选择符，哪些属性可以继承，以及优先算法如何计算？
二十三、margin padding百分比对应父元素还是自身
前言
如果哪里不正确欢迎指出问题，我会积极改正的。
一、css盒模型
<body>
<div id="box">Hello World </div>
</body>盒模型【box-sizing】主要分为两种：IE盒模型（又称‘怪异盒模型’） 和 标准盒模型
- IE盒模型【box-sizing:border-box】：内容（content+padding+border）+ margin
- 标准盒模型【box-sizing:content-box】：content+padding+border+ margin
例子：
<style>
#box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
margin: 10px;
box-sizing: border-box;
}
</style>1.IE盒模型：box-sizing:border-box
宽度（设置的width） = 内容宽 +（左内边距+右内边距）+（左外边框+内外边框）
高度（设置的height） = 内容高 +（上内边距+下内边距）+（上外边框+下外边框）
2.标准盒模型【box-sizing:content-box】默认
<style>
#box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ddd;
margin: 10px;
box-sizing: content-box;
/* box-sizing: content-box;为默认属性 不写也可 */
}
</style>
宽度 = 内容宽（设置的width）+（左内边距+右内边距）+（左外边框+内外边框）
高度 = 内容高（设置的height）+（上内边距+下内边距）+（上外边框+下外边框）
二、margin 合并
1.margin合并：块级元素的上外边距与下外边距有时会合并为单个外边距。
2.注意点：
- 是两个块级元素
- 是上下不包含左右
- 只发生在当前的文档流中竖值方向上
- 行内框，浮动框或绝对定位之间的外边距不会合并。
3.出现合并的情况：
两个块元素是兄弟元素、父子元素、空元素和有内容的元素
4.造成合并原因：
- 当父子边框合并后，父类设置margin 和子类设置margin 都是相对于父类产生效果，并且取最大值的哪一个
- 当兄弟元素的时候margin-top 和margin-bottom的时候，取最大的那一个。
- 当空元素和有内容的元素合并的时候，取有内容的元素
5.例子：兄弟元素
div {
margin-top: 10px;
margin-bottom: 10px;
}结果：Hello World1 与 Hello World2 之间的距离 = 10px （原因：上下margin会合并，且有内容的div会合并没有内容的div）
6.解决margin合并的方法：
- 使用float float会脱离文档流，后面的元素会占据它的位置，但是它不能占据前面的元素的位置
-
使用绝对定位
上面的float:left改成position: absolute效果一样
position: absolute不设置位置的情况下，默认还在正常文档流的位置
-
使用inline-block
上面的float:left改成display: inline-block效果一样
- 同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个用div包起来，然后激活它使其成为一个BFC
三、margin 负值
1. margin 不同方向负值 结果
margin-top 负值 元素向上拖拽
margin-left 负值 元素向左拖拽
margin-bottom 负值 元素本身不变，下边元素上移
margin-right 负值 元素本身不变，右边元素上移
2.排列情况 举例：
.box {
height: 100px;
width: 200px;
border: 1px solid #ddd;
}
.container {
height: 300px;
width: 600px;
border: 1px solid #ddd;
}- 上下排列
<h1>margin 负值 上下排列情况</h1>
<div class="container">
<div class="box box-top"></div>
<div class="box box-bottom"></div>
</div>结果：
- 左右排列
.box-left,
.box-right {
float: left;
} <h1>margin 负值 左右排列情况</h1>
<div class="container">
<div class="box box-left"></div>
<div class="box box-right"></div>
</div>结果：
四、认识BFC
1、BFC（Block Formatting Content）块级格式化上下文
2、作用：
- 形成独立的渲染区域
- 内部元素不会影响外界
3、形成 BFC 常见条件
- 浮动元素 float 不是none
- 绝对定位元素 position: absolute 或 fixed
- 块级元素 overflow 不是 visible
- flex 元素
- inline-block 元素
4、应用场景：
- 清除浮动
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清除浮动。
- 自适应两栏布局
BFC的区域不会与float box重叠，所以我们让right单独成为一个BFC
- 避免margin重叠
同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个用div包起来，然后激活它使其成为一个BFC
五、实现圣杯布局(一般用于PC端)
1、目的：
- 两侧内容宽度固定，中间内容宽度自适应
- 三栏布局，中间一栏最先 加载、渲染出来（主要内容）
2、实现方法1： float + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0</title>
<style>
body {
min-width: 500px;
}
div {
text-align: center;
}
.header {
background-color: antiquewhite;
}
.content {
padding-left: 300px;
padding-right: 200px;
}
.content .left {
background-color: blueviolet;
width: 300px;
margin-left: -100%;
position: relative;
right: 300px;
}
.content .right {
background-color: coral;
width: 200px;
margin-right: -200px;
}
.content .center {
background-color: cornflowerblue;
width: 100%;
}
.content .column {
float: left;
}
.footer {
background-color: bisque;
clear: both;
}
</style>
</head>
<body>
<h1>圣杯布局</h1>
<div class="header">header</div>
<div class="content">
<div class="center column">center</div>
<div class="left column">left</div>
<div class="right column">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>结果：
3、优缺点：
- 优点：不需要添加dom节点
- 缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图：当center部分的宽小于left部分时就会发生布局混乱。（middle<left即会变形）
六、实现双飞翼布局(一般用于PC端)
1、目的：（同 圣杯布局）
- 两侧内容宽度固定，中间内容宽度自适应
- 三栏布局，中间一栏最先 加载、渲染出来（主要内容）
2、实现方法1： float + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0</title>
<style>
body {
min-width: 500px;
}
.main {
background-color: antiquewhite;
width: 100%;
}
.main .main-wrapper {
margin-right: 100px;
margin-left: 200px;
}
.left {
background-color: blueviolet;
width: 200px;
margin-left: -100%;
}
.right {
background-color: coral;
width: 100px;
margin-left: -100px;
}
.column {
float: left;
}
</style>
</head>
<body>
<h1>双飞翼布局</h1>
<div class="main column">
<div class="main-wrapper">Main</div>
</div>
<div class="left column">Left</div>
<div class="right column">Right</div>
</body>
</html>
3、优缺点：
- 优点：不会像圣杯布局那样变形
- 缺点是：多加了一层dom节点
4、与圣杯布局区别：
圣杯布局：为了让中间div内容不被遮挡，将中间div设置了padding-left和padding-right后，将两边div用定位position: relative并配合right和left属性，以便左右板块移动后不遮挡中间板块。
双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置
补充--两栏布局和三栏布局的原文链接： 两栏布局和三栏布局
七、FLEX 布局
1、属性
父级容器相关属性：
- flex-dorection 主轴方向 水平row、垂直column方向
- justify-content 水平对齐方式 开始对齐flex-start、结束对齐flex-end、居中对齐center、两端对齐space-between
- align-items 竖直对齐方式 开始对齐flex-start、结束对齐flex-end、居中对齐center、两端对齐space-between
- flex-wrap 是否换行 wrap 换行，第一行在下方 nowrap 不换行（默认）wrap-reverse 换行，第一行在下方
子元素相关：
- align-self 子元素在交叉轴上的对齐方式 开始对齐flex-start、结束对齐flex-end、居中对齐center【可以覆盖align-items 属性】
2、实现骰子布局
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div> .box {
display: flex;
justify-content: space-between;
width: 150px;
height: 150px;
border: 5px solid #ccc;
padding: 15px;
box-sizing: border-box;
border-radius: 10px;
}
.item {
display: block;
width: 20px;
height: 20px;
background-color: #666;
border-radius: 50%;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
3、详细参考：
原文链接：Flex 布局教程：语法篇 Flex 布局教程：实例篇
八、position定位
1、区别：其中absolute、static会生成块元素，不论元素本身类型
- relative 相对定位 相对于 自身 定位
- absolute 绝对定位 相对于 最近一层的父级元素 定位
- fixed 绝对固定定位 相对于浏览器窗口定位
- inherit 规定应从父元素中继承position值
- static 无定位 元素正常出现
九、水平、垂直居中
1、水平居中:
- 行内 inline 元素：
①、父元素为块元素，在父元素上加上：text-align:center
<!-- 行内元素 -->
<div class="box" s
最低0.47元/天 解锁文章
扫一扫
4551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
