HTML+CSS复习第一天

浏览器内核+标签:

单行省略号

css 复制代码
white-space:nowrap
text-overflow:ellipsis
overflow:hidden

多行省略号:使用到浏览器内核:-webkit- 谷歌浏览器

css 复制代码
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 复制代码
<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

路径的几种方式

分为两种:相对路径 绝对路径 img标签内部的属性是以键值对的形式存在的

格式化标签 (成对存在的)

复制代码
 		<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获取焦点
相关推荐
会有钱的-_-2 分钟前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
LFly_ice30 分钟前
学习React-10-useTransition
前端·学习·react.js
咔咔一顿操作31 分钟前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
知识分享小能手35 分钟前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇41 分钟前
Nue.js深度解析:极简主义前端框架的革新实践
前端·node.js
小徐_233343 分钟前
uni-app 也能使用 App.vue?wot-starter 是这样实现的!
前端·uni-app
入秋1 小时前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
深圳外环高速1 小时前
企业微信和页面离开事件
前端
召摇1 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
哆啦A梦15881 小时前
uniapp分包实现
前端·vue.js·uni-app·vue3