Web前端105天-day05-CSS

smile陌辰

已于 2022-11-16 19:41:04 修改

阅读量418

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

于 2022-11-09 19:05:25 首次发布

本文链接：https://blog.csdn.net/qq_52810836/article/details/127775364

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

day05

文章目录

前言

第五天学习开始

一、复习

css引用方式
内联
外部
内部
导入（非重点）

css选择器
标签
通用选择器 *
class
id
群组
后代，空格
子代，>
兄弟,~
相邻兄弟,+
伪类 ,状态:hover
伪元素,(:😃

css权重和优先级
权重值1标签
权重值10类
权重值100id

单位色值
px，%，vw，vh等
deg
ms，s
十六进制#rrggbb ，rgb()[之后用到的时候会扩展]

二、元素和尺寸

1.元素的性质

引言

div标签，它自占一行，包裹很多标签
a标签，行内标签，横着排列

块级元素
- 比如：div、p、h1~h6、ul、ol、li、table等
- 自占一行（默认父级元素的100%宽度）
- 可以设置宽度和高度
- 也可以包裹块级或行内元素
行内元素（内联元素）
- 比如：span、a、img、i、b、mark等
- 不自占一行，只能紧紧包着内容文字
- 设置宽度、高度无效
- 不能包裹块级元素
- 特例：a能包裹，是因为可以变为块使用
- 特例：img特殊，他是可替换元素，有自己的图片大小，可以设置宽度和高度
- 在行内元素中可以分出一种叫做“行内块”的类别，如：input、button，可以设置宽高

2.元素的显示属性【重点】

display: block; 块级显示
display: inline;行内显示
display: inline-block;行内块显示（布局不建议使用）
display:table;程表格显示
display:flex;弹性盒子的指定(后面学)

提前补充样式：

字体大小：font-size: 12px;

修饰线：text-decoration: none; none意思是不要修饰线，用的最多的情况就是把a的下划线给去掉

文本/行内在块级内居中，内联中的文字居中（水平）：text-align: center; center是居中的意思

让单行的文字有一个行高：line-height: 40px;

3.尺寸

宽度 width，值一般使用px单位
- 块级默认宽度是父元素的100%，不写宽度也有宽度
- 行内元素默认宽度是内容的宽度，设置宽度不生效
高度height，值一般使用px单位
- 块级元素没有默认高度，设置高度。没有设置高度，高度是被内容撑开的。内容包括文本和其他元素。
- 行内元素默认高度auto，指文本文字的高度，设置高度不生效

4.边框

/* 边框线 */
/* 边框的宽度 边框的样式 边框的颜色 */
border: 5px solid black;
/* 以上三个值是可以拆成三个属性的 */
border-width: 5px;
border-style: solid;
border-color: black;

边框的方向可以单独指定：

border-bottom 下边框
border-top 上边框
border-left 左边框
border-right 有边框

边框样式：

solid 实线
dashed 虚线
dotted 点状线
double 双线

三角形的写法【面试题】

.d3 {
/* 因为块级元素都是默认宽度父元素的100% 所以要给0*/
width: 0;
/* 先把四个边都设置为透明，边框宽度决定三角的大小 */
border: 90px solid transparent;
/* 单独设置需要的边角有颜色即可显示 */
border-top-color: red;
}

注意：当边框加入到元素中的时候，元素会变大，边框越粗扩大的就越大。边框线会让元素本来的面积增大。

5.内间距

内间距指元素的某个边与内部内容的距离。padding指内间距的属性，内间距的距离值不能为负值，值越大距离越大。

行内元素的上下内间距是无法渲染出来的。视觉效果出来了，布局效果完全没出来。

img、input、button等这些元素内间距是生效的。

方向有四个方向：

padding-top 上内间距
padding-right 右内间距
padding-bottom 下内间距
padding-left 左内间距

简写值数量和位置:（上右下左）

1个值,padding: 四个方向相同值;
2个值,padding: 上下左右;
3个值,padding: 上左右下;
4个值,padding: 上右下左;
注意：内间距的增大会导致整个元素的增大

使用场景：

让元素内部距离外层父级元素的边有点距离显得好看，主要为了美化
输入框的文字不要贴边显示
文本卡片不要贴边显示

6.外间距

外间距原指兄弟元素之间的距离。

方向：

margin-top 上外间距（自己移动位置）
margin-right 右外间距（挤开右侧的兄弟元素）
margin-bottom 下外间距（挤开下方的兄弟元素）
margin-left 左外间距（自己移动位置）

简写：

1个值, margin:四个方向相同;
2个值,margin: 上下左右;
3个值,margin: 上左右下;
4个值,margin: 上右下左;
特殊值auto，其实指的值margin:auto，每个方向都是auto，可以自动计算取中间值，让元素产生居中效果。在文档流中上下auto是不会自动取中的。margin：上下的值可以随意取 auto;达到块级元素水平居中的效果。
注意：
margin：auto只针对于块级元素中的块级元素水平居中，对文字和行内元素不生效。
行内元素，上下外间距也不生效。img、input、button等这些元素外间距是生效的。
margin外间距可以是负值，正值指增大距离，负值减小距离（可以凹进去）

7.外间距的重叠现象

在正常“文档流”中，上下排列的兄弟元素，外间距发生重叠时取最大值
在正常“文档流”中，父元素的第一个块级子元素（子的上边和父的上边重合），父元素的最后一个块级子元素（子的下边和父的下边重合），都会产生外间距重叠现象。
解决父子之间的外间距合并【重点】
- 不提倡，给父元素加一像素边框，让父元素和子元素的外边发生无法重合的情况，第一个子元素的上外间距就生效了
- 给父级元素一个上内间距，把第一个子元素向内挤（提倡）
- 给父元素设置溢出处理overflow: hidden/auto/scroll

8.盒子模型的计算

标准盒子模型
- 构成：内容（文本、内容、宽高）、内间距、边框、外间距
- 内容代表元素的宽高（所占的宽高，设置的宽高）
- 增加了内间距和边框之后整体会放大，占位会增加
- 以上盒子模型如果遇到因内间距和边框增加之后而放大，还要手动减少宽度和高度，来保持总占位宽度的平衡（手动重新计算宽度）
- box-sizing: content-box;
怪异盒模型
- 宽度=设置的宽度+内间距+边框
- 当设置了box-sizing: border-box;相当于浏览器会重新计算真实元素宽度，不需要手动减少宽度了
- 怪异盒模型不光会包括boder的宽度还会包括padding的距离，这时，宽度将被减的更小