div和span标签

1.容器级的标签中可以嵌套其他所有的标签(div->一般用于配合CSS完成网页的基本布局、h、ul、ol、dl、li、dt、dd......),文本级的标签中只能嵌套文字/超链接/图片(span->一般用于配合CSS修改网页的一些局部信息、p、buis、strong、em、ins、del......)。
2.注意点:在企业开发中一般情况下要嵌套都是嵌套在div中,或者按照组标签来嵌套。

CSS元素显示模式

1.在HTML中HTML将所有的标签分为两类,分别是容器级和文本级、在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内块元素。
2.块级元素:
1)会独占一行。
2) 所有的容器级都是块级元素。
3) 如果没有设置宽度,那么默认和父元素一样宽,如果设置了宽高,那么就按照设置的来显示。
3.行内块元素:
1)行内块元素不会独占一行。
2)文本级除了p(p是块级元素)都是行内块元素。
3)如果没有设置宽高,那么默认和内容一样宽,行内元素是不可以设置宽度和高度的。
4.行内块级元素:既不独占一行,又能设置宽度和高度。

CSS显示模式转换

1.如何转换CSS元素的显示模式?
设置元素的display属性,取值:block --> 块级、inline --> 行内、inline-block --> 行内块。

 
 
 
 

CSS显示模式的更多相关文章

  1. CSS【06】:CSS显示模式

    div和Span标签 作用:一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; background: red ...

  2. CSS的显示模式

    div与span div与span有什么区别 div单独占一行,span不会单独占一行 div是容器级的标签,而span是一个文本级的标签 容器级的标签有:div , h , ul , ol , dl ...

  3. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  4. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  5. 前端基础-CSS的属性相关设置

    一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述   normal 默认值,标准粗细 ...

  6. HTML连载30-CSS显示模式&模式转换

    一.CSS显示模式​ 1.在HTML中HTML将所有的标签分为两类,分别是容器类和文本级.在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 2.什么是块级元素呢?什么是行内元素​? ( ...

  7. [CSS属性设置,盒子模型,网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  8. 人生苦短,我用Python——博客目录

    计算机基础 计算机硬件基础知识 操作系统基础 Python基础 Windows环境下Python2和Python3的安装 交互式环境与变量的使用 简单介绍Python基本数据类型及程序交互 基本运算符 ...

  9. python 之 前端开发(盒子模型、页面布局、浮动、定位、z-index、overflow溢出)

    11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如 ...

随机推荐

  1. UCOSII软件定时器

    API函数 //创建 OS_TMR *OSTmrCreate (INT32U dly, INT32U period, INT8U opt, OS_TMR_CALLBACK callback, void ...

  2. sublime的package control的中文镜像

    参加: http://packagecontrol.cn/installation

  3. python 笔记一

    1. is 和 ==区别 is 判断是否是一个ID(内存中的数据是否是同一个), == 判断内容是否一致. 2.python 常量池包括 1.短整型的-5~256 2.字符串的数字.大小写字母随意组合 ...

  4. redis被攻击,怎么预防

    今天,自己的redis服务器被黑客攻击了,数据全部被删除 从图中可以看到,在db0中多了一个crackit,他就是罪魁祸首,他的值就是ssh无密码连接时需要的authorized_keys. 我们被攻 ...

  5. 使用awstats分析nginx日志

    1.awstats介绍 本文主要是记录centos6.5下安装配置awstats,并统计nginx访问日志 1.1 awstats介绍 awstats是一款日志统计工具,它使用Perl语言编写,可统计 ...

  6. 程序员常用的3大Web安全漏洞防御解决方案:XSS、CSRF及SQL注入(图文详解)

    https://blog.csdn.net/ChenRui_yz/article/details/86489067 随着互联网的普及,网络安全变得越来越重要,程序员需要掌握最基本的web安全防范,下面 ...

  7. Angular CLI behind the scenes, part one

    原文:https://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art074 --------------------------- ...

  8. P2577 [ZJOI2005]午餐[DP]

    题目描述 上午的训练结束了,THU ACM小组集体去吃午餐,他们一行N人来到了著名的十食堂.这里有两个打饭的窗口,每个窗口同一时刻只能给一个人打饭.由于每个人的口味(以及胃口)不同,所以他们要吃的菜各 ...

  9. 《代码敲不队》第九次团队作业:Beta冲刺第1天

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 代码敲不队 作业学习目标 (1)项目文档的完善与整理:(2)团队项目总结陈述PPT编制:(3)符合 ...

  10. 《发际线总是和我作对》第九次团队作业:【Beta】Scrum meeting1

    项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目冲刺 团队名称 发际线总和我作队 作业学习目标 (1)掌握软件黑盒测试技术:(2)掌握软件 ...