北熙宝宝@Hikurn_Xi
2024-08-11 17:33
@广树：（╯‵□′）╯︵┴─┴
导航
遇见美好的明天，书写最棒的故事~
侧边栏
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（固定）
Powered by wikimoeBlog