CSS重温笔记

别急别急！我马上就来了！

导航

侧边栏

CSS重温笔记

作者：北熙宝宝@Hikurn_Xi时间：2022-08-07 17:35:06

一.基础

CSS的三种形式

内嵌式

<head>
	<style>
	</style>
</head>

外链式

<head>
	<link rel="stylesheet" href="" />
</head>

行内式

<div style=""></div>

选择器有3种

类选择器：

.one ，这里第一个不能用数字或者是“-”开头，多个类名用空格分开，比如

class="A B"

ID选择器：

#one ID选择器主要用来配合JS来找标签用的，在行内用id=“one”来实现，注意，这个id名字不能重复，在页面中是唯一的（否则js中出错概率很高。）

通配符选择器：

适用于全局属性，比如我们常见的

*{
margin:0
}

关于字体相关的

font-size字体相关的大小，一般是数字+px
font-weight字体的粗细，有2种形式，一种是英文（normal和bold），一种是直接用数字（400就是正常的normal，数字区间是1-900）
font-style字体是否倾斜，有2种形式，一种是normal正常，一种是italic表示倾斜。
font-family表示字体，可以这里写多个方便展示，如果存在就默认用第一个，没有就一次往后取用。
text-indent表示段落前面空字，可以用数字px也可以用数字em(推荐用em，em是表示当前font-size大小)
text-align表示文字的位置（当然他也可以用于文本、span、a、img、input上面），有3个情况，left、right、center
text-decoration字体修饰，有4个情况，常用的是underline（下划线）、none（没有装饰线），不常用的有line-through（删除线）、overline（上划线）
line-height行高（上间距+字高+下间距），一般可以用数字+px 和 位数（font-size）的数值
我们也可以将这些关于font的写在一起，格式是font：style weight size/line-height family（注意，这几个不可换顺序）

margin相关，后面可以接4个，写四个就是上右下左，写三个就是上右下（左边取右边的等值），写2个就是上下+左右，写1个就是全部都取

二.进阶(UPUP)

几个选择器

div p{}; 后代选择器
div>p{};子代选择器
div,p{};并集选择器
p.box{};交集选择器
:hover{}伪装选择器（鼠标悬浮）

背景相关的

background-color:red;背景颜色
background-image:url('');背景图片
background-repeat:repeat/no-repeat/repeat-x/repeat-y;背景平铺否（平/不/沿X去平铺/沿Y去平铺）
background-position:left/right/center/top/center/bottom.....;背景的位置

这里需要注意，我们插入图片的时候，直接用img标签，不用css的效果实际就是图片的完整显示效果，用div包裹的话取决于div的大小。

我们也可以background参数连写，遵循：

background:color image repeat position 格式不分先后顺序

元素显示模式

display:block;          块（用的多）
display:inline-block;   行块（用的多）
display:inline;         行内

特别注意，我们在标签元素嵌套的时候：

1.P中不要嵌套div、p、h块级别；

2.a中不能嵌套a

CSS特性：

1.继承性（文字的控制属性都可以继承的）

特殊情况：【简称：我有我就不会要你的】

1.a标签的color会继承失效；

2.h标签中的font-size会继承失效

2.层叠性

都作用在不同的样式上面（叠加）

都作用在相同的样式上面（谁后面听谁的）

3.优先级

顺序原则上是：

继承<通配符<标签<类<ID<行内<!important

（简称：谁的范围越广，谁的优先级越低）

！important一般开发中很少用

他不能提升继承的优先级。

计算原则：

（0,0,0,0），行内/ID/类/标签，这个比较的顺序不可改变

如果都一样，则样式谁在下面听谁的。

如果都是继承，继承中优先级谁高听谁的。

盒子模型：

content内容、padding内边距；border边框线；margin盒间距

border：10px solid red; 像素 线条种类 颜色（不分先后顺序的）

线条种类有：solid实线、dashed虚线、dotted点线

盒子模型自动计算边距使用的代码（适用于各项边距数值都有，又懒得去挨个计算的）

box-sizing:border-box

清楚浏览器默认的样式我们用：（常用代码，基本cv即可）

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

解决塌陷现象我们用

overflow:hidden

伪元素（一般用在装饰性元素上面）

::before
::after

注意：

1.这个必须有content属性才能生效

2.这个需要找父级去创建子级的标签

浮动

float

控制几个一起

right li:nth-child(n){
	
}

清除浮动：

1.给父级增加高度标签；

2.给父级增加块元素，在块元素中设置clear，属性为both

3.单伪（一般情况cv即可）：

clearfix::after{
	content:"";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;(为了兼容浏览器，建议加上，同时也可以隐藏伪装)
}

4.双伪（一般情况cv即可，实际场景多用这个）

clearfix::before
clearfix::after{
	content:"";
	display:table;
}
clearfix:after{
	clear:both;
}

5.overflow属性为hidden

网页布局是由标准流、浮动、定位配合完成的。

定位

postion

方式：设定属性名position，可以为static（静态）、relative（相对的）、absolute（绝对），fixed（固定）

RSS订阅：全站订阅|订阅博文|订阅推文