CSS准备分如下几个链接进行整理
第一篇主要介绍下CSS/CSS3中的知识点
第二篇主要介绍下CSS/CSS3中的实例
第三篇主要介绍下CSS/CSS3中的特效分析
这篇主要整理下知识点
7. 弹性布局–display:flex
7.1 flex-direction
7.2 flex-wrap
7.3 align-items
7.4 align-content
7.5 justify-content
7.6 子元素的六个属性
9. background属性理解
9.1 background-clip
9.2 background-position
9.3 background-size
9.4 background-origin
9.5 background-image
常见的块元素有： div dt h1-6 p等等，其特点是:
1：在不设置浮动的情况下宽度占满一行,其默认宽度为父容器的100%
2：可以对其设置宽和高
常见的行元素有： span img a等等，其特点是:
1: 无法设置宽 高
2: margin-top，margin-bottom无效，即垂直方向设置margin无效
1：在盒子模型中水平方向上有7个属性：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来一般等于父级元素的width值。这7个属性被称呼为水平格式化属性. 其中margin-left，margin-right和width可以设置为auto，这三个属性的不同搭配会有不同效果
1）如果三个属性中某个属性设置了auto，其余两个为特定的值，则浏览器会确保7大属性的总和等于父元素width
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS</title>
<style type="text/css">
.parent {
width: 600px;
background: #eeb3b3;
}
.child {
background: #ffd800;
margin-left: auto;
margin-right: 100px;
padding: 30px;
width: 100px
}
</style>
<script>
</script>
</head>
<body>
<div class="parent">
<div class="child">child1</div>
</div>
</body>
</html>
可以看出，这里的margin-left：auto被解析之后，会是的水平格式化属性总和等于父元素width
2）如果三个属性都设置了特定值，那么总和不等于父级元素的width，修改上面的代码
.child {
background: #ffd800;
margin-left: 100px;
margin-right: 100px;
padding: 30px;
width: 100px
}
可以看出这里的margin-right：100px并没有起效果，为了能实现居中的效果，并且左右边距一致，那么我们就可以将margin-left和margin-right设置为特定值，将width设置为auto即可
.child {
background: #ffd800;
margin-left: 100px;
margin-right: 100px;
padding: 30px;
width: auto;
}
当然还有其他组合，我们这里就不一一列举了
2：在盒子模型中垂直方向上也有7个属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性；这7个属性被称呼为垂直格式化；其中margin-top，margin-bottom和height可以设置为auto，不同的组合也会有不同的效果；
在W3C的标准中，auto表示随着内容的宽度/高度来自适应，width和height的默认值即auto。 如果使用百分号来作为单位，则其宽高则是以父组件的宽高来进行换算的，举例说明
<div id="main">
<div id= contain>我是子元素DIV1</div>
</div>
#main{
width: 400px;
height: 400px;
border: 1px solid rgb(214, 178, 178);
margin: 0 auto;
}
#contain{
border: 1px solid red;
width: 50%;
}
则此处contain的div的宽度为400 * 0.5 = 200px
当理解了盒子模型之后，margin和padding就好理解了，其分别表示外边距和内边距；我们可以从四个方向来表示外边距和内边距，即top，right，bottom，left；我们可以对这四个方向进行简写，如1： margin： 10px 10px 10px 10px 分别表示上，右，下，左四个方向（顺时针记忆）
2： margin： 10px 10px 10px 则表示 上 左=右 下
3： margin： 10px 10px 则表示 上=下 左=右
4： margin ： 10px 则表示 上=右=下=左
首先我们应该明确maring的参照物，margin-left和margin-top是相对于父元素左上角而言，而margin-right和margin-bottom是相对元素本身而言，会影响后面元素的位置
这里先看下对于margin为负数的总结
1： 当快元素有固定宽度的时候, margin-left 为负数会让元素产生位移效果; margin-right为负数会让后面的元素跑到前面，即我们常说的减少自身读取宽度，打个比方，一个元素宽度为100px，当被设置为margin-right为-20px之后，后面跟着的元素会向前移动20px
2： 当快元素没有有固定宽度或者宽度为auto的时候，margin-left和margin-right会增加元素的宽度
3：margin-top和和matgin-left一样，只不过一个向上，一个向下；margin-right和margin-bottom一样
这里我们先看下效果
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size: 28px;
color: black;
}
#div1{
height: 700px;
background-color: blue;
margin: 20px;
}
#title{
font-size: 45px;
color: black;
margin: 0 auto;
text-align: center;
}
#block1{
width: 180px;
margin-left: -50px;
background-color: yellow;
}
#block2{
width: 180px;
background-color: pink;
}
#block3{
margin-left: -50px;
width: auto;
background-color: yellow;
}
#block4{
width: auto;
background-color: pink;
}
</style>
</head>
<body>
<div id="div1">
<p id="title">margin为负数的demo</p>
<div id="block1">有具体宽度的块状元素</div>
<div id="block2">有具体宽度的块状元素</div>
<div id="block3">没有具体宽度的块状元素</div>
<div id="block4">没有具体宽度的块状元素</div>
</div>
</body>
</html>
1： inline-block导致元素产生间隙效果
产生原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
解决方法：为父元素设置如下属性即可
display: table;
word-spacing:-1em;
完整的样例为：
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS学习</title>
<style type="text/css">
.parent {
display: table;
word-spacing:-1em;
}
.child {
display: inline-block;
background-color: #fdfd04;
width: 100px;
height: 100px;
}
</style>
<script>
</script>
</head>
<body>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
</div>
</body>
</html>
2：div默认的间隙没有清除
这个问题比较好理解，我们只要初始化每一个div的外边距和内边距即可
div{
margin:0;
border:0;
padding:0;
}
display 属性规定元素应该生成的框的类型,其常见的有inline（默认）,inline-block, block; 当设置元素display为flex，则表示元素生成的框的类型为弹性布局；
其特点为：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
其浏览器兼容代码为：
display:-webkit-flex;
display:-moz-box;
display:-mz-flexbox;
display:flex;
flex有如下几个属性：
1）flex-direction: 容器内元素的排列方向(默认横向排列)
其值为row表示子元素横向排列(从左向右排列)，其值为column表示子元素纵向排列，其值为row-reverse表示子元素逆向横向排列（从右向左排列）其值为nowrap（默认值）表示元素总宽度大于父元素width的时候也不换行 ； 其值我wrap的时候，表示元素总宽度大于父元素width的时候换行，但是小于父元素width的时候不换行（注意点）
下面代码演示的是其值为nowrap时的效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Flex布局</title>
<style type="text/css">
.parent {
display: flex;
flex-wrap: nowrap
}
.middle {
width: 100%;
height: 200px;
background: blue;
}
.bottom {
width: 50%;
height: 200px;
background: green;
}
</style>
<script>
</script>
</head>
<body>
<div class="parent">
<div class="middle">
<div class="middle-left"></div>
<div class="middle-right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
3）align-items： 表示元素在水平方向上的对齐方式
其值为flex-start，表示从父元素左上顶点开始对齐
其值为flex-end，表示从父元素左下顶点开始对齐
其值为center，表示从父元素中间开始对齐
4）align-content： 表示元素在垂直方向上的对齐方式（默认值flex-start）
align-content要flex-wrap:wrap; 进行换行配合着使用其值为flex-start，表示以父元素为标准，从上往下依次排列
其值为 flex-end，表示以父元素为标准，从下往上依次排列
其值为 stretch，表示以父元素为标准，从上往下依次排列，并有等比分割父元素的效果
其值为 center，表示以父元素为标准，居中排列
其值为 space-between，表示以父元素为标准，从上而下等比分割父元素，可以看出他和stretch的明显区别就是，各个元素之间的相互隔开的距离是相等的
其值为 space-around，表示以父元素为标准,从上到下，顶部和底部空出部分区域，已达到评分父组件的效果，顶部和底部空出区域的大小等于各元素间隔大小的一半
5) justify-content：决定子项目(水平)横向布局方式（默认值flex-start）
justify-content的值和align-content的值几乎类似，这里就不多做解释了6.1： order: 设置子项目的顺序(默认为0)，其值可以为负数，数值越大，越靠后排列
6.2： flex-grow: 子项目是否可扩大（默认为0，不扩大）
6.3： flex-shrink: 子项目是否可缩小（默认为1，可缩小）（0是false,1是true）
6.4： flex-basis: 设置子项目的初始宽度（默认为auto）
6.5： flex： 该属性用于设置或检索弹性盒模型对象的子元素如何分配空间，其值默认为0 1 auto，这个属性是grow、shrink、basis的简写，
当其为1的时候，表示让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容;
当其为auto的时候，等价于 ：flex-grow:1; flex-shrink:1; flex-basis:auto;
当其为none的时候，等价于：fflex-grow:0; flex-shrink:0; flex-basis:auto;
6.6： align-self: 设置子项目垂直方向的位置（默认值auto）
align-self属性设置单个元素的方向，可覆盖容器的align-items属性。slign-self默认值为auto，表示继承容器的align-items属性，如果容器没有设置align-items的值，等同于继承了stretch。
-
border-box
默认值，背景绘制在边框方框内 -
padding-box
如果盒子模型里面设置了padding，则背景会绘制在padding区域 -
content-box
绘制在盒子模型中的content区域
设置背景图像的起始位置，分别针对水平方向和垂直方向； 他有有三种情况
1）left center或者其他的如right center的关键字组合，如果只有一个关键字，则第二个为center
2）%，表示水平和垂直方向的距离，如果仅指定了一个值，其他值将是50％。默认值为：0％0％
3）px或者其他css单位，表示水平和垂直方向的距离
指定背景图像的大小：分三种情况：
1）如果是具体的数值，第一个表示宽度，第二个表示高度；如果省略第二个则表示auto
2）cover，保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
3）contain，保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
其值和background-clip值是一样的，操作效果也类似
从元素的左上角开始设置元素的背景，同时会重复垂直和水平方向，此时我们可以通过background-repeat 属性来控制重复内容（只有垂直方向重复background-image）
扫一扫
3871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
