这是我参与「第四届青训营 」笔记创作活动的第2天
页面中css使用方式
- 内联样式（行内样式）
<p style="color:red;font-size:30px">这里是红色的大字</p>
- 内部样式：通过style标签在页面内编写
<style>
* {
padding: 0;
margin: 0;
}
</style>
- 外部样式：通过link标签引入外部的css
<link ref="stylesheet" href="./style.css">
css 是如何工作的
css 优先级
1.优先级比较
!important>内联样式>ID 选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>通配符>继承>默认
2.权重越高声明样式的优先级越高
- 内联样式:权重为1000
- ID 选择器:权重为100
- 类,伪类和属性选择器:权重为10
- 标签选择器,伪元素选择器:权重为1
- 通用选择器（*），子选择器（>），和相邻同胞选择器（+）:权重为0
3.总结
当同一个元素有多个相同样式时，优先级才会有作用，应用优先级高的，优先级相同时，应用后声明的样式 code.juejin.cn/pen/7124952…
继承得到的样式的优先级是最低的；最近的祖先样式比其他祖先样式优先级高；"直接样式"比"祖先样式"优先级高。
CSS继承控制：inherit、initial和unset
<div style="color: red;">
我是红色
<!--将继承方式设置为inherit，于是使用祖先元素的颜色值-->
<div style="color: inherit;">我是继承父元素的颜色值</div>
<!-- 将继承方式设置为initial，表示使用color属性初始值（黑色）-->
<div style="color: initial;">我是使用的是初始值</div>
<!-- 将继承方式设置为unset，能继承的样式就是相当于设置inherit，不能继承的样式就相当于设置initial-->
<div style="color: unset;">相当于设置inherit 继承了父元素的颜色值</div>
</div>
内联元素与块级元素
1. 内联元素
- 不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化
- 不可以设置宽高
- 可以设置margin，padding，但只在水平方向有效。
2. 块状元素
- 单独占一行
- 可以设置宽高
- 可以设置margin，padding
3. 内联块状元素inline-block
- 不会单独占一行，和相邻的内联元素会排在同一行。
- 可以设置宽高
- 可以设置margin，padding
css 盒模型
标准盒子的盒子的四个区域
| 区域 | 说明 |
|---|---|
| 内容部分 | 由width和hight决定 |
| 内间距部分 | 由padding属性决定 |
| 边框部分 | 由border属性决定 |
| 外边距部分 | 由margin属性决定 |
1.标准盒子模型
盒子宽度=内容的宽度+左右内间距+左右边框的宽度
盒子高度=内容的高度+上下内间距+上下边框的宽度
内容宽度=width
内容的高度=height
<style>
#test1 {
box-sizing: content-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid black;
margin: 10px;
}
</style>
<div id="test1">
</div>
上图是一个div元素的标准盒子模型
宽=100px+10px*4
高=100px+10px*4
2.怪异盒子模型
盒子宽度=width
盒子高度=height
内容宽度=width-左右内间距-左右边框的宽度
内容的高度=height-上下内间距-上下边框的宽度
<style>
#test2 {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid black;
margin: 10px;
}
</style>
<div id="test2">
</div>
3.标准盒子模型和怪异盒子模型
子元素width设置百分比是相对于父元素的内容宽度
子元素hight设置百分比是相对于父元素的内容高度
子元素padding和margin设置百分比是相对于父元素的内容宽度
以上3点不论标准盒子还是怪异盒子模型都是一样的
标准盒子
- 内容宽度=width
- 内容的高度=height
怪异盒子
- 内容宽度=width-左右内间距-左右边框的宽度
- 内容的高度=height-上下内间距-上下边框的宽度
