html+css实战96-计算border

简介: html+css实战96-计算border

图片.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* border 撑大盒子尺寸 */
            /* 盒子尺寸 = width  / height + 边框线 */
            /* 如果400 * 400 尺寸 */
            width: 380px;
            height: 380px;
            background-color: green;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>


相关文章
|
5天前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
24 4
|
3天前
|
移动开发 前端开发 JavaScript
HTML与CSS二三事
HTML与CSS二三事
|
8天前
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
9天前
|
前端开发 JavaScript
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
3分钟掌握!用HTML+CSS实现懒加载,真的这么简单?
|
9天前
|
前端开发 JavaScript
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
HTML+CSS实现超酷炫的返回顶部特效,你一定会爱上!
|
9天前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
9天前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
9天前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
|
7天前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
34 0
|
4月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
158 7
下一篇
云函数