html创建盒子,HTML 盒子

盒子模型

CSS 在处理网页的时候会认为每个元素都是一个盒子，一个盒子分为以下几个部分：

1、内容区：content

2、内边距：padding

3、边框：border

4、外边距：margin

图片1.png

内容区

内容区指的是盒子中放置内容的区域，也就是元素的文本内容，子元素也是存在于内容区的，可以通过width和height两个属性设置内容区的大小

但是，width和height属性只适用于块元素

width:100px;

height:100px;

}

内边距

内边距指的是元素内容区与边框以内的空间默认情况下width和height不包含padding的大小。可以使用padding属性来设置元素的内边距

例1：

padding：10px，5px，5px，10px(设置元素的上右下左的内边距)

例2：

padding:10px,10px,10px

(设置上，左右，下的内边距)

例3：

padding：10px，10px

(设置上下，左右的内边距)

例4：

padding：10px

(设置上下左右的内边距)

另外在CSS中还提供了padding-top、padding-right、padding-left、padding-bottom分别制定四个方向的内边距

padding:10px,10px,10px,10px

}

边框

可以在元素周围创建边框，边框是元素可见框的最外部可以同border属性来设置盒子的边框

边框和内边距一样，默认width和height不包括边框的宽度 ,也能使用border-top/left/right/bottom来指定边框

设置边框的宽度、颜色、样式

border:1px red solid

}

边框的样式

没有 none；点线 dotted；虚线 dashed；实线 solid ；双线 double；脊线 ridge；凹线 inset；凸线 outset

外边距

外边距是元素边框与周围元素相距的空间使用margin属性设置外边距

用法与内边距，边框类似，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以margin：0 ，auto可以是元素居中

display

不能为行内元素设置width、height、margin-top和margin-bottom。因为他们只适用于块元素，这时我们可以通过修改display来修改元素的性质。

可选值：

block 设置元素为块元素

inline 设置元素为行内元素

inline-block 设置元素为行内块元素

none (隐藏元素元素将在页面内完全消失)

visibility

主要适用于元素是否可见

和display的区别：使用display设置为none时，元素彻底消失，使用visibility隐藏元素，隐藏后的元素在文档中所占的位置依然存在，不会被其他元素覆盖

可选值

visible 可见的

hidden 隐藏的

overflow

当相关标签里面的内容超出了样式的宽度和高度时，浏览器会让内容溢出盒子，

可以通过oxerflow来控制内容溢出的情况

可选值：

visible 默认值

scroll 添加滚动条

auto 据需要添加滚动条(比scroll更智能，能够自行判断)

hidden 隐藏超出盒子的内容

html创建盒子,HTML 盒子相关推荐

创建自己的盒子box_创建自己的
创建自己的盒子box Note from author : 作者注: In this article we will learn how to create your own WhatsApp sti ...
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...
#css动画# 【四】如何实现鼠标经过盒子，盒子向上移动且有阴影？
#css动画# 如何实现鼠标经过盒子,盒子向上移动且有阴影? 思路: 在鼠标经过时,触发事件,就用到hover : 然后触发的时候我们期望它是隔一点点时间以后,才有效果: 所以需要先设置触发的时间, ...
小米商城练习(鼠标移入阴影偏移向上抬起浮动清除),边框盒(怪异盒子,ie盒子),因为换行导致出现空格距离怎么解决？
一.鼠标移入阴影偏移向上抬起 .效果块i:hover{/* background-color: orangered; */box-shadow: 4px 4px rgb(234, 234, 234) ...
创建一个水平盒子java_盒子模型理解
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
创建一个水平盒子java_你了解如何比较两个对象吗
文章目录一,关于对象值相等的比较 1, == VS equals p == q 表示的是 p 和 q 两个引用指向同一个对象 p.equals(q) 表示 p 指向的对象和 q 指向的对象是否是值 ...
CSS3盒子模型-盒子模型的布局
盒子模型布局稳定性开始学习盒子模型,我们初学者最大的困惑就是, 分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距?答案是: 其实他们大部分情况下是可以混用的. 就是说,你用内边距也可 ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...
html盒子中盒子排列,css3中弹性盒排布使用方法
首先,我们来对弹性盒中的称呼做一些了解如图,弹性盒分为两个轴,一个是主轴,一个是交叉轴,主轴方向可以改变(左右改上下),主轴方向改变后,交叉轴方向也会随之改变然后,我们来看下浏览器的大概支持情况 ...

html创建盒子,HTML 盒子

html创建盒子,HTML 盒子相关推荐

最新文章

热门文章