浏览器内核+标签:
单行省略号
white-space:nowrap
text-overflow:ellipsis
overflow:hidden
多行省略号:使用到浏览器内核:-webkit- 谷歌浏览器
overflow:hidden
text-overflow:ellipsis
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
行标签
a、em、span、i、strong、b
块级标签
div p h1-h6 ol<li(有序) ul<li(无序) dl<dt+dd(自定义列表) header foot form nav
行内块标签
img、button、input
三者之间的区别
行标签:不能设置宽度和高度,只能在一行进行显示,不可以设置margin,可以设置padding和border
块级标签:独占一行,可以设置宽高.padding margin border
行内块:在一行展示,能设置宽高,margin padding border
display:block 变为块级元素
display:inline 变为行内元素
display:inline-block 变为行内块元素
盒模型
普通盒模型:margin + border + padding + content
怪异盒模型:margin + content(border+padding+content)
普通盒模型变为怪异盒模型使用的是box-sizing:border-box
使用css制作三角形
<html>
<head>
<style>
div{
/*制作一个朝上的三角形 ,这里的宽度必须要写 否则不会生效*/
width:0
border-width:100px
border-style:solid
border-color:transparent transparent red transparent
}
</style>
</head>
<body>
div
</body>
<html>
margin塌陷问题的解决
塌陷现象分为两种:
一种是兄弟塌陷
另外一种是父子塌陷
塌陷出现的方式:当两个盒子同时出现margin-bottom和margin-top,本来两者之间的的距离是两个margin之间的和 ,而出现的是两者的最大值,这样就导致了塌陷的问题
解决方式:使用伪元素 使用overflow:hidden 使用padiing或者boder
盒子水平垂直居中的几种方式
1.使用flex布局 justify-content:center; align-items:center
2.使用定位
3.使用grid布局 display:grid justify-content:center; align-items:center
4.使用margin: 0 auto文章来源:https://www.toymoban.com/news/detail-568818.html
路径的几种方式
分为两种:相对路径 绝对路径 img标签内部的属性是以键值对的形式存在的文章来源地址https://www.toymoban.com/news/detail-568818.html
格式化标签 (成对存在的)
<b>标签</b>
<strong>标签</strong>
<em>标签</em>
<i>标签</i>
<del>标签</del>
<sub>标签</sub>
<sup>标签</sup>
<s>标签</s>
<ins>标签</ins>
<br />
<hr />
Css三大特性
1.继承性
2.层叠性
3.优先级
文本属性
text-indent首行缩进
text-align:center:水平居中
text-decoration: overline; 文本上方线条
text-decoration: line-through; 文件中间出现线条
text-decoration: underline; 文本下面出现线条
css复合选择器
后代选择器:使用空格分开
子集选择器:使用 >
并集选择器:使用,
伪类选择器:
链接伪类选择器:
a:link:选择所有被访问的链接
a:visited:选择所有已被访问
a:hover:选择鼠标指针位于其上的链接
a:active:选择活动链接(鼠标按下未弹起的链接)
input:focus:点击Input获取焦点
重点:敲黑板!!!
大家可以看下一篇文章继续学习
到了这里,关于HTML+CSS复习第一天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!