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

相关文章

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa