盒子模型
二.CSS-背景
盒子模型里包含
margin的传递一般是父子块元素之间,有margin-top传递,margin-bottom传递.
折叠: 指的是 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin.
它有两个兄弟块级元素之间的上下margin的折叠,也有父子块元素之间的margin折叠
上下会被撑起来,但是不占空间
box-sizing用来设置盒子模型中宽高的行为
content-box: padding、border都布置在width、height外边
border-box: padding、border都布置在width、height里边
务必下载!! 今日的代码和讲义 以及思维导图:【点击此链接下载 Day07.zip】
ul/ol
中只能存放li
, li
再存放其他元素, 默认样式等;div
;3
组常用的用来展示列表的元素
ol
、li
ul
、li
dl
、dt
、dd
ol – li
ol
( ordered list
)有序列表
,直接子元素只能是 li
li
(list item
)ul - li
ul
(unordered list
)li
(list item
)dl – dt - dd
definition list
)
dt
、dd
dt
( definition term
)
term
是项的意思, 列表中每一项的项目名dd
( definition description
)
dt
的描述、解释、补充dt
后面一般紧跟着 1
个或者多个 dd
table
tr
(table row)td
(table data)股票表格
border-collapse
CSS 属性是用来决定表格的边框是分开的还是合并的。
table { border-collapse: collapse; }
thead
tbody
tfoot
caption
th
跨多行或者多列来使用
;colspan
colspan
属性, 并且省略掉合并的td
;rowspan
rowspan
属性, 并且省略掉后面 tr
中的 td
;form
input
textarea
select
、option
button
label
input
元素input
元素有如下常见的属性:type
: input
的类型text
:文本输入框(明文输入)password
:文本输入框(密文输入)radio
:单选框checkbox
:复选框button
:按钮reset
:重置submit
:提交表单数据给服务器file
:文件上传readonly
:只读disabled
:禁用checked
:默认被选中type
为 radio
或 checkbox
时可用autofocus
:当页面加载时,自动聚焦name
:名字value
:取值type
类型的其他取值和 input
的其他属性, 查看文档:disabled
、checked
、readonly
、multiple
、autofocus
、selected
type=button
):使用value属性
设置按钮文字
type=reset
):重置它所属form
的所有表单元素(包括input
、textarea
、select
)
type=submit
):提交它所属form
的表单数据给服务器(包括input
、textarea
、select
)
label元素
一般跟input
配合使用,用来表示input的标题
labe
可以跟某个input绑定
,点击label
就可以激活对应的input变成选中
type类型
设置为 radio
变成 单选框:name值相同
的 radio
才具备单选功能type类型
设置为checkbox
变成多选框:同一种类型的checkbox
,name值要保持一致textarea
的常用属性:cols
:列数rows
:行数resize: none;
resize: horizontal;
resize: vertical;
resize: both;
option
是select
的子元素,一个option
代表一个选项select
常用属性multiple
:可以多选size
:显示多少项option
常用属性selected
:默认被选中form
通常作为表单元素的父元素:form
可以将整个表单作为一个整体来进行操作;form
常见的属性如下:action
提交表单数据的请求URL
method
get
和post
),默认是get
target
a元素的target
)Emmet
(前身为 Zen Coding
) 是一个能大幅度提高前端开发效率的一个工具.HTML
、CSS
代码, 如果手动来编写效果会非常低.VsCode内置
了 Emmet语法
,在后缀为.html/.css
中输入缩写后按 Tab/Enter键即会自动生成相应代码
>
(子代)和 +
(兄弟)*
(多个)和 ^
(上一级)()
(分组)id属性
、class属性
、普通属性
) {}
(内容)$
(数字):nth-child
:nth-child(1)
父元素
中的第1
个子元素
:nth-child(2n)
n
代表任意正整数
和0
2
、4
、6
、8
……个):nth-child(even)
同义:nth-child(2n + 1)
n
代表任意正整数
和0
1
、3
、5
、7
……个):nth-child(odd)
同义nth-child(-n + 2)
:nth-last-child( )
:nth-last-child()
的语法跟:nth-child()
类似,不同点是:nth-last-child()
从最后一个子元素开始往前计数:nth-last-child(1)
,代表倒数第一
个子元素:nth-last-child(-n + 2)
,代表最后2
个子元素:nth-of-type()
用法跟:nth-child()
类似:nth-of-type()
计数时只计算同种类型的元素:nth-last-of-type()
用法跟 :nth-of-type()
类似:nth-last-of-type()
从最后一个这种类型的子元素开始往前计数:nth-of-type( )
、:nth-last-of-type( )
:first-child
,等同于:nth-child(1)
:last-child
,等同于:nth-last-child(1)
:first-of-type
,等同于:nth-of-type(1)
:last-of-type
,等同于:nth-last-of-type(1)
:only-child
,是父元素中唯一的子元素:only-of-type
,是父元素中唯一的这种类型的子元素:root
,根元素,就是HTML元素:empty
代表里面完全空白的元素:not()
的格式是:not(x)
x
是一个简单选择器元素选择器
、通用选择器
、属性选择器
、类选择器
、id选择器
、伪类(除否定伪类)
:not(x)
表示 除x以外的元素