div+css块元素和行内元素 盒子模型 盒子模型经典应用

2024-09-05 19:38

本文主要是介绍div+css块元素和行内元素 盒子模型 盒子模型经典应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、行内元素:

又叫内联元素;只能容纳文本或者其他内联元素,常见内联元素<span>、

<a>、<input type=””>

2、块元素:

         块元素一般都从新行打开,可以容纳文本,其他内联元素和其他块元素,即使内容不能占满一行,块元素也要把整行占满。常见块元素<div>、<p>、<h1>

3、块元素和行内元素的区别:

行内元素只占内容的宽度,而且他不会占据整行; 块元素不管内容多少都要占据整行,而且会换行显示 。

一些css属性对行内元素不生效,比如:margin,left,right,width,height. 建议尽可能使用块元素定位。(与浏览器类型版本有关)

4、块元素和行内元素相互转换:

         Display:inline;       将块元素转化为行内元素

         Display:block;       将行内元素转化为块元素

5、css文件的相互引用:

如果希望在a.css文件中使用到b.css c.css文件的选择器,可以通过@import指令来完成。         例:@import url(new.css);

如果希望在html或者PHP文件中引用某个xxx.css文件,也可以在<style>标签中通过@import指令来完成。例:

<style>@import url(第3讲.css); </style>

6、标准流和非标准流:

         流:HTML元素在网页中显示的顺序。

         标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示。

         非标准流:在html文件中,当某个元素脱离标准流(比如相对定位),那么他就处于非标准流。

 

 实例:

<!DOCTYPE html> 
<!-- <!DOCTYPE> 声明是文档中的第一个成分,位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。此处为HTML 5 规范 -->
<html>
<head>
<title>第三讲代码:</title>
<style>@import url(第3讲.css); </style>  <!-- 和下句意义相同,可替换下句 -->
<!-- <link rel="stylesheet" type="text/css" href="第3讲.css" > -->
</head>
<body><span>行内元素1</span>
<span>行内元素2</span>
<span>行内元素3</span><div class="s1">块元素1</div>
<div class="s1">块元素2</div>
<div class="s1">块元素3</div>
<div >块元素4</div>
<br><!-- div在布局中起到控制整个内容显示位置的作用,也就是用来定位的!-->
<b>2、盒子模型的浮动</b><br>
<div class="s2"><!--ul在布局中的作用是可以控制显示内容的多少-->
<ul class="s3">
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
<li><img src="asd.png"></li>
</ul>
</div></body>
</html>

第3讲.css

@import url(new.css);  /* 如果希望在a.css文件中使用到b.css  c.css文件的选择器,可以通过@import指令来完成 */.s3{width:500px;height:400px;border:2px solid yellow;  list-style-type:none;  /* 设置列表项所使用的预设标记,none表示无标记 *//* padding-left:-500px; */padding-left:2px;margin-top:5px;margin-left:5px;
}
new.css

span{border:2px solid red;display:block;   /* 将行内元素转化为块元素 */}div{border:2px solid green;/* display:inline;  */ /* 将块元素转化为行内元素 */
}
.s1{border:2px solid green;display:inline;  /* 将块元素转化为行内元素 */
}body{border:3px solid yellow;width:50%;height:50%;margin:0 auto;  /*  第一个用于上下,第二个用于左右,auto表示自动居中。  水平居中 */text-align:center; /*  body中所有元素居中 */
}.s2{border:2px solid red;}img{border:2px solid  red;}li img{width:50px;height:50px;padding:1px;	margin:2px;
}
li{float:left; /* 左浮动 */width:60px;height:60px;border:3px solid #600000;padding:1px;margin:2px;margin-top:5px;}


这篇关于div+css块元素和行内元素 盒子模型 盒子模型经典应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139880

相关文章

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

SpringShell命令行之交互式Shell应用开发方式

《SpringShell命令行之交互式Shell应用开发方式》本文将深入探讨SpringShell的核心特性、实现方式及应用场景,帮助开发者掌握这一强大工具,具有很好的参考价值,希望对大家有所帮助,如... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定