4.16 盒子模型浅谈
来源:互联网 发布:软件国画山水价格 编辑:程序博客网 时间:2024/05/18 03:30
盒子模型属性:
margin: 外边距/界
border: 边框
padding:内边距/填充
width: 内容宽度
height: 内容高度
除宽高外其他属性又分为四个方向: 上右下左!
margin属性:
margin-top
margin-right
margin-bottom
margin-left
margin 一个值上右下左margin 二个值上下左右margin 三个值上左右下margin 四个值上右下左
padding属性同margin四个属性 上右下左
border属性:border-top
border-right
border-bottom
border-top
分别添加上右下左 单条边框线
边框样式 border-style
None:默认无边框
Dotted:点线框
Dashed:虚线框
Solid:实线框
Double:两个边界
Grove:定义3D沟槽边界
Ridge:定义3D脊边界
Inset: 定义3D嵌入边框
Outset: 定义3D突出边框
box-shadow: 10px 10px 10px 10px red;box-shadow的五个值解释
1: x方向的偏移 2:y方向的偏移 3:模糊程度 4:模糊半径 5:阴影颜色
简单说下浮动 Float
Float:属性使元素脱离常规文档流而表现为向右或者向左浮动
小提示:
1.浮动盒子的宽度不会自动伸展,宽度以内容和 margin padding属性为准
2.标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置,但内容会受到浮动盒子宽度的影响
3.可以设置clear使标准流中其他盒子不受之前盒子的浮动影响
4.父级盒子中的所有盒子都才用浮动形式。若父级盒子未指定高度则父级盒子的高度为0,因为所有盒子都是浮动以脱离标准流。
解决办法增加一个标准流的盒子。
margin border padding 都会影响页面布局 contend不变实际宽度为: 在contend的基础上加上 margin,border或padding
box-sizing: border-box;变态盒模型 border-box 添加padding 或者 border 不会影响页面布局只会挤压页面内容content
希望大家共同学习共同进步!
0 0
- 4.16 盒子模型浅谈
- 浅谈盒子模型
- 浅谈CSS盒子模型
- 浅谈CSS盒子模型
- 浅谈FF和IE对盒子模型的理解程度
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 盒子模型
- 面向对象
- Android Studio:Minimum supported Gradle version is 3.3. Current version is 3.2 问题解决
- BZOJ 736 [CTSC1999][网络流24题] 星际转移
- Lazy Physics Cat Gym
- CAS 实现单点登录(一):环境搭建、部署及简单使用
- 4.16 盒子模型浅谈
- Boostrap的form-group和form-control
- c++作业4
- 卡尔曼滤波
- 克隆二叉树
- 中毒的父母
- java 网页读取与存储
- python笔记
- Make Cents? Gym