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;
HTML/CSS 基础 2
2025/4/30 6:51:52
来源:https://blog.csdn.net/Qj60776671/article/details/139983805
浏览:
次
关键词:HTML/CSS 基础 2
版权声明:
本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。
我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com
-
vue3 css模拟语音通话不同语音、正在加载等的效果
-
Vue 中的过渡效果与响应式数据:transition、transitiongroup、reactive 和 ref 详解
-
web技术与nginx网站环境部署
热文排行
- `git restore` 和 `git checkout` 用于丢弃工作区的改动, `git switch` 和 `git checkout` 用来切换分支
- 《警世贤文》摘抄:处人篇、受恩篇、宽人篇、听劝篇、劝善篇(多读书、多看报、少吃零食多睡觉)
- Vmess协议是什么意思? VLESS与VMess有什么区别?
- Android显示系统(08)- OpenGL ES - 图片拉伸
- nccl 03 记 回顾:从下载,编译到调试 nccl-test
- 【CVE-2024-38077】核弹级Windows RCE漏洞如何自检并修复该漏洞(附批量漏洞检测工具及分析伪代码)
- 复试数据库原理总结
- 信息科技伦理与道德3:智能决策
- windows11 ,ubuntu20.04双系统,ubuntu没有wifi的解决方式
- 【HW必备】用友NC-Cloud存在17处漏洞合集
最新新闻
- Qt 5.14.2 入门(三)基本知识理解
- 【北京迅为】iTOP-4412全能版使用手册-第十二章 Linux系统编程简介
- vue3 css模拟语音通话不同语音、正在加载等的效果
- MySQL查询执行(二):order by工作原理
- 淘宝商品详情深度解析:利用JAVA爬虫获取item_get_pro接口
- Vue 中的过渡效果与响应式数据:transition、transitiongroup、reactive 和 ref 详解
- web技术与nginx网站环境部署
- Deepseek输出的内容如何直接转化为word文件?
- 视频设备轨迹回放平台EasyCVR综合智能化,搭建运动场体育赛事直播方案
- Python与MongoDB交互
推荐新闻
- Qt 5.14.2 入门(三)基本知识理解
- 【北京迅为】iTOP-4412全能版使用手册-第十二章 Linux系统编程简介
- vue3 css模拟语音通话不同语音、正在加载等的效果
- MySQL查询执行(二):order by工作原理
- 淘宝商品详情深度解析:利用JAVA爬虫获取item_get_pro接口
- Vue 中的过渡效果与响应式数据:transition、transitiongroup、reactive 和 ref 详解
- web技术与nginx网站环境部署
- Deepseek输出的内容如何直接转化为word文件?
- 视频设备轨迹回放平台EasyCVR综合智能化,搭建运动场体育赛事直播方案
- Python与MongoDB交互