侧边栏壁纸

css学习笔记

2023年08月12日 1.2k阅读 0评论 0点赞

css学习笔记

1.1块级元素

显示特点:
独占一行(一行只能显示一个)
宽度默认是父元素的宽度,搞多默认由内容撑开
可以设置宽高
代表标签:
div、p、h系列、ul/li、dl、dt、dd、form、hesder、nav、footer......

2.1行内元素

显示特点:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
代表标签:
a、span、b、u、i、s、strong、ins、em、del......

3.1行内块元素

显示特点:
一行可以显示多个
可以设置宽高
代表标签:
input、textarea、button、select....
特殊情况:img标签有行内块元素的特点,但是Chrome调试工具中显示的结果是linline

4.1元素显示模式转换

目的:
改变元素默认的显示特点,让元素符合布局要求
语法:
display:block 转换成块元素
display:inline-block 转换成行内块元素
display:inline 转换成行内元素
HTML嵌套规范注意点
块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等....
但是:p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签

css的特性

1.1继承性的介绍

特点:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
注意点:
可以通过调试工具判断样式是否可以继承
继承失效的特殊情况
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
a标签的color会继承失效
h系列标签的font-size会继承失效

2.1层叠性

特性:
给同一个标签设置不同的样式--->此时样式会层叠叠加-->会共同作用在标签上
给同一个标签设置相同的样式--->此时样式会层叠覆盖-->最终写在最后的样式会生效
注意点:
当样式冲突时,只有当选择器优先级相同是,才能通过层叠性判断结果

3.1优先级

特性:不同的选择器具有不同的优先级,优先级高德选择器样式会覆盖优先级低选择器样式
优先级公式:
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
!important写在属性值的后面,分号的前面!
!important不能提升继承的优先级,只要是继承优先级最低
实际开发中不建议使用!important

3.2权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)

比较规则:
先比较第一级数字,如果比较出来了,之后的统统不看
如果第一级数字相同,此时再去比较第二级数字
如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算)

注意点:!important如果不是继承,则权重最高,天下第一!
盒子模型

1.1盒子模型的介绍

盒子的概念
1.页面中的每个标签,都可以看做是一个“盒子”,通过盒子的视角更方便的进行布局

2.浏览器在渲染网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子
盒子模型

css中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域 (border)、外边距区域(margin)构成,这就是盒子模型

2.1内容的宽度和高度
作用:利用width和height属性默认设置是盒子内容区域的大小
属性:width/heigh
常见数值:数字+px

3.1边框(border)--连写形式
属性名:border
属性值:单个取值的连写,取值之间以空格隔开
如:border:10px solid red; border-top:10px solid red; (单独控制上边框)
solid:实线; dashed:虚线; dotted:点线
注意:border会撑大盒子尺寸

结构伪类选择器
作用与优势:
做用:根据元素在html中的结构关系查找元素
优势:减少对于HTML中类的依赖,有利于保持代码整洁
场景:常用于查找父级选择器中的子元素

选择器
E:first-child{} 匹配父元素中第一个子元素,并且是E元素
E:last-child{} 匹配父元素中最后一个子元素,并且是E元素
E:nth-child(n){} 匹配父元素中第N个子元素,并且是E元素
E:nth-last-child(n){} 匹配父元素中倒数第n个子元素,并且是E元素

伪元素
伪元素:一般页面中的非主体内容可以使用伪元素
区别:1. 元素:HTML设置的标签

 2. 伪元素:由css模拟出来的标签效果
 

种类:
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素

注意点:
必须设置content属性才能生效
伪元素默认是行内元素

ll7n5jtp.png

0

—— 评论区 ——

昵称
邮箱
网址
取消
舔狗日记