css的书写位置+元素分类
1、css的书写位置
1》行内样式:
<span style="color:red;">haha</span>
2》内部样式
在style标签中
span{
color:red;
}
3》外部样式
<link href="" rel="stylesheet" type="text/css" />
2、元素分类
1、块级元素:block
特点:1》独占一行2》宽度高度可以设置3》如果不设置宽度,则宽度为父亲的100%4》不设置高度,高度为里面的内容自动撑开
例子:div p nav header section h1-h6
具有上下左右外边距和上下左右内边距
2、行内元素:inline
特点:1》可以并排显示在一行2》宽度高度不能设置,只能有里面的内容自动撑开
例子:span a em strong i b
没有上下内外边距,但有左右内内外边距
· 3、行内块元素:inline-blick
特点:1》元素可以并排2》高度宽度都可以自行设置3》默认的宽高是浏览器给的
例子:input img
3、对应元素属性的相互转化
display:
--block --inline-block --inline --none
css的书写位置+元素分类的更多相关文章
- CSS学习笔记之元素分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...
- 5.css背景以及书写位置
1.样式表书写位置 ◆内嵌式写法 <head> <style type=”text/css”> 样式表写法 </style> </head> 2.◆外链 ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- Web前端开发基础 第四课(CSS元素分类)
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- CSS元素分类及区别
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而&l ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- CSS权威指南学习笔记 —— HTML元素分类
HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- mysql 数据库 内容的增删改查
/*所有字段插入值*//*注意插入值数目要与字段值一致*/INSERT INTO student VALUES(1,'熊大','123','2019-10-18',1200);INSERT INTO ...
- 重磅发布: 阿里云WAF日志实时分析上线 (含视频)
摘要: 阿里云WAF与日志服务打通,对外开发Web访问与攻击日志.提供近实时的网站具体的日志自动采集存储.并提供基于日志服务的查询分析.报表报警.下游计算对接与投递的能力. 背景 Web攻击形势 互联 ...
- QT中QString与string的转化,解决中文乱码问题
在QT中,使用QString输出到控件进行显示时,经常会出现中文乱码,网上查了一圈,发现大部分都是针对QT4增加4条语句:</span> [cpp] view plain copy QTe ...
- csp-s模拟测试90
csp-s模拟测试90 考场发明$Spfa$祭. $T1$按照题意模拟,然后我就发现我死了.一气之下删掉了$priority$,拍了几下发现贼jb快而且还是对的就开心地交了.$T2$的差分状态定义很棒 ...
- MySql查询分页数据
MySql查询分页数据
- JS 二维数组
给一个数组元素,赋一个数组的值,那么,这个数组就是“二维数组”. 二维数组,就得用两层循环来实现.也就是说循环套循环. 二维数组的循环,与二维表格的循环一模一样. 二维数组的访问:数组名后跟多个连续的 ...
- URL类发送请求
import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import jav ...
- 牛客网NOIP赛前集训营-普及组(第七场)
链接:C 来源:牛客网 牛牛的同学给牛牛表演了一个读心术:牛牛先任意选定一个非负整数,然后进行N次操作:每次操作前,假设牛牛当前的数是a,那么这个操作可能是a = a + x, 或者a = a * x ...
- POJ 2318 /// 判断点与直线的位置关系
题目大意: n块玩具箱隔板 m个玩具落地点 给定玩具箱的左上和右下两个端点 接下来给定n块隔板的上点的x和下点的x(因为y就是玩具箱的上下边缘) 接下来给定m个玩具落地点 输出n+1个区域各有的玩具数 ...
- 13-8-return的高级使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...