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(内容区域),如 ...
随机推荐
- LAMP环境搭建之编译安装指南(php-5.3.27.tar.gz)
测试环境:CentOS release 6.5 (Final) 软件安装:httpd-2.2.27.tar.gz mysql-5.1.72.tar.gz php-5.3.27.tar.gz 1 ...
- Flink 使用(一)——从kafka中读取数据写入到HBASE中
1.前言 本文是在<如何计算实时热门商品>[1]一文上做的扩展,仅在功能上验证了利用Flink消费Kafka数据,把处理后的数据写入到HBase的流程,其具体性能未做调优.此外,文中并未就 ...
- USB Accessory 模式
USB Accessory 模式USB附件模式允许用户连接专为Android设备设计的USB主机硬件.配件必须遵守Android配件开发套件文档中概述的Android附件协议.这使得无法充当USB主机 ...
- DTD学习
DTD 简介 文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构.DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. XML文件内部引用: 外部 ...
- zabbix-web界面显示中文
转载:https://www.cnblogs.com/miclesvic/p/6145171.html 1.确认zabbix是否开启了中文支持功能(/var/www/html/zabbix/inclu ...
- python基础之面试常问
目录 python相对其他语言有什么特点? python内存管理机制,gc机制的了解,gc回收三种算法. lambda函数 高级函数 map.reduce.filter.sorted等. 简述六种基本 ...
- Ffmpeg常用转码命令
H264视频转ts视频流 ffmpeg -i test.h264 -vcodec copy -f mpegts test.ts H264视频转mp4 ffmpeg -i test.h264 -vcod ...
- python算法与数据结构-选择排序算法(33)
一.选择排序的介绍 选择排序(Selection sort)是一种简单直观的排序算法.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素, ...
- 关于C3P0-mySQL关于url的细节问题
1.为url设置?useUnicode=true&characterEncoding=UTF-8 为了统一编码,我们会为数据库封装的实体类加上上面的那句话,但是C3P0数据库连接池是xml配置 ...
- Union-Find(并查集): Quick union算法
Quick union算法 Quick union: Java implementation Quick union 性能分析 在最坏的情况下,quick-union的find root操作cost( ...