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;

相关推荐
云水一下9 小时前
Vue.js从零到精通系列(一):初识Vue——背景、环境与第一个应用
前端·javascript·vue.js
Rauser Mack9 小时前
不懂编程,但是vibe coding一个扫雷游戏
人工智能·python·游戏·html·prompt
云水一下9 小时前
Vue.js从零到精通系列(二):响应式核心——ref、reactive、computed与watch
前端·javascript·vue.js
放下华子我只抽RuiKe59 小时前
FastAPI 全栈后端(二):路由与数据模型
前端·人工智能·react.js·前端框架·html·fastapi
lichenyang45310 小时前
ArkTS 严格类型系统:我答错 2 道题后才真正搞懂的几条规则
前端
小小小小宇10 小时前
定高、不定高、瀑布流虚拟列表
前端
天启HTTP10 小时前
开启全局代理后网络变慢,问题出在哪
开发语言·前端·网络·tcp/ip·php
卡布鲁10 小时前
Webpack 核心原理与自定义 Loader/Plugin 实战
前端·javascript
智码看视界10 小时前
Web Storage 的无障碍实践与工程化应用
前端·javascript·web
孟陬10 小时前
国外技术周刊 #140:在 Jeff Bezos 的私密 Campfire 峰会上,我学到了关于亿万富翁的事
前端·后端