居中特性
text-align：center内容相对于标签的宽度水平居中
- 可以让元素中的文本内容相对于当前元素（父元素）的宽度水平居中
- 可以让元素中的行内元素相对于当前元素（父元素）的宽度水平居中
- 可以让元素中的行内块元素相对于当前元素（父元素）的宽度水平居中
- 不可以让元素中的块内块元素相对于当前元素（父元素）的宽度水平居中
line-height：height的属性值;内容相对于标签的高度垂直居中
- 可以让元素中的文本内容相对于当前元素（父元素）的高度垂直居中
- 可以让元素中的行内元素相对于当前元素（父元素）的高度垂直居中
- 可以让元素中的行内块元素相对于当前元素（父元素）的高度垂直居中
- 不可以让元素中的块状元素垂直居中，会改变子元素（块）的高度
小提示：属性值小于高度值靠上，等于高度值居中，大于高度值靠下
css的三大特性
层叠性
<style>
header {
color: red;
color: blue;
}
</style>
<body>
<header>我是什么颜色？</header>
</body>
继承性
- 后代会继承祖先元素的样式
- 遵循亲代就近继承
- 元素本身的样式大于继承
- 宽高是不能继承的，是按照元素本身的特性
<style>
section {
text-align:center;
font-style:italic;
co1or:□#f00;
}
</style>
<body>
<section>
<p>我是段落标签</p>
<div class="box">
<span>我是section的后代元素</span>
</div>
</section>
</body>
优先级
- 同一个元素中基础选择器：通配符选择器 < 标签选择器 < 类名选择器 < ID选择器 < style(行内样式) < !important(只针对同一个元素基础选择器)
- 复合选择器：比较权重性
- 选中同一个元素权重相同,比较层叠行
<style>
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
</style>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
css三大重点（盒子模型、浮动、定位）
盒子模型
- 包括：边框
border、内边距：padding 、外边框margin - 盒子：狭义：
div 元素 广义：所有的块状元素 - 网页布局的本质：就是拼接盒子的过程
盒子模型——边框（border）
- 边框的尺寸：
border-width - 边框的线条样式：
solid:实线 dashed:虚线 dotted:点线 double: 双实线 - 总结：
<style>
header{
width:600px;
height:300px;
background-color:rgba(255,0,0,0.3);
border-top-width:10px;
border-top-style:solid;
border-top-color:blue;
border-left:20px dashed purple;
border-right:15px dotted #000;
}
section{
width: 400px;
height: 200px;
background-color: rgba(0, 0, 100, 0.2);
border:30px solid red;
}
footer{
width: 400px;
height: 200px;
background-color: rgba(0, 100, 100, 0.2);
border-right: none;
border-left: 0;
}
img {
border: 10px solid gold;
}
button {
border: 3px dotted red;
border: 0;
}
table {
width: 800px;
height: 300px;
border-collapse: collapse;
}
table td {
border: 1px solid blue;
}
</style>
<body>
<header></header>
<section></section>
<footer></footer>
<img src="../2.jpg" alt="" />
<button>我是按钮</button>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
盒子模型——内边距（padding）
- 内边距：内容与边框之间的距离
- 内边距的特点：
- 内边距也会影响盒子的尺寸
- 综合设置
- 四个值 上 右 下 左
- 三个值 上 左右 下
- 两个值 上下 左右
- 一个值 上下左右
- 所有的元素都能设置内边距
- 一些元素有默认的内边距 例如:
ul li
- 清除默认内边距
<style>
*{
padding:0;
}
</style>
<style>
.main{
width: 400px;
height: 300px;
border: 11px solid pink;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 50px;
padding: 10px 40px 60px 100px;
padding: 10px 50px 100px;
padding: 10px 100px;
padding: 100px;
}
button{
padding:50px;
}
b{
padding:50px;
}
</style>
<body>
<section class="main">
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</section>
<button></button>
<b>我是行内元素</b>
</body>
盒子模型——外边距（margin）
<style>
*{
margin:0;
}
</style>
- 外边距的特点：
- 外边距不会影响盒子的尺寸
- 一些元素有默认的外边距 ，一般通过通配符选择器清除所有的外边距
- 行内元素垂直方向设置外边距无效
- 外边距不会影响盒子的尺寸
- 外边距实现盒子的居中
margin：0 auto;- 给谁加
margin：0 auto; 谁就居中 - 相对于父元素的宽度水平居中
- 实现盒子居中的充分必要条件
- 垂直元素的外边距合并（塌陷）
- 上下两个相邻的元素，如果上边的元素有下外边距，下边的元素有上外边距，则两个元素之间的垂直距离并不是两者的和，而是两者中的最大值
- 嵌套元素的外边距合并（塌陷）：
- 嵌套的两个元素，如果父元素没有上边框且没有上内边距，则子元素的上外边距就是距离外边元素的距离；则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者
- 如何解决嵌套元素的外边距合并
- 给父元素添加上边框
- 给父元素添加上内边距
- 给父元素添加
overflow:hidden
<style>
}
#box1,
#box2 {
width: 400px;
height: 300px;
}
#box1 {
background-color: red;
margin-top: 20px;
margin-bottom: 50px;
margin-left: 100px;
margin-right: 100px;
margin: 10px 40px 80px 120px;
margin: 10px 40px 80px;
margin: 10px 40px;
margin: 140px;
}
img {
margin: 30px;
}
span{
margin:100px;
}
.parent {
width: 1000px;
height: 500px;
border: 20px solid black;
}
.child {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: blue;
}
.father {
overflow: hidden;
border: 20px solid black;
width: 600px;
height: 300px;
border-top: 0;
margin-top: 70px;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top: 90px;
}
</style>
<body>
<div id="box1"></div>
<div id="box2"></div>
<h1>我是标题一</h1>
<p>我是段落</p>
<img src="./images/tv01.jpg" alt="">
<span>我是行内元素</span>
<div class="parent">
<div class="child"></div>
</div>
<button style="margin: 0 auto">我是按钮</button>
<section style="border: 10px solid green">我是区间标签</section>
<div class="father">
<div class="son"></div>
</div>
</body>