WEB-前端学习day5
1.css的三大特性
层叠性、继承性、优先性
层叠性：
1.什么是样式冲突？
当同一个标签被多次设置同一样式的时候会发生样式冲突
2、什么是样式的层叠性？
当样式冲突的时候，只会有一个起作用，即样式的层叠，就近原则
继承性：
1、什么是样式的继承？
给父标签设置的样式，在子标签中也起作用
2、什么样式会有继承作用？
text- font- line- color
继承性，p继承div
行高的继承：
给父标签设置的行高，子标签的文本也会有该标签
优先级：
当样式冲突的时候，选择器的权重大则该选择器下面的样式起作用
!important：无穷大
标签行内样式：1,0,0,0
id选择器：0,1,0,0
类选择器：0,0,1,0
标签选择器：0,0,0,1
通配符或继承：0,0,0,0
css权重的叠加：
权重的叠加
2.盒子模型
1、盒子模型从外到内的顺序是什么？
从外到内：外边距、边框、内边距、内容
2、盒子的大小包括哪些？
边框、内边距、内容
border : border-width || border-style || border-color
3.边框简写： border: 1px solid red;
边框分开写法：border-top: 1px solid red
盒子模型边框
4.边框会影响盒子的实际大小
边框影响盒子实际大小
5.内边距：
padding: 上 右 下 左
内边距会影响盒子的实际大小
1、内边距的作用？
内边距可以拉开标签的内容和标签边缘的距离
内边距
盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容 盒子内容content盒子内容
3.padding应用-新浪导航栏
新浪导航
如图：
要注意
1.转换元素类型，将元素a进行转换为行内块元素，能设置行高并且能在一行显示！display: inline-block;
2.设置边框时记得设置边框的类型，如实线solid，否则不会显示出来！
4.盒子模型外边距margin
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
盒子模型之外边距margin
1
2
简写方式和padding完全一样
外边距典型应用：
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
auto自动
1、如何让一个块级标签在其父标签中水平居中？
如果一个块级标签没有设置宽度，那么默认的宽度和父标签保持一致，无居中的概念
如果一个块级标签有设置宽度，可以通过设置左右外边距为auto来让当前标签在父标签中水平居中
给行内元素和行内块元素的父标签设置text-align : center ;
2.外边距合并-相邻块元素垂直外边距
解决方案：尽量只给一个盒子添加 margin 值。
如：A :margin-top :200px; B:margin-bottom :200px;
若AB垂直分布，则他们的上下边只会为200px;
3.外边距合并-嵌套元素塌陷
解决方案：
1.为父元素定义上边框
2.为父元素定义上内边距
3.为父元素添加overflow:hiddent
4.清除内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
为什么要清除内外边距？
因为部分标签默认在浏览器中有内外边距，不利于布局，所以需要清除所有标签的内外边距
5.PS的基本操作
Ctrl+R：可以打开标尺
Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
按住空格键，鼠标可以变成小手，拖动 PS 视图
Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
6.综合案例
案例：产品模块
分析过程：
完整代码如下：
综合案例-产品模块
复习：
css的三大特性：层叠性、继承性、优先级
盒子模型的组成部分：外边距、边框、内边距、内容
把有宽度的块级标签水平居中：margin:0 auto
padding：10px 20px 30px; 四边的内边距分别是：
上边距10px 、右边距20px 、下边距30px 、左边距20px 、