text-align属性
text-align 这个属性可以设置行内元素横向居中
代码及规范
<style>
p{
width: 300px;
height: 300px;
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<p>
<span>我可以通过text-align这个属性来居中</span>
</p>
margin: 0 auto;可以使得块级元素横向居中
代码及规范
<style>
div{
width: 300px;
height: 300px;
border: 1px solid;
}
p{
width: 200px;
height: 200px;
border: 1px solid;
margin: 0 auto;
}
</style>
</head>
<body>
<div><p>我是一个块级元素我是通过margin来居中的</p></div>
定位(position)
定位的元素属性有哪些：
1.static:默认值，但它不属于定位
2.relative:相对定位。设置这个属性，是为了方便子元素定位时候，能够将它左上角设置为原点进行定位
3.fixed : 固定定位。他脱离了文档流
4.absolute:绝对定位。他脱离了文档流
固定定位：将元素设置为position:fixed,则这个元素的不属于块级元素和行内元素，而是类似于"行内块元素"
当你的上下左右同时都设有值，则你的这四个属性值中有几个是失效的
（优先级在于：元素设置了宽高，上下同在取上，左右同在取左）
元素设置了固定定位和绝对定位的时候，该元素脱离了文档流，和他在同一个位置上的元素将被覆盖
定位的所有元素都是需要确定你的原点是谁
固定定位元素之争
两个元素同时设置了固定定位，并且重叠在一起，使得z-index来调节
代码即规则，如下:
<style>
div{
width: 200px;
height: 200px;
border: 1px solid;
}
.div1{
background-color: red;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto;
z-index: 99;
}
.div2{
background-color: skyblue;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
单行文本的溢出
处理代码如下：
<style>
div{
width: 200px;
height: 200px;
border: 1px solid;
}
.div1{
background-color: red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
多行文本的溢出
处理代码如下
<style>
div{
width: 200px;
height: 60px;
border: 1px solid;
}
.div1{
background-color: red;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<div class="div1">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sit, accusantium ducimus et deserunt quam enim cum itaque laudantium id expedita repellendus pariatur obcaecati vero, dolorem vitae animi. Ipsa, maxime.
</div>
</body>
盒子模型（盒模型）
1.什么是盒模型
盒模型包括内容，内边距，边框，外边距
2.盒模型分为哪几种类型？
1.w3c的标准盒模型（默认的）
它的大小计算是 内容的大小+内边距的大小+边框的大小+外边距的大小
2.IE盒模型（怪异盒模型）
它的总大小是内容的大小
3.两种盒模型的区别为
1.标准盒模型添加边框和内边距，盒子会随之变大
2.怪异盒模型添加边框和内边距，盒子不会随着变大
4.两种盒子类型如何相互转换呢？
通过box-sizing css属性进行修改，其中的属性值
box-sizing：content-box
表示的是标准盒子
box-sizing：border-box
表示的是怪异盒子
css进阶
弹性布局（弹性盒子）
1.当我们对盒模型设置属性display:flex这个盒子就变成一个弹性的盒子，他有如下的特点盒子的元素可以横向排列（row）也可以纵向排列（coiumn）
justify-content 水平对齐方式
当盒子排列为横向的时候，我们可以使用 justify-content这个属性来对盒子进行横向布局。
其中的属性值为
justify-content：flex-start:一开始进行左对齐（默认值）
justify-content：center 横向居中
justify-content：flex-end 右对齐
justify-content:space-bewtten 空白在元素之间
justify-content:space-around:空白在元素旁边并且还是分开的
代码及规范：
<style>
div{
width: 200px;
height: 60px;
border: 20px solid grey;
box-sizing: content-box;
display: flex;
justify-content: center;
}
div .item{
width: 100px;
height: 20px;
background: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="item"></div>
</div>
align-items垂直对齐
它的属性值为:
align-item:flex-start 上对齐
align-item: center 垂直方向的居中
align-item:flex-end:下对齐
代码及规范：
<style>
div{
width: 200px;
height: 60px;
border: 20px solid grey;
box-sizing: content-box;
display: flex;
align-items: center;
}
div .item{
width: 100px;
height: 20px;
background: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="item"></div>
</div>
如果设置了flex-direction: column;
则justify-content控制的是垂直方向上的，而align-items则控制的是水平方向的，属性方法都不变
align-content
当我们使用弹性布局的时候如果断行的话flex-wrap:wrap,那么你会发现会产生两节元素，并且直接有间距
那么我们应该使用align-content
代码及规范
<style>
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 5px;
align-content:center;
</style>
当父元素进行了弹性布局的话，则子元素可以用其中的方法对子元素中的字体产生影响
代码及规范
<style>
div{
width: 300px;
height: 400px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 5px;
align-content:center;
}
div .item{
width: 50px;
height: 50px;
background: red;
justify-content: center;
align-content: center;
}
</style>
</head>
<body>
<div class="div1">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
|