盒子阴影和网页布局

news2025/1/12 23:36:54
  • 盒子阴影

  • box-shadow: 10px 10px 10px 4px rgba(0,0,0,.3);//最后一个是透明度
  • 传统网页布局的三种方式

    标准流

  • 就是按照规定好的默认方式排列

  • 1.块级元素:div、hr、p、h1~h2、ul、ol、dl、form、table

  • 行内元素会按照书顺序,从左到右顺序排列,碰到父元素边缘则自动换行

  • 常用元素:span、a、i、em、等

  • 标准流是最基础的布局方式

    浮动

  • 浮动典型的应用:可以让多个块级元素一行内排列显示

  • 网页布局的第一准则:多个块级元素纵向找标准流,多个块级元素横向排列找浮动

  • 浮动向左浮动

  • float:left;
  • 浮动特性(重难点)

  • 1.脱离标准普通流的控制(流)移动到指定位置(动),(俗称托标)

  • 2.浮动的盒子不在保留原先的位置

  • 当两个盒子给其中一个盒子浮动到我们跟前,另外的盒子就会代替他原先的位置

  • 如果盒子都设置了浮动,会按照属性值一行内显示并且顶端对齐排列

  • 注意:浮动的元素是相互靠在一起的(不会有缝隙),如果父类宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐

  • 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度

  • 在浮动下行内块元素给多少内容就多少多宽

  • 块级盒子没有设置宽度,默认宽度和父级一样宽,添加浮动后,大小根据内容来定

  • 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1061883.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1.2 数据模型

思维导图: 前言: **1.2.1 什么是模型** - **定义**:模型是对现实世界中某个对象特征的模拟和抽象。例如,一张地图、建筑设计沙盘或精致的航模飞机都可以视为具体的模型。 - **具体模型与现实生活**:具体模型可以很容…

剑指offer——JZ55 二叉树的深度 解题思路与具体代码【C++】

一、题目描述与要求 二叉树的深度_牛客题霸_牛客网 (nowcoder.com) 题目描述 输入一棵二叉树,求该树的深度。从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,最长路径的长度为树的深度,根节点的深度…

【简单了解一下红黑树】

文章目录 红黑树1.简介2.为什么需要红黑树?3.性质4. 红黑树的效率4.1 红黑树效率4.2 红黑树和AVL树的比较 5.AVL树 vs 红黑树5.1 AVL树5.2 红黑树5.3 如何选择 红黑树 1.简介 红黑树是一种自平衡的二叉查找树,是一种高效的查找树。它是由 Rudolf Bayer …

微信公众号开发与本地调试详细教程

在进行微信公众号开发时,本地调试是一个关键的步骤。本文将详细介绍如何进行微信公众号开发并在本地环境中进行调试。我们将以Nginx为例,演示如何配置虚拟主机,使用ngrok进行内网穿透,以及进行网页授权和JS SDK的测试。 1. 准备工…

Compose Canvas基础

Compose Canvas基础 前言Canvas是什么drawxxx()绘制方法drawCircle 画圆不填充颜色设置线条的宽度 drawRect 画矩形drawPoints 画点pointMode drawOval 画椭圆drawLine 画线drawRoundRect 画圆角矩形drawArc 绘制弧形或扇形useCenter drawPath 画自定义图形 总结 前言 阅读本文…

【C++ 学习 ㉕】- 万字详解 unordered_map 和 unordered_set(哈希表的查找和容器的模拟实现)

目录 一、unordered_map 的基本介绍 二、unordered_set 的基本介绍 三、相关练习 3.1 - 在长度 2N 的数组中找出重复 N 次的元素 3.2 - 存在重复元素 3.3 - 两句话中的不常见单词 四、哈希表的查找 4.1 - 哈希表的基本概念 4.2 - 哈希函数的构造方法 4.3 - 处理冲突的…

用go获取IPv4地址,WLAN的IPv4地址,本机公网IP地址详解

文章目录 获取IPv4地址获取WLAN的IPv4地址获取本机公网IP地址 获取IPv4地址 下面的代码会打印出本机所有的IPv4地址。这个方法可能会返回多个IP地址,因为一台机器可能有多个网络接口,每个接口可能有一个或多个IP地址。 package mainimport ("fmt&…

阿里云服务器地域和可用区查询表_地域可用区大全

阿里云服务器地域和可用区有哪些?阿里云服务器地域节点遍布全球29个地域、88个可用区,包括中国大陆、中国香港、日本、美国、新加坡、孟买、泰国、首尔、迪拜等地域,同一个地域下有多个可用区可以选择,阿里云服务器网分享2023新版…

批量剪辑技巧:视频去色处理,让色彩焕然一新!

你是否曾经遇到过这样的问题:大量视频需要处理,但色彩总是达不到你的要求?现在,我们将向你展示如何通过批量剪辑技巧,轻松去除视频原色,让色彩焕然一新! 首先,我们要进入【视频剪辑…

##***

本文涵盖了一种名为"快速编写论文,课设辅助器"的智能人工智能(AI)系统。该系统旨在提供高效的论文和课程设计撰写辅助功能。通过利用先进的自然语言处理和机器学习算法,该系统能够自动生成与特定主题相关的内容&#xf…

苹果mac电脑securecrt下载 附securecrt破解文件

SecureCRT for Mac是一款由VanDyke Software公司开发的终端仿真软件,专为Mac OS X系统设计,用于提供安全SSH、Telnet和其他协议的远程访问和管理。它适用于各种操作系统和设备,如Windows、Linux和UNIX等,为Mac用户提供了广泛的连接…

嵌入式学习笔记(46) NandFlash的结构

9.2.1 Nand的单元组织:block与page(大页Nand与小页Nand) (1)Nand的页和以前讲过的块设备(尤其是硬盘)的扇区是类似的。扇区最早在磁盘中是512字节,后来也有些高级硬盘扇区不是512字节,而是1024…

高中生自学Python,这里给大家一些建议

高一学业压力比较重,如果你还是选择自学Python,每天可以抽出一两个小时来学习的话,也是可以的。下面是我给你的5点建议: 找浅显易懂,例子比较好的教程,从头到尾看下去。不要看很多本,专注于一本…

C/C++:[Error] ld returned 1 exit status 解决方案

好久没用了,今天写了会儿代码,各种BUg,emmmmmm 出现了很多次以下这个问题:[Error] ld returned 1 exit status 可能问题&解决方式: 常见的语法/单词拼写错误:常见的Main,printf,scanf等拼写错误 函数名或者声明有…

行与走,放慢自己,思考回顾。

为什么要出去行与走? 1、出去行与走看到祖国的大美风景,可以更深刻的认识到我们祖国的美好。 2、可以放空心情,排除掉积攒在写字楼内的方格子里面的郁闷和烦恼。 3、可以为自己的身体和心灵找一个安静和清澈净土。 4、在行和走之间&#…

GB28181学习(六)——实时视音频点播(数据传输部分)

GB28181系列文章: 总述:https://blog.csdn.net/www_dong/article/details/132515446 注册与注销:https://blog.csdn.net/www_dong/article/details/132654525 心跳保活:https://blog.csdn.net/www_dong/article/details/132796…

SpringCloud-Bus

接上文 SpringCloud-消息组件 1 注册Bus Bus需要基于一个具体的消息队列实现&#xff0c;比如RabbitMQ.还使用最开始的服务拆分项目&#xff0c;比如现在借阅服务的某个接口调用时&#xff0c;能给用户服务和图书服务发送一个通知。 首先父项目导入SpringCloud依赖 <depend…

MySQL数据库单表查询

素材: 表名: worker-- 表中字段均为中文&#xff0c;比如 部门号 工资 职工号 参加工作 等 CREATE TABLE worker ( 部门号 int(11) NOT NULL, 职工号 int(11) NOT NULL, 工作时间 date NOT NULL, 工资 float(8,2) NOT NULL, 政治面貌 varchar(10) NOT NULL DEFAULT 群…

力扣 -- 1027. 最长等差数列

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int longestArithSeqLength(vector<int>& nums) {int nnums.size();int ret2;unordered_map<int,int> hash;//这里可以先把nums[0]存进哈希表中&#xff0c;方便后面i从1开始遍历hash[num…

Python的函数

近期遇到了一个没怎么看懂的Python函数的形式。 def twoSum(self, nums: List[int], target: int) -> List[int]: 后来上网查了资料。