2019/9/06 H5 盒模型（box）

最新推荐文章于 2022-08-18 14:22:01 发布
最新推荐文章于 2022-08-18 14:22:01 发布
阅读量496 收藏 1
点赞数 1
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42243225/article/details/100594038
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>

清除默认边距

 <style>
        *{
            padding: 0;
            margin: 0;
        }

盒模型：width/height/border/margin/padding

        /* border-bottom */
        /* .box{
            width:100px;
            height:100px;
            border-bottom:2px solid red; 实线
            border-top:2px double yellow; 双实线
            border-left:2px dotted green; 
            border-right:2px dashed yellow;
            padding: 20px 50px 10px;
            margin:100px auto;
            
        } */

 
        body{
            background-color: #aaa;
        }
        .box{
            width: 1160px;
            height: 60px;
            padding: 20px;
            font-size: 0px;
            background-color: #fff;
            margin: 100px auto;
        }
        .box div{
            width: 230px;
            height: 60px;
            display: inline-block;
            background-color: #ccc;
            border-right:2px solid red;
        }

子选择器

      .box .last{
            border-right: none;
        }

群组选择器


 .a,.b{
            
        }

属性选择器

   div[class=a]{
            color:red;
        }
    </style>

</head>
<body>
    <div class="a">111</div>
    <div class="b">222</div>

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="last"></div>
</div>

<!-- <div class="box">
    马上周末了，好开心！！！
</div>
<div class="box">
    马上周末了，好开心！！！
</div> -->
她她她_ta
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5知识点（一）盒模型
Joker_d_的博客
02-23 235
学过前端的都知道，盒模型可以说是H5的基石，当我们在设计一个简单的网页时，首先要先做的就是分区布局，分区布局的目的是要确定内容，即文本、图片或者列表等的位置，进而将页面内容的位置属性相似的部分提取出来，建立模型，从而达到减少重复工作，提高效率的目的。而我们提取出的具有相同属性的一个个模板，在H5中就被成为一个个具体的盒模型，可以说建立盒模型的过程就是布局的过程。 盒模型一般具有以下6个属性值 wi...
H5:常用css3属性box-sizing，display:box
海生的博客
08-04 5845
box-sizing属性：允许您以特定的方式定义匹配某个区域的特定元素。 box-sizing有三个取值：content-box|border-box|inherit;默认情况下值为content-box content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box:为元素设定的宽度和高度决定了元素的边框盒。为元素指定的
H5入门6：盒子模型
NYC的博客
06-27 721
H5入门6：盒子模型 1.什么是盒子模型 盒子模型相关属性 宽度属性 高度属性 哪些元素可以设置宽高 边框属性 边框样式 设置不同方向上的边框属性，在中间加上方向即可 padding的设置规则 注：padding 不能设置负值 外边距margin属性设置规则 注意：margin是可以为负值的 块级元素有默认外边距margin 注意： - 如果垂直方向上，两个相邻的元素都设置外边距，外边距会合并，合并后外边距的高度采用的是外边距最大的那个值； -
H5之盒子模型
mahuatengbukui的博客
08-19 954
1.css三大重点：盒子模型、浮动、定位 2.网页布局的本质：就是拼接盒子的过程 3.盒子包含什么：内容，宽，高，边框，内边距，外边距 ①宽：width：； ②高：height：； ③边框：border：设置宽度、类型、颜色 类型：实线...
CSS 框模型 Box-Model
一条大河
09-08 774
CSS笔记：框模型 Box Mode1 1， 什么是框模型 框： 页面元素皆为框 框模型：定义元素尺寸和距离的一种计算方式 Box Model: 盒模型，方框属性 包含： 尺寸，边框，外边距，内边距等属性 当狂模型属性介入到元素时，元素的整体占地尺寸会发生改变，计算方式如下 占地宽度=左右外边距+左右边框+左右内边距+宽度 占...
H5游戏源码 桌球游戏.zip
10-15
此外，对于3D效果的追求，Three.js这样的库则可以将3D模型引入到H5游戏之中，增强游戏的立体感。 用户交互是桌球游戏的关键。H5游戏源码需要处理用户的触摸或鼠标输入，模拟球杆击球的动作。这通常涉及事件监听、...
H5游戏源码 单机版雷霆HTML.zip
最新发布
10-15
7. **游戏架构**：在H5游戏源码中，通常会看到游戏架构的设计，如MVC（模型-视图-控制器）、MVVM（模型-视图-ViewModel）或自定义架构。合理的架构能保证代码的可维护性和扩展性。 8. **物理引擎**：许多H5游戏会...
H5小游戏源码 电锯切割狂.zip
10-14
【H5小游戏源码详解】 H5小游戏源码是指基于HTML5、CSS3和JavaScript等技术开发的游戏程序的原始代码。HTML5是新一代的超文本标记语言，它提供了更丰富的媒体支持和更强的交互性，使得在网页上构建游戏成为可能。...
H5C3面试题.docx
03-29
1. 怪异盒模型（box-sizing:border-box） 2. 渐变（linear-gradient、radial-gradient） 3. 背景（background-image、background-size、background-origin） 4. 伪类选择器（p:first-of-type、p:last-of-type、p:...
H5小游戏源码 汽车物理学.zip
10-14
《H5小游戏源码：汽车物理学》 在当今数字化时代，HTML5（H5）技术以其跨平台、轻量级的特性，成为了制作互动小游戏的首选。本资源提供了一个名为"汽车物理学"的H5小游戏源码，为开发者提供了一个学习和实践的机会...
H5新增classList
bjl008的博客
05-23 140
<button id="addBtn">添加class</button> <button id="deleteBtn" class="removeClass">删除class</button> <button id="toggleBtn">切换class</button> const fa = document.querySelector('#position') const allChild ...
H5新增的自定义属性
m0_59345890的博客
08-18 380
data- 属性名如果包含了连字符，例如：data-date-of-birth ，浏览器解析时连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是： dateOfBirth。2、在js脚本中存取自定义属性，用到两个方法分别是存——setAttribute("自定义属性名"，"属性值")和取——getAttribute("自定义属性名")写法：前缀data-自定义属性名="属性值" ，例如：data-user="zhangsan"1、可以直接在标签行内定义。...
h5的盒子模型
qq_30302325的博客
05-29 1014
盒子模型在css中的使用：（content-box border-box） 可以分成两种情况： content-box:对象的实际宽度等于设置的width值和border、padding之和 border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width...
H5+CSS3实现正方体效果
生活步步是坎坷，笑到最后是大哥
06-23 1320
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 250px; height: 250px; ...
H5学习弹性盒模型详解
Candy_mi的博客
05-07 1893
1. 语法1.1 语法基础概念任何一个容器都可以指定为Flex布局。 .box{ display: flex; }行内元素也可以使用Flex布局。 .box{ display: inline-flex; }同时需要注意，在不用的浏览器中，我们还需要在前面加上对应的浏览器前缀。 .box{ display: -webkit-fle...
flexbox 弹性盒布局和布局原理
热门推荐
言川的博客
05-03 2万+
flexbox 弹性盒布局和布局原理 最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整
H5前端基础——盒子模型
奋斗&努力
09-21 2574
CSS中将每一个元素都设置为了一个矩形的盒子 将所有的元素都设置为盒子，是为了方便页面的布局 当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子 盒子模型 每个盒子都由如下几部分构成 内容区 内容区相当于盒子存放东西的空间 内容区在盒子的最里边 元素的所有的子元素都是放在父元素的内容区 内容区设置 width 内容区的宽度 height
html中box标签的作用,box-shadow属性的功能是什么
weixin_28976245的博客
06-18 5663
box-shadow是CSS3中的一个属性，是用于向方框添加一个或多个阴影，并设置阴影位置、尺寸、颜色等。CSS3 box-shadow属性作用：box-shadow 用于向方框添加阴影基本语法：box-shadow: h-shadow v-shadow blur spread color inset;参数：h-shadow：水平阴影的位置。允许负值。v-shadow ： 垂直阴影的位置。允许负值...
1. 行内元素有哪些？块级元素有哪些？CSS的盒子模型？
05-05
HTML中的行内元素有：a、...盒子模型可以通过CSS的box-sizing属性进行设置，有两种值：content-box（默认值，表示盒子的大小只包括内容区域的大小）和border-box（表示盒子的大小包括内容区域、内边距和边框的大小）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值