html盒子颜色代码,css盒子(示例代码)
1.盒子模型的内容包括:content,padding,border,margin
2.盒子模型分类:
标准盒:正常盒,怪异盒
伸缩盒:新,旧
内边距:padding
1.内边距在content外,边框内
padding 设置所有边距
padding-bottom 设置底边距
padding-left 设置左边距
padding-right 设置右边距
padding-top 设置上边距
添加内边距的时候,只需要设置padding,不需要改变content大小,padding会自动撑开。
边框:border
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
border-radius 设置圆角边框
box-shadow 设置对象阴影
border-image 边框背景图片
外边距:margin
1.围绕在内容边框的区域就是外边距,外边距默认为透明区域
2.外边距接受任何长度单位,百分数值
margin 设置所有边距
margin-bottom 设置底边距
margin-left 设置左边距
margin-right 设置右边距
margin-top 设置上边距
注意:外边距合并
3.标准盒子模型
4.怪异盒子模型
box-sizing:border-box; 固定了盒子的大小,只在盒子内部改变值。
5.css伸缩盒子(旧)
-1.css3引入了一种新的布局模式-Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定,调整和分布一个容器里项目布局,
即使它们的大小是未知或者动态的。
-2.Flexbox布局可以轻松的实现屏幕和浏览器窗口大小发生变化时,保持元素的相对位置和大小不变。
-3.属性
box-orient 伸缩盒对象的子元素的排列方式
box-pack 水平居中
box-align 垂直居中
box-flex 伸缩盒对象的子元素如何分配其剩余空间
box-direction 伸缩盒对象的子元素的排列顺序是否反转
例子如下:
html
css
.one{width:100px;height:100px;background-color:blue;-webkit-box-flex:1;
}.two{width:100px;height:100px;background-color:pink;-webkit-box-flex:1;
}.three{width:100px;height:100px;background-color:green;-webkit-box-flex:1;
}.container{width:600px;height:600px;background-color:dimgrey;display:-webkit-box; /*变成盒子*/-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-direction:reverse;
}
6.css伸缩盒模型(新)
属性
flex 复合属性,设置伸缩盒对象的子元素如何分配空间
flex-grow 弹性盒的扩展比率,按比例平均分配
flex-flow 复合属性,设置伸缩盒对象的子元素排列方式
flex-direction 伸缩盒对象的子元素在父容器中的位置
flex-wrap 设置伸缩盒对象的子元素超出父容器时是否换行
3个div 每个宽度200px,父容器为300px,超出了300px,但是三个div每个都会变成100px,这时需要设置flex-flow:wrap;(即超过部分换行,div会变成3行显示)
order 设置伸缩盒对象的子元素出现的顺序
.one{width:100px;height:100px;background-color:blue;-webkit-flex-grow:1;
/*第一个div 第三个显示*/-webkit-order:3;
}.two{width:100px;height:100px;background-color:pink;-webkit-flex-grow:1;
/*第二个div 第一个显示*/-webkit-order:1;
}.three{width:100px;height:100px;background-color:green;-webkit-flex-grow:1;
/*第三个div 第二个显示*/-webkit-order:2;
}.container{width:600px;height:600px;background-color:dimgrey;
/*变成盒子*/display:-webkit-flex;-webkit-flex-direction:column;
/*超出父容器时换行*/-webkit-flex-flow:wrap;
}
html盒子颜色代码,css盒子(示例代码)相关推荐
- 利用css完成表格的代码,css 表格(示例代码)
1.给元素的display属性添加为以下值 table使该元素按table样式渲染 table-row使该元素按tr样式渲染 table-cell使该元素按td样式渲染 table-row-group ...
- CSS初始化示例代码
CSS初始化示例代码/*css reset www.admin10000.com*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form ...
- arcgis sample代码之SOE示例代码PageLayout REST Server Object Extension 的源码分析
0.前言 研究 arcgis object的代码是十分重要的,对于学习arcObject太重要了,因为没有这些代码,学习混乱的arcObject将会更佳的困难. 我的arcgis server 是10 ...
- html中盒子的定位,css盒子的定位有哪些方法?
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实 ...
- html如何给盒子设置位置,CSS盒子定位
又到周末了,又结束了一周的课程了,表示昨前天开始老师布置家庭作业开始写页面了,前天的还好,12点之前搞定,昨天的熬到2点,表示大神不要笑哈,毕竟能力有限,第二天看了老师的讲解,才发现做了非常多的无用功 ...
- css中盒子模型图片,CSS 盒子模型
盒子模型(Box Model) 一般的标签都是盒子,但是除了极个别的标签(例如:img.input标签)不是盒子 盒子模型的属性 width 盒子内容的宽度 height 盒子内容的高度 margin ...
- html代码圣诞树位置代码,html 圣诞树(示例代码)
简介这篇文章主要介绍了html 圣诞树(示例代码)以及相关的经验技巧,文章约1263字,浏览量499,点赞数8,值得推荐! div{ width:0px; height:0px; background ...
- css中盒子的属性,css盒子模型及属性介绍
盒子模型块元素(盒子) 搭建网页结构 1.特点: 1)独占一行空间 2)默认宽度为100%(占满父元素) 3)高度默认为0,如果有子元素,父元素高度由子元素决定 4)宽度和高度可以改变,通过width ...
- html表单页面css样式代码,前端html表单与css样式(示例代码)
1,from标签 from标签的功能是向服务器传输数据,实现用户交互的重要标签. from标签的具体使用: input标签使用示例: 姓名: 用户名: 密码: 爱好:骑车游戏电影 男女 第一句:act ...
- html css廖雪峰,廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式(示例代码)
拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段 ...
最新文章
- eventfd和timerfd
- java中类型转换的造型_Java-类型转换 - 吉胖子很瘦的个人空间 - OSCHINA - 中文开源技术交流社区...
- Java黑皮书课后题第4章:*4.3(几何:估算面积)应用4.1节图中以下地点的GPS位置:Georgia州的Atlanta……计算被这四个城市所围起来的区域面积
- 30分钟学玩转RabbitMQ
- angular5 接口跨域请求配置
- LockDemo 锁对象
- XXX数据仓库分析模型设计文档
- 易经读书笔记18山风蛊
- Spring Boot + Spring Data + Elasticsearch实例
- 【makefile系列】调试makefile
- 2021-2025年中国主动脉内球囊反搏装置行业市场供需与战略研究报告
- OC试题 ——通讯录(AddressBook)
- 喜报 | 强强联手,这件大事终于有着落了
- Druid连接池简介和配置
- Windows返回桌面快捷键
- 网络电视地址大全- -
- 如何打造一个优秀的软件研发团队
- 从自身谈在成熟与幼稚公司做测试的差别
- 清风电子—keil5,无法运行官方的代码程序,出现这样的错误显示 \objects\main.o:No such file or directory
- MAC-XXL_JOB学习踩坑记录-Failed to create parent directories for [/data/applogs/xxl-job/xxl-job-admin.log