CSS基础_view:first使用 css-CSDN博客

本文链接：https://blog.csdn.net/fyrrr/article/details/110268965

CSS代码书写位置

内部样式表

书写在style元素中

内联样式表，元素样式表

直接书写在元素的style属性中

外部样式表

将样式书写到独立的css文件中。

1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

一些常见的样式声明

color:red;/*字体颜色*/
backgroud-color:blue;/*背景颜色*/
font-weigth:bold;/*字体粗细*/
font-size:15px;/*字体大小*/
font-family:consolas;/*字体类型*/
font-style:italic;/*字体样式*/
text-decoration:solid;/*文本修饰*/
line-height:1em;/*行高*/
text-align:center;/*元素内部文字的水平排列方式*/
width:100px;/*宽度*/
height:100px;/*高度*/
letter-space:1em;/*文字间隙*/

选择器

帮助你精准的选择想要的元素

h1{
    color:red;
    background-color:lightblue;
    text-align: center;
}

CSS规则 = 选择器 + 声明块（出现在大括号里）
声明块中包含很多属性，每一个属性表达了某一种样式

简单选择器

ID选择器
元素选择器
类选择器
. +类名
通配符选择器
*，选中所有元素
属性选择器
根据属性名和属性值选择
伪类选择器
选中某些元素的某种状态
1）link: 超链接未访问时的状态
2）visited: 超链接访问过后的状态
3）hover: 鼠标悬停状态
4）active：激活状态，鼠标按下状态
爱恨法则：LOVE HATE
更多伪类选择器
1）first-child
选择第一个子元素
2）last-child
选择最后一个子元素
3）nth-child
选择第几个子元素
4）nth-of-type
选中指定的子元素中第几个某类型的元素

even：选中偶数，等同于2n
odd：选中奇数，等同于2n+1

元素名 + : + 伪类选择器

伪元素选择器
元素名 +: : + 伪元素选择器
1）first-letter：选中元素中第一个字母
2）first-line：选中元素中的第一行文字
3）selection：选中被用户框选的内容

选择器的组合

后代元素 —— 空格
子元素 —— >
相邻兄弟元素 —— +
后面出现的所有兄弟元素 —— ~

选择器的并列

选择器1 + , +选择器2 ……

层叠

不同的样式，多次应用于同一个元素（权重计算）

比较重要性

重要性从高到低

作者样式表中的!important样式
作者样式表中的普通样式
浏览器默认样式表中的样式

比较特殊性

选择器选中的范围越窄，越特殊
计算机通过选择器计算出一个4位数（x x x x）
千位：如果是内联样式，记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

比较源次序

代码书写靠后的胜出

盒模型

行盒（display:inline）

在页面中不换行。
盒子沿着内容延伸，不能设置宽高，可以通过调节字体大小、行高、字体类型来间接调节宽高。
内边距、边框、外边距只有水平方向有效，垂直方向上不会实际占据空间
浏览器默认样式表设置的块盒：容器元素、h1~h6、p

块盒（display:block）

在页面中独占一行
常见的行盒：span、a、img、video、audio

行块盒（display:inline-block）

不独占一行
盒模型中所有尺寸都有效

盒子的组成部分

在这里插入图片描述

content（内容盒）

width,height分别设置内容的宽高，此部分称为内容盒

padding（填充盒）

padding-top , padding-bottom , padding-left , padding-right
简写属性padding：上下左右
填充区 + 内容区 = 填充盒

border（边框）

边框 = 边框宽度 + 边框样式 + 边框颜色
border-width , border-style , border-color
填充区 + 内容区 + 边框 =边框盒
溢出处理：overflow，控制内容溢出边框盒后的处理方式
默认情况下，背景覆盖边框盒，可以通过background-clip进行修改

margin（外边距）

边框到其他盒子的距离
margin-top , margin-left , margin-right ,margin-bottom

常规流

常规流布局

所有元素默认下都属于常规流布局：及块盒独占一行，行盒水平依次排列
包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况盒子的包含块为其父元素的内容盒

块盒

每个块盒的总宽度必须刚好等于内容块的宽度，宽度的默认值为 auto
margin取值可以是 auto（将剩余空间吸收），默认值为 0 。width 比 margin 的吸收能力强。
若所有所有值计算完后，仍有剩余空间，则剩余空间由 margin-right 吸收
在常规流中，若想使块盒在其包含块中居中，可以定宽、然后左右 margin 设置为 auto
height 设置为 auto 表示高度适应内容
margin 设置为 auto 表示 0
width、padding、margin可取值为百分比，该百分比相对于包含块的宽度
包含块的高度不取决于子元素的高度，百分比相对于父元素高度

浮动

基本特点

属性符号 float

left：左浮动，元素靠上靠左
right：右浮动，元素靠上靠右
默认为 none

当一个元素浮动后 display 属性修改为 block，浮动元素的包含块为其父元素的内容盒

盒子尺寸

当宽度为 auto 时，宽度适应内容
当高度为 auto 时，高度适应内容
margin 为 auto 时，表示 0

盒子排列

浮动盒子在包含块中排列时，会避开常规流盒子
常规流块盒在包含块中排列时，无视浮动盒子
行盒在排列时，会避开浮动盒子

高度坍塌

原因：常规流盒子高度为自动，在计算时，无视浮动盒子
CSS属性clear：

none：默认值
left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方

高度坍塌解决方法

在高度坍塌的元素的父元素添加一个类样式clearfix

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

定位

基本特点

手动设置盒子的位置

position属性

static：默认值（不定位）

relative：相对定位

不会使元素脱离文档流，只让元素在原本的位置上进行偏移
通过 left 、right 、top 、bottom 调整位置（不会对别的盒子产生影响）

absolute：绝对定位

宽高为auto，适应内容
包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
display 属性为 block ，且不浮动

fixed：固定定位

与绝对定位相同，但其包含块固定为视口
display 属性为 block ，且不浮动
选择器

帮助你精准的选择想要的元素

简单选择器

ID选择器
元素选择器
类选择器
. +类名
通配符选择器
*，选中所有元素
属性选择器
根据属性名和属性值选择
伪类选择器
选中某些元素的某种状态
1）link: 超链接未访问时的状态
2）visited: 超链接访问过后的状态
3）hover: 鼠标悬停状态
4）active：激活状态，鼠标按下状态
爱恨法则：LOVE HATE
更多伪类选择器
1）first-child
选择第一个子元素
2）last-child
选择最后一个子元素
3）nth-child
选择第几个子元素
4）nth-of-type
选中指定的子元素中第几个某类型的元素

even：选中偶数，等同于2n
odd：选中奇数，等同于2n+1

元素名 + : + 伪类选择器