CSS显示模式
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显示模式的更多相关文章
- CSS【06】:CSS显示模式
div和Span标签 作用:一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; background: red ...
- CSS的显示模式
div与span div与span有什么区别 div单独占一行,span不会单独占一行 div是容器级的标签,而span是一个文本级的标签 容器级的标签有:div , h , ul , ol , dl ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- 前端学习笔记之CSS属性设置
CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...
- 前端基础-CSS的属性相关设置
一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述 normal 默认值,标准粗细 ...
- HTML连载30-CSS显示模式&模式转换
一.CSS显示模式 1.在HTML中HTML将所有的标签分为两类,分别是容器类和文本级.在CSS中CSS也将所有的标签分为两类,分别是块级元素和行内元素 2.什么是块级元素呢?什么是行内元素? ( ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- 人生苦短,我用Python——博客目录
计算机基础 计算机硬件基础知识 操作系统基础 Python基础 Windows环境下Python2和Python3的安装 交互式环境与变量的使用 简单介绍Python基本数据类型及程序交互 基本运算符 ...
- python 之 前端开发(盒子模型、页面布局、浮动、定位、z-index、overflow溢出)
11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如 ...
随机推荐
- python 提取目录中特定类型的文件
python使用‘os’和‘re’模块提取目录中特定类型的文件,这两个模都是安装python自带的,所以不需要安装. 思路: 使用os库lilstdir获取文件夹中的所有文件名,然后带上文件夹路径组合 ...
- UNTIY Canvas
一.Canvas 组件 Render Mode(渲染模式) (1)Screen Space-Overlay:2D UI,始终显示在屏幕最前方,适合制作HP,MP等(相当于GUI) (2)Screen ...
- Android笔记(七十三) Android权限问题整理 非常全面
Android权限系统非常庞大,我们在Android系统中做任何操作都需要首先获取Android系统权限,本文记录了所有的Android权限问题,整理一下分享给大家. 访问登记属性 android.p ...
- Spring Boot文档
本文来自于springboot官方文档 地址:https://docs.spring.io/spring-boot/docs/current/reference/html/ Spring Boot参考 ...
- 浅谈OpenStack与虚拟机的区别与联系
很多不太明白OpenStack与虚拟机之间的区别,下面以KVM为例,给大家讲一下他们的区别和联系 OpenStack:开源管理项目OpenStack是一个旨在为公共及私有云的建设与管理提供软件的开源项 ...
- Django之路——7 django与ajax
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...
- python多线程扫描爆破网站服务器思路【笔记】
这个扫描是概率问题,是需要字典的,以下代码是作为参考,字典可以去网上下载,我就不提供,我提供的是思路! #!/usr/bin/env python # coding=utf-8 from IPy ...
- *JavaScript标准参考教程 - 阮一峰
参考 页向对象编程的模式(继承&模块化)
- Python3和Python2中 int 和 long的区别?
int(符号整数):通常被称为是整数或整数,没有小数点的正或负整数: long(长整数):无限大小的整数,这样写整数和一个大写或小写的L.
- Kafka、ActiveMQ、RabbitMQ、RocketMQ区别
1.区别: Kafka和RocketMQ的区别: 1.两者对于消息的单机吞吐量.时效性.可用性.消息可靠性都差不多,其中时效性就是消息延迟都在ms级,kafka吞吐量会更大. 2.功能支持方面:Kaf ...