【CSS学习笔记3】css特性
1css三大特性
1.1层叠性：就近原则，最新定义的样式
1.2继承性：子标签集成父标签的样式，如文本和字号
行高的继承：不加单位指的是当前文字大小的倍数
body {font: 12px/1.5 'Microsoft YaHei';color: #be1313;}
div {/* 子元素继承父元素body的行高1.5 *//* 这个1.5是当前元素大小font-size的1.5倍 当前行高为21px*/font-size:14px;
}
p {/* 这个1.5是当前元素大小font-size的1.5倍 当前行高为24px */font-size: 16px;
}优先级：选择器相同-》层叠性，选择器不同根据选择器权重
权重分为四组 权重叠加时不会有组间进位
依次递增
div {
color:pink !important;
}
最后会显示这个样式
注意：
继承的权重是0 对于继承的标签我们用元素选择器修改样式 这个权重是1 最后会显示元素选择器的样式
不管父元素的权重多高，子元素得到的权重都是0，除非单独选定该元素设置样式
这里p是继承的但是继承的权重是0 p的权重是1 1>0所以最后p的颜色是绿色
#father {color:#be1313}
p {color:aqua ;
}
<div id="father"><p>你本身就很好</p>
</div>另外链接a在浏览器中默认是蓝色下划线央视， 想要修改必须单独指定
如：
a{
color:green;
}
在父选择器中设置无效
1.3权重叠加-复合选择器
复合选择器有权重叠加
ul {color:aliceblue}
ul li {/* 这里ul li两个选择的权重叠加了为0002 */color: aqua;
}
.nav li {/* 这里.nav li两个选择的权重叠加了为0011 */color: #be1313;
}.nav li {/* 这里.nav li两个选择的权重叠加了为0011 */color: #be1313;}
pink {/* 这里pink的权重为1 */color: #df5ccdf6;
}.nav .pink {/* 这里.nav .pink两个选择的权重叠加了为0020 */color: #df5ccdf6;
}
<ul class="nav"><li class="pink">大猪头</li><li>小猪头</li><li>猪头</li>
</ul>
组间不会有进位
0，0，0，10
四组为一个单位 不会有进位
练习题
想要给第一个小li单独添加颜色 可以利用权重叠加 给第一个li设置一个类 这样两个类的权重叠加是0020超过了类和元素的叠加0011
2.盒子模型
网页布局的三大核心：盒子模型、浮动和定位
网页布局的三个过程：用box 装好网页元素，利用css设置好盒子样式摆到相应位置（核心），在盒子里装内容
2.1盒子模型 box
css盒子用来封装周围的html元素 包括边框、外边距 内边距和实际内容
2.2border
1）
border-width:粗细 px单位
border-style: 记住三个 实线 、虚线、点线，solid、dashed、dotted
none : 无边框。与任何指定的border-width值无关 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边
border-color:
简写：border:1px solid red;//没有顺序要求
边框四边可以分别设置
border-top:1px solid red;
border-bottom:5px dashed red;
2）实例：200*200的盒子上边框为红色其余为蓝色
div {width:200px;height:200px;border:5px solid blue;border-top:5px solid red; /*层叠性、反过来不行*/}3）css实现细边框表格
使用css 来优化表格样式
设置表格细边框的关键
border-collapse: collapse; 绘制表格边框的方式控制相邻单元格的边框
4）边框影响表格尺寸
边框会为影响实际盒子的大小比如一个盒子外面加上10pc的边框 盒子的尺寸就会变大
如果想要最终的盒子不变大 需要改变盒子原本的尺寸使得盒子+边框满足最终的要求
5）内边距padding
内容与盒子的边距
padding：10px；
都要记住
padding也会影响盒子的大小 跟边框一样 可以修改width和height来调整，
但如果不特殊指定width和height的大小就不会撑大盒子 width=100%也算指定
父亲设置尺寸 孩子没有设置尺寸 给孩子加padding 不会撑大盒子
使用padding来灵活设置导航栏
.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {/* a属于行内元素 此时必须要转换 行内块元素 */display: inline-block;height: 41px;padding: 0 20px;//只要左右边距font-size: 12px;color: #4c4c4c;text-decoration: none;//不要下划线}.nav a:hover {//单独设置链接的颜色background-color: #eee;color: #ff8500;}
6）外边距margin
控制两个盒子之间的距离
可以让块级盒子实现水平居中：盒子必须指定宽度 盒子的左右边距都设置成auto
.header{ width:960px; margin:0 auto;}
margin：0 auto；
上、右、下、左
如果想让行内元素或者行内块元素水平居中 需要给其父元素添加text-align：center既可
对应嵌套关系（父子关系）的块元素，父子同时有外边距的情况下，父元素会他先较大的外边距值 而子元素不会有外边距 只对标准流是这样 浮动的不会有影响
三种解决方法：
给父元素加上边框border:1px sloid transparent、内边距padding:1px、添加overflow：hidden
7）清除内外边距
这是css设置格式的第一行
* {
padding:0;
margin:0;
}
注意：行内内元素为了照顾兼容性，尽量值设置作于内外边距不要上下的 但转化为块级和行内元素就可以
3.弹性盒子flexbox
父盒子控制子盒子如何排列
弹性盒子核心：
1.父控子 (亲父子）
父盒子控制子盒子如何排列布局
父盒子称为容器，子盒子称为项目
2.主轴和交叉轴（侧轴）
主轴默认水平方向，交叉轴默认垂直方向，可以更改
父容器属性
容器（父盒子）设置display:flex;可以让子盒子按照主轴方式排列。主轴默认水平
如果子元素有大小，则按照给定大小来显示。
如果子元素没有大小，则拉伸充满父容器。
若子元素总宽度超过容器宽度，默认会压缩子元素。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局-容器flex</title><style>* {margin: 0;padding: 0;}.box {/* 添加弹性布局 */display: flex;width: 500px;height: 100px;border: 1px solid red;}.box .item {width: 100px;/* height: 100px; */background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>justify-content定义主轴上的对齐方式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局-容器flex</title><style>* {margin: 0;padding: 0;}.box {/* 添加弹性布局 */display: flex;/* 主轴的对齐方式 *//* justify-content: flex-start; *//* justify-content: flex-end; *//* justify-content: center; *//* 两端对齐 *//* justify-content: space-between; *//* justify-content: space-around; *//* 平均分配 */justify-content: space-evenly;width: 500px;height: 100px;border: 1px solid red;margin: 20px 0 0 10px;}.box .item {width: 100px;height: 100px;background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>开发中大部分情况下子元素大小是设定的
align-items定义交叉轴上的对齐方式 垂直居中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局-容器flex</title><style>* {margin: 0;padding: 0;}.box {/* 添加弹性布局 */display: flex;/* 交叉轴的对齐方式 *//* align-items: flex-start; *//* align-items: flex-end; */align-items: center;/* align-items: stretch; *//* 主轴的对齐方式 */justify-content: space-between;width: 500px;height: 300px;border: 1px solid red;margin: 20px 0 0 10px;}.box .item {width: 100px;height: 100px;background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>flex-direcition改变主轴的方向，这种情况下主轴是竖向的 交叉轴是横向的
flex-wrap 自动换行
之前的盒子是设置的浮动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局-强制换行</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;/* 强制换行 */flex-wrap: wrap;/* 主轴对齐 */justify-content: space-between;width: 830px;border: 1px solid blue;margin: 30px auto;}.box .item {width: 200px;height: 300px;background-color: pink;border-radius: 10px;margin-bottom: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div></div>
</body></html>algin-content多行交叉轴对齐
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局-多行交叉轴对齐</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;/* 强制换行 */flex-wrap: wrap;/* 主轴对齐 */justify-content: space-between;/* 多行交叉轴对齐 *//* align-content: start; *//* align-content: end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; */align-content: space-evenly;width: 830px;height: 500px;border: 1px solid red;margin: 30px auto;}.box .item {width: 200px;height: 150px;background-color: pink;border-radius: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div>
</body></html>子盒子属性
控制自身的尺寸、顺序或对齐方式
实现弹性布局 比如浏览器放大缩小 可以伸缩盒子的大小
语法：flex：1；除了空隙之外的剩余空间占一份，并且可以伸缩盒子的大小 数字表示剩余空间所占份数 每个小盒子占父盒子的几份 父盒子的份数取决于子盒子flex的份数之和
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex项目伸缩尺寸</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;gap: 10px;/* justify-content: space-between; */width: 80%;border: 1px solid blue;margin: 0 auto;}.box .item {/* flex要写到 小盒子身上 优先级比 width 和 height高 *//* flex 1 表示占1份 表示每个小盒子占父盒子的几份 */flex: 1;width: 80px;height: 100px;background-color: pink;/* margin-right: 10px; */}.box .item:nth-child(odd) {background-color: purple;}/* .box .item:nth-child(3) {flex: 2;} */</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>
gap间距：用于设置行与列之间的间隙 单行（盒子与盒子之间
语法：
gap:20px；行和列之间保持20像素间隙
gap:20 30px;行间距20 列间距30
注意：gap写道父元素中控制子元素的间距
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝多行弹性布局写法</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.w {/* 版心 */width: 80%;margin: 20px auto;}.box {display: flex;/* 自动换行 */flex-wrap: wrap;border: 1px solid red;/* 使得内部的盒子完全充满版心没有间隙 */margin-left: -8px;margin-right: -8px;}.box .item {/* width: 80px; *//* flex: 1; 每行 6个盒子100/6=16.666666*/flex: 0 0 16.666666%;height: 120px;/* background-color: pink; */margin-bottom: 16px;/* margin-right: 16px; *//* 每两个盒子之间间隔16px，如果用marginright来做最右边的盒子会掉下去 */padding: 0 8px;}.item .content {height: 100%;width: 100%;background-color: pink;}.footer {width: 80%;height: 120px;background-color: black;margin: 0 auto;}</style>
</head><body><div class="w"><!-- 在版心w中放盒子box 保证盒子在一定区域内并且可以缩放 --><div class="box"><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div><div class="item"><div class="content"></div></div></div></div><div class="footer"></div>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝多行弹性布局写法</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {display: flex;flex-wrap: wrap;width: 80%;border: 1px solid red;margin: 0 auto;}.box .item {flex: 1;width: 80px;height: 120px;background-color: pink;/* min-width: 16.666666667%;max-width: 16.666666667%; *//* 每个元素包含间隙在内占1/6 */min-width: calc(16.6666667% - 16px);max-width: calc(16.6666667% - 16px);margin: 0 8px 16px;}.footer {width: 80%;height: 120px;background-color: black;margin: 0 auto;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div><div class="item">14</div><div class="item">15</div><div class="item">16</div></div><div class="footer"></div>
</body></html>多行弹性布局之后会用网格布局gird实现
3综合案例
产品模块
