CSS三大特性与盒子模型
一.CSS三大特性以及五彩导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五彩导航</title>
<style>
body {
color: pink;
font: 12px/1.5 'Microsoft YaHei';
/*字体大小与行高操作继承*/
/*font: 12px/24px 'Microsoft YaHei';*/
}
div {
/*子元素继承了父元素body的行高 行高为1.5*/
/*这个1.5是指当前元素文字大小font-size的1.5倍 此时14*1.5=21*/
font-size: 14px;
}
.nav a{
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
text-decoration: none;
color: greenyellow;
text-align: center;
/* 行高与盒子高度可以进行调整 */
}
.nav a {
background-color: deeppink;
}
.nav .a1:hover{
/* 我想加背景图片可是阿里iconfont网站进不去公司限制 以及加个背景图片平铺不重复 */
background-color: aqua;
}
.nav .a2:hover {
background-color: #8aff4b;
}
.nav .a3:hover {
background-color: #b9ffa7;
}
三大特性以及五彩导航栏
.nav .a4:hover {
background-color: #ff49d6;
}
.nav .a5:hover {
background-color: #ff3d29;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="a1">晴天</a>
<a href="#" class="a2">阴天</a>
<a href="#" class="a3">下雨</a>
<a href="#" class="a4">浪天</a>三大特性以及五彩导航栏
<a href="#" class="a5">彩带</a>
</div>
<h3>css三大特性</h3>
<p>层叠性：相同选择器样式重叠就会覆盖</p>
<p>继承性：子标签继承父标签的样式 主要是继承文字相关的样式以及颜色 行高的继承性</p>
<p>优先级：
选择器权重的问题：
继承或* 0,0,0,0
元素选择器0,0,0,1
类选择器/伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式style='' 1,0,0,0
!import无穷大
</p>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
</body>
</html>
二. 边框Border与padding的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框border与内边距padding</title>
<style>
div {
width: 200px;
height: 100px;
/*border-width: 5px;*/
/*边框实线*/
/*border-style: solid;*/
/*边框虚线*/
/*border-style: dashed;*/
/*边框点线框*/
/*border-style: dotted;*/
/*border-color: lime;*/
/*复合写法*/
border: 5px solid red ;
/*上下左右边框调整*/
/*border-bottom: 1px solid red;*/
/*border-top: 2px solid royalblue;*/
font-size: 15px;
/*text-align: center;*/
/*控制相邻单元格边框合并在一起*/
/*border-collapse: collapse;*/
/*内边距的用法*/
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*后边跟多个值是不同的的结果 分别可以跟1,2,3,4个*/
padding: 20px;
}
</style>
</head>
<body>
<div>
margin外边距 border边框 padding内边距 content内容
会影响盒子的大小的 可以减去那么就可以固定盒子的大小
</div>
</body>
</html>
三.margin与Ps的使用技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距margin</title>
<style>
* {
/*清楚内外边距*/
padding: 0;
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: deeppink;
}
.one{
margin-bottom: 20px;
}
.two {
/*也可以是四个参数 跟padding参数一样的*/
margin: 50px;
}
.three {
/*上下100px间距 左右居中显示*/
margin: 100px auto;
/*margin: 0 auto;*/
}
.daMao, .erMao {
height: 60px;
width: 100px;
background-color: greenyellow;
}
.daMao {
margin-bottom: 100px;
}
.erMao {
/*两盒子最终外边距还是200px 合并选择其中一个较大的值*/
margin-top: 200px;
}
.son {
height: 100px;
width: 100px;
background-color: pink;
margin-top: 50px;
}
.father {
/*
解决垂直外边距的塌陷方案
1.给父级标签加个border
2.给父级标签加个padding
3.给父级标签加个overflow: hidden; 推荐使用
*/
height: 200px;
width: 200px;
background-color: deeppink;
margin-top: 400px;
/*border: 1px solid green;*/
/*padding: 1px 0;*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div>块级元素盒子要水平居中：1.盒子设定高度2.盒子左右外边距设置成auto</div>
<p><span>行内元素或者行内块元素要水平居中给父元素加text-align: center即可</span></p>
<p>外边距合并-相邻块级元素元素垂直外边距合并</p>
<div class="daMao"></div>
<div class="erMao"></div>
<p>嵌套块元素垂直外边距的塌陷</p>
<div class="father">
<div class="son"></div>
</div>
<p>Ps的使用</p>
<p>截图软件截图然后打开Ps软件此时文件-->打开</p>
<p>ctrl+r：打开标尺 或者视图-->标尺</p>
<p>右击标尺 把标尺单位改为像素</p>
<p>ctrl+放大视图 ctrl-缩小视图</p>
<p>按住空格键 可以拖动ps图</p>
<p>用选区拖动可以测量大小</p>
<p>ctrl+d可以撤销选区</p>
<p>还有个取色</p>
</body>
</html>
了解更多请点击
浙公网安备 33010602011771号