[Web 前端] 015 css 三种元素的介绍
1. 块元素，内联元素，内联块元素
- 元素就是标签
- 布局中常用的有三种标签
- 块元素
- 内联元素
- 内联块元素
1.1 块元素
- 也称为行元素
- 布局中常用的标签，如
- div、p、ul、li、h1~h6、dl、dt、dd 等等
- 在布局中
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度的 100%
- 盒子占据一行
- 即使设置了宽度，也一样独占一行
1.2 内联元素
- 也称为行内元素
- 布局中常用的标签，如
- a、span、em、b、strong、i 等等
- 在布局中
- 支持部分样式，如 margin 的左右值
- 不支持宽(width)高(heigh)属性
- 宽高由内容决定（撑开）
- 不独占一行
- 盒子并在一行
- 代码换行（指回车）会产生间距（1 个空格）
- 子元素是内联元素
- 父元素可以
- 用 text-align 属性设置子元素水平对齐方式
- 用 line-height 属性值设置垂直对齐方式
1.3 内联块元素
- 也称内块元素
- 是新增的元素类型
- 现有元素没有归于此类别的
- img 和 input 元素的行为类似这种元素，但是也归类于内联元素
- 在布局中
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素
- 父元素可以
- 用 text-align 属性设置子元素水平对齐方式
- 用 line-height 属性值设置子元素垂直对齐方式
2. 举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box">box</div>
内联元素<span>不不不</span>独占一行
input <input type="text" name=""> input
</body>
</html>
*{
width: 600px;
height: 100px;
}
.box{
/* 块级元素 */
background: orange;
margin: 20px;
padding: 20px;
text-align: center; /* 文字水平居中 */
line-height: 100px; /* 设置行高 */
}
span{
/* 内联元素:
1. 不支持宽(width)高(heigh)属性
2. 宽高由内容撑开
3. 不独占一行
4. 盒子并在一行
5. 代码换行（指回车）会产生间距（1 个空格）
6. 只支持部分样式
7. 支持 margin 的左右值 */
background-color: red;
margin: 20px;
padding: 20px;
background: yellow;
}
input{
/* 行内快元素
1. 支持所有的样式
2. 宽高属性默认由内容决定（撑开）
3. 不独占一行
4. 盒子并在一行
5. 代码换行（指回车）是会产生间距（1 个空格）
*/
width: 100px;
margin: 20px;
padding: 10px;
}
- 效果截图
参考：北京图灵学院的 Web 前端公开课
[Web 前端] 015 css 三种元素的介绍的更多相关文章
- [Web 前端] 006 css 三种页面引入的方法
1. 外链式 用法 step 1: 在 html 文档的 head 头部分写入下方这句话 <link rel="stylesheet" href="./xxx.cs ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- [Web 前端] 016 css 元素的转换
三种元素之间的转换 display 属性是用来设置元素的类型及隐藏的 常用的属性有 none 元素隐藏且不占位置 block 元素以块元素显示 inline 元素以内联元素显示 inline-bloc ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
随机推荐
- L3-015. 球队“食物链”
某国的足球联赛中有N支参赛球队,编号从1至N.联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场. 联赛战罢,结果已经尘埃落定.此时,联赛主席突发奇想,希望从中找出一条包含所有球队的“食物链 ...
- 【GDOI2016模拟4.22】总结
前言 早上,一进机房,发现所有人神情严肃,一股(\(da\))(\(ba\))场的气氛迎面扑来,我一下子意识到:nothing good! 这场比赛结果不是很好,50分: 第一题:感觉上是个神奇的匹配 ...
- css-按钮中有图片和文字，怎么才能让文字和图片都中？？
<div class="btn1 trans" > <img src="../../images/img/add.png"/> < ...
- springboot + 注解 + 拦截器 + JWT 实现角色权限控制
1.关于JWT,参考: (1)10分钟了解JSON Web令牌(JWT) (2)认识JWT (3)基于jwt的token验证 2.JWT的JAVA实现 Java中对JWT的支持可以考虑使用JJWT开源 ...
- Android环境配置之正式版AndroidStudio1.0
昨天看见 Android Studio 1.0 正式版本发布了:心里挺高兴的. 算是忠实用户了吧,从去年开发者大会一开始出现 AS 后就开始使用了:也是从那时开始就基本没有用过 Eclipse 了:一 ...
- #1127-JSP表单处理
JSP 表单处理 我们在浏览网页的时候,经常需要向服务器提交信息,并让后台程序处理.浏览器中使用 GET 和 POST 方法向服务器提交数据. GET 方法GET方法将请求的编码信息添加在网址后面,网 ...
- 大数据笔记（二）——Apache Hadoop的体系结构
一.分布式存储 NameNode(名称节点) 1.维护HDFS文件系统,是HDFS的主节点. 2.接收客户端的请求:上传.下载文件.创建目录等. 3.记录客户端操作的日志(edits文件),保存了HD ...
- How To Use the Widget Factory 使用widget factory创建插件
To start, we'll create a progress bar that just lets us set the progress once. 创建一个基于widget factory ...
- React-Native 之 GD （四）使用通知方式隐藏或显示TabBar
1.GDHalfHourHot.js 发送通知 /** * 近半小时热门 */ import React, { Component } from 'react'; import { StyleShe ...
- inode节点用尽处理
linux inode已满解决方法 原文 今天login server的一个网站,发现login后没有生成session.根据以往经验,一般是空间已满导致session文件生成失败. df -h Fi ...