前端学习-元素显示模式

html元素一般分为块元素和行内元素两种类型

块元素:

自己独占一行
高度宽度内边距外边距都能自己设置
宽度默认是父元素的100%
大容器,可以放任何元素
文字类的元素内不能使用块级元素(p标签,h1~h6标签)

行内元素

相邻行内元素都在一行
宽度和高度不能设置
默认宽度就是本身内容的宽度
行内元素这个容器比块元素小,除了块都能放
链接里不能放链接
特殊情况a标签里可以放块元素,a需要转换

行内块元素

最常见的:img,input,td

可以设置宽度和高度(块的特点)
在一行上,但是中间会有空隙(行内特点)
默认宽度是内容宽度(行内特点)

前端学习-元素显示模式相关推荐

CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器和复合选择器,复合选择器是建立在基础选择器之 ...
3.【CSS复合选择器、元素显示模式display、背景background所有】简洁版小米侧边栏案例
本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! b站视频链接:https://www.bilibili.com/video/BV14J4114768. 笔记参考大佬:https:/ ...
WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一.基础班学习路线三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...
【前端学习之HTMLCSS】-- HTML第七篇 -- 图片元素与多媒体元素
[前端学习之HTML&CSS]-- HTML第七篇 – 图片元素与多媒体元素文章目录 [前端学习之HTML&CSS]-- HTML第七篇 -- 图片元素与多媒体元素前言图片元素 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
CSS学习笔记（3）【CSS元素显示模式以及背景设置】
CSS基础学习一.CSS元素的显示模式(了解) 在HTML中将所有标签分为容器级和文本级两类在CSS中将所有的标签分为块级元素和行内元素 1.什么是块级元素和行内元素? 块级元素会独占一行而行内元 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
前端学习笔记，加油！
一.HTML Day1-HTML: 1.浏览器内核(渲染引擎) 2.< !DOCTYPE>.lang.charset 3.标签 4.< div>和< span> 5 ...

前端学习-元素显示模式

块元素:

行内元素

行内块元素

前端学习-元素显示模式相关推荐

最新文章

热门文章