前端Day04_元素继承了父元素的padding-CSDN博客

本文链接：https://blog.csdn.net/weixin_54095131/article/details/123835889

CSS的三大特性
CSS有三个非常重要的三个特性：层叠性、继承性、优先级

层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
1. 样式冲突，遵循的原则是就近原则（后来居上），哪个样式离结构近，就执行哪个样式
2. 样式不冲突，不会层叠
继承性
现实中的继承：我们继承了父亲的姓
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业
恰当地使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color元素）
1. 行高的继承
```
body{
    font:12px/1.5 Microsoft Yahei;
}
```
  行高可以跟单位也可以不跟单位
  如果子元素没有设置行高，则会继承父元素的行高为1.5
  此时子元素的行高是：当前子元素的文字大小*1.5

优先级
当同一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性

选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=“”	1，0，0，0
！important 重要的	无穷大

!important就是在该选择器里面的属性后面加！important 比如

.nav{
    color:red!important;
}

优先级注意点：
1. 权重是有4组数字组成，但是不会有进位
2. 可以理解为类选择器永远大于元素选择器，id选择器用于大于类选择器，以此类推
3. 继承权重永远是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
4. 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
```
<style>
//下面那行的权重为0，0，0，1+0，0，0，1=0，0，0，2
    ul li{
    color:pink;
}
//下面权重为0，0，0，1
    li{
    color:green;
}
//下面权重为0，0，1，0+0，0，0，1=0，0，1，1    
    .nav li{
    color:red;
}
从上面三种权重来看，最后一种的权重最高所以执行最后一种的样式
</style>
```
  a:hover的权重为0，0，1，1

网页布局

盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面

网页布局过程：
1. 先准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

盒子模型组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

盒子里面的内容

border边框
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式和边框颜色
1. 语法：
```
border:border-width || border-style || border-color
```
  属性作用
  border-width 定义边框粗细，单位是px
  border-style 边框的样式
  border-color 边框颜色
2. 边框复合简写
```
border: 5px solid blud;
```
  没有顺序
3. 边框分开写法
```
border-top:5px solid green;
```
4. 表格的细线边框
  border-collapse:合并相邻的边框--属性值填collapse
5. 边框会影响盒子实际大小
  1. 测量盒子大小的时候，不量边框
  2. 如果测量的时候包含边框，则需要width/height减去边框宽度
content内容

padding内边距（盒子边框和里面内容之间的距离）

属性作用
padding-left 左页边距
padding-right 右页边距
padding-top 上页边距
padding-bottom 下页边距

padding简写

值的个数	表达意思
padding：5px	1个值，代表上下左右都有5像素内边距
padding:5px 10px;	2个值，代表上下5px，左右10px
padding:5px 10px 20px;	3个值，代表上5px，左右10px，下20px
padding:5px 10px 20px 30px;	4个值，上5px，右10px，下20px，左30px

padding也会影响盒子的实际大小
但是盒子本身没有指定width和height的情况下，padding不会影响盒子的指定大小

margin外边距（盒子和其他盒子之间的距离）
1. 属性作用
  margin-left 左外边距
  margin-right 右
  margin-top 上
  margin-bottom 下
  margin简写方式和padding一模一样
2. 外边距可以让块级盒子水平居中，但是必须满足两个条件：
  1. 盒子必须指定了宽度
  2. 盒子左右的外边距都设置为auto
```
.header{ width:960px; margin:0 auto;}
```
  3. 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可
3. 相邻块元素垂直外边距的合并
  当上下两个相邻的块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom和margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
  1. 解决办法：尽量只给一个盒子添加margin值
4. 嵌套块元素垂直外边距的塌陷
  对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
  1. 解决方案
    1. 可以为父元素定义上边框
    2. 可以为父元素定义上内边距
    3. 可以为父元素添加overflow：hidden
5. 清除内外边距
  网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一样，因此我们在布局前，首先要清楚下网页元素的内外边距
```
*{
padding:0;
margin:0;}
```
  注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了

去掉li前面的项目符号（小圆点）
```
list-style:none;
```

圆角边框
border-radius属性用于设置元素的外边框圆角
```
border-radius:length;
```
radius半径（圆的半径）原理：椭圆和边框的交集形成圆角效果
1. 参数值可以是百分数或者像素的形式
2. 如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
3. 如果是个矩形，设置为高度的一半就可以做圆形矩形
4. 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角和左下角

盒子阴影
我们可以使用box-shadow属性为盒子添加阴影

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影改为内部阴影

盒子阴影不占用空间

文字阴影

text-shadow:h-shadow v-shadow blur color

浮动

传统网页布局的三种方式

普通流
就是标签按照规定好默认方式排列
1. 块级元素会独占一行，从上向下顺序排列
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
浮动
1. 为什么需要浮动
  有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
  浮动最典型的应用：可以让多个块级元素一行内排列显示
2. 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
3. 什么是浮动
  float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘
```
选择器{float:属性值;}
```
  属性值描述
  none 元素不浮动（默认值）
  left 元素向左浮动
  right 元素向右浮动
4. 浮动的特性
  1. 浮动元素会脱离标准流
    1. 脱离标准普通流的控制（浮）移动到指定位置（动）
    2. 浮动的盒子不再保留原先的位置
  2. 浮动的元素会一行内显示并且元素顶部对齐
    浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多处的盒子会另起一行对齐
  3. 浮动的元素会具有行内块元素的特性
    1. 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
    2. 浮动的盒子中间是没有缝隙的，是紧挨在一起的
  4. 浮动元素经常和标准流父级搭配使用
    先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
  5. 浮动布局注意点
    1. 一个元素浮动了，理论上其余的兄弟元素也要浮动
      一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
    2. 为什么需要清除浮动？
      由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0的时候，就会影响下面的标准流盒子
      1. 清除浮动本质
        就是清除浮动元素造成的影响
        如果父盒子本身有高度，则不需要清除浮动
        清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
        
        选择器{clear：属性值；}
        
        属性值描述
        left 不允许左侧有浮动元素
        right 不允许右侧有浮动元素
        both 同时清除左右两侧浮动的影响
      2. 清除浮动方法
        
        额外标签法
        会在浮动元素末尾添加一个空的标签，例如<div style="clear:both"></div>，或者其他标签（如<br>等）
        新的元素必须是块级元素，不能是行内元素
        
        父级添加overflow属性
        可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
        
        父级添加after伪元素
        
        .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } .clearfix{ *zoom:1; }
        
        父级添加双伪元素
        
        .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; }

定位

为什么需要定位
1. 使得某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

定位模式
定位模式通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移
边偏移就是定位的盒子移动到最终位置，有top、bottom、left和right4个属性

边偏移属性	实例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：80px	底部偏移量
left	left：80px	左侧偏移量
right	right：80px	右侧偏移量

相对定位relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
1. 它是相对于自己原来位置来移动的（移动位置的时候参照点是自己原来的位置）
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
绝对定位absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行对齐
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原来的位置（脱标）
4. 子绝父相
  1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
  2. 父盒子需要加定位限制子盒子在父盒子内展示
  3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位
固定定位fixed
固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
1. 以浏览器的可视窗口为参照点移动元素
  1. 跟父元素没有任何关系
  2. 不随滚动条滚动而滚动
2. 固定定位不占有原来的位置（脱标）
3. 固定在版心右侧位置小技巧
  1. 让固定定位的盒子left：50%，走到浏览器可视区的一半位置
  2. 让那个固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置
粘性定位sticky
相对定位和固定定位的混合体
1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置
3. 必须添加top、left、right、bottom其中一个才有效
定位叠放顺序
在使用定位布局的时候，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后顺序
```
选择器{z-index:1;}
```
数值可以是正整数、附证书或0，数值越大，盒子越往上
定位特殊特性
1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
3. 脱标的盒子不会出发外边距塌陷
  浮动元素、绝对定位元素都不会出发外边距合并的问题
4. 绝对定位会完全压住盒子
  浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字
  但是绝对定位会压住下面的所有内容