HTML/CSS 基础 2

9、给div盒子设置圆角,基于边框:
border:1px solid; #设置实线;
border-radius:50px;  #设置圆角
10、间距
1)内间距:padding
2)外间距:margin
11、#浮动和清除浮动#
第一种:在style中,给父元素添加:overflow:hidden; 缺陷:假如父元素有需要溢出的元素显示,当父元素设置了overflow:hidden后,会导致这些溢出的元素内容无法正常显示。
第二种: 给类名wrap添加一个div子元素,然后给这个元素在style中设置"clear:left"; clear:left的作用是 清除左侧内容的浮动效果。
第三种:双伪元素法(个人比较推荐) 在style中父元素,给父元素添加伪元素 
代码:
.wrap:after,.wrap:before{ content:' '; display:table; }
.wrap:after{ clear:both; } .wrap{ *zoom:1; }
1)将两个div并行显示,
display:inline-block;
float:left;块元素先位于左边,另一个紧随其后
12、div元素固定在视口的左上角。
div{
position:fixed;
top:0px;
left:0px;
}
13、在css中单位长度用的最多的是px、em、rem,这三个的区别是:
px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
自身大小的多少倍:em
width:4em;

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

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

相关文章

vscode关于java扩展

包含IDEA同款代码提示,vscode的debug,除了创建类要手动新建java文件以外,其他都还行,满足初学者要求。

Python+Pytest+Allure+Yaml接口自动化测试框架详解

PythonPytestAllureYaml接口自动化测试框架详解 编撰人:CesareCheung 更新时间:2024.06.20 一、技术栈 PythonPytestAllureYaml 版本要求:Python3.7.0,Pytest7.4.4,Allure2.18.1,PyYaml6.0 二、环境配置 1、安装python3.7,并配置…

C++编程逻辑讲解step by step:根据关键词自动判断文章的类别,去掉无关词后统计文章中每个单词出现的频率。

题目分析 根据关键词自动判断文章的类别。共2篇文章(用char s1[]和char s2[]保存),去掉无关词后(用char irrelevant[][10]保存),统计文章里面每个单词出现的频率:关键词个数去掉无关词后的文章…

go编译报错

missing go.sum entry for module providing package gihub.com/xxxxxxxxxxx; to add:xxxx 在go项目目录下执行命令: go mod tidy

前端JS必用工具【js-tool-big-box】学习,数值型数组的正向排序和倒向排序

这一小节,我们说一下前端 js-tool-big-box 这个工具库,添加的数值型数组的正向排序和倒向排序。 以前呢,我们的数组需要排序的时候,都是在项目的utils目录里,写一段公共方法,弄个冒泡排序啦,弄…

已解决java.security.GeneralSecurityException: 安全性相关的通用异常的正确解决方法,亲测有效!!!

已解决java.security.GeneralSecurityException: 安全性相关的通用异常的正确解决方法,亲测有效!!! 目录 问题分析 报错原因 解决思路 解决方法 确定具体异常类型 检查输入参数 验证算法支持性 调整安全策略 确保资源可…

uniapp 小程序 堆叠轮播图 左滑 右滑 自动翻页 点击停止自动翻页

uniapp 小程序 堆叠轮播图 左滑 右滑 自动翻页 点击停止自动翻页 超过指定时间未点击滑动 则继续开始滚动 直接上代码 componentSwiper.vue 需要注意页面切换时清除计时器 <template><view><view class"swiperPanel" touchstart"startMove"…

Verilog刷题笔记48——FSM1型异步复位

题目: 解题&#xff1a; module top_module(input clk,input areset, // Asynchronous reset to state Binput in,output out);// parameter A0, B1; reg state, next_state;always (*) begin // This is a combinational always block// State transition logiccase(…

Python Type Hint有啥用

Python 的类型提示&#xff08;Type Hint&#xff09;是 Python 3.5 引入的一种静态类型检查功能。类型提示的主要目的是增强代码的可读性、可维护性和错误检测能力。虽然 Python 仍然是动态类型的语言&#xff0c;但类型提示可以帮助开发者在编码和维护过程中受益匪浅。 类型…

VMware vSphere 8.0 Update 3 发布下载 - 企业级工作负载平台

VMware vSphere 8.0 Update 3 发布下载 - 企业级工作负载平台 vSphere 8.0U3 | ESXi 8.0U3 & vCenter Server 8.0U3 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-vsphere-8-u3/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&am…

【yolov8:报错AttributeError: ‘Segment‘ object has no attribute ‘detect‘】

今天在运行yolov8的Segment模式的val模型测验时报错&#xff1a; AttributeError: ‘Segment’ object has no attribute ‘detect’ 原因是yolov8的版本问题&#xff0c;更新至最新版就可以了&#xff1a; 输入ultralytics查看版本 卸载当前的老版本 然后下载最新版本就可以…

【前端】Vue项目和微信小程序生成二维码和条形码

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;我是前端菜鸟的自我修养&#xff01;今天给大家分享Vue项目和微信小程序如何生成二维码和条形码&#xff0c;介绍了JsBarcode、wxbarcode等插件&#xff0c;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01…

5G与自动驾驶

上篇&#xff08;5G与4G的区别-CSDN博客&#xff09;讲了4G与5G的区别&#xff0c;大家可以看到5G具备高带宽、低时延的特性&#xff0c;可以广泛应用于各种物联网场景。 今天和大家简单聊聊5G与自动驾驶。 自动驾驶依靠人工智能、视觉计算、雷达、监控装置和全球定位系统协同…

Android Gradle开发与应用:Gradle基础

Android Gradle开发与应用&#xff1a;Gradle基础 Gradle是一款开源的自动化构建工具&#xff0c;已成为Android官方首推的自动化构建工具线。以下是关于Gradle在Android开发中的基础知识和应用&#xff0c;将按照几个关键点进行分点表示和归纳。 1. Gradle的基本概念 Proje…

关于mybatis中Mapper对应xml要写参数名的

1. 问题: 当我们在Mapper和xml之中传递参数时,必须要用Param注解来标识参数名, 否则参数就对应不上, 但每个参数都写Param就很烦人, 情况如下: mapper: User findById(Param("id") Long id); xml: <select id"findById" resultType"com.hz.doma…

为什么要学Java?

想要自己教会自己java&#xff0c;从小白成长到架构师。实现硬实力就业&#xff01; 因为Java是全球排名第一的编程语言&#xff0c;Java工程师也是市场需求最大的软件工程师&#xff0c;选择Java&#xff0c;就是选择了高薪。 为什么Java应用最广泛&#xff1f; 从互联网到…

软件测试:实验一 黑盒测试技术

一、实验目的 掌握黑盒测试的基本概念和原理&#xff0c;基本方法和技术。学会运用边界值、等价类划分方法对应用程序进行测试。学会使用测试用例对应用程序进行实际测试&#xff0c;并记录测试结果。 二、实验要求 分析被测应用程序&#xff0c;选定合适的黑盒测试方法。根…

基于FreeRTOS+STM32CubeMX+LCD1602+MCP4141(SPI接口)的数字电位器Proteus仿真

一、仿真原理图: 二、运行效果: 三、软件部分: 1)、SPI读写: 2)、初始化部分: void SystemClock_Config(void) { RCC_OscInitTypeDef RCC_OscInitStruct = {0}; RCC_ClkInitTypeDef RCC_ClkInitStruct = {0}; /** Initializes the CPU, AHB and APB busses clocks …

基于python爬虫对豆瓣影评分析系统的设计与实现

基于python爬虫对豆瓣影评分析系统的设计与实现 Design and Implementation of a Python-based Web Crawler for Analyzing Douban Movie Reviews 完整下载链接:基于python爬虫对豆瓣影评分析系统的设计与实现 文章目录 基于python爬虫对豆瓣影评分析系统的设计与实现摘要第一…

SQL连接与筛选:解析left join on和where的区别及典型案例分析

文章目录 前言数据库在运行时的执行顺序一、left join on和where条件的定义和作用left join on条件where条件 二、left join on和where条件的区别原理不同left join原理&#xff1a;where原理&#xff1a; 应用场景不同执行顺序不同&#xff08;作用阶段不同&#xff09;结果集…