CSS基础 – 盒子模型 – margin,border,padding,content详解编程语言
(1)margin
1.margin:1px [2px] [3px [4px]];
四个宽度分别代表:上外边距,右外边距,下外边距,左外边距
指定三个和四个,从前往后一次上,右,下,左
指定两个,第一个代表上下,第二个代表右左
2.margin:auto
由浏览器自动计算外边距
.main {
margin:auto;//实现水平居中;
position:relative;
margin-top:10%;//覆盖margin=auto 定义的 margin-top:auto
border-style:dashed;
border-color:red;
border-width:3px;
height:300px;
width:800px;
}
3.margin-top,margin-left,margin-bottom为负数
在css盒子模型中,border,padding,height,width均不能为负值,margin为负值时,元素将相对于原来位置向指定方向移动一定距离之后布局
(2) border
1.border: 5px solid red;
四个边框的样式均为width:5px ,border-style:solid,border-color:red
2.可单独定义指定边的border属性:border-[bottom,right,top,left]-[style,width,color]
3.border-style
dotted,dashed,solid,double,outset,hidden,none
border-style:dashed,solid,double,outset 分别指定上,右,下,左边框style
4.border-radius:3px
(3)padding
1.padding:1px [2px] [3px [4px]];
四个宽度分别代表:上内边距,右内边距,下内边距,左内边距
指定三个和四个,从前往后一次上,右,下,左
指定两个,第一个代表上下,第二个代表右左
2.padding:auto css中auto不是padding的一个合法值
3.可用padding-left,padding-right,padding-bottom,padding-top 单独制定对应边的内边距
15362.html
c相关文章
- 【NLP基础】英文关键词抽取RAKE算法
- css opacity属性_CSS中的opacity属性[通俗易懂]
- CSS基础笔记——超链接样式
- java基础:IO流
- css 更改所有text,CSS之cssText「建议收藏」
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- 零基础学Java(2)数据类型与变量
- 零基础学习SpringBoot2-写一个HelloWorld
- Windows-Server基础安装配置
- salesforce零基础学习(一百一十九)In-App Guidance实现引导页操作功能
- 大数据必学Java基础(七十八):线程安全问题
- CSS基础学习(3)
- css基础选择器有哪些
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- 【原创】CSS基础以及常用使用方法
- 第十四届蓝桥杯集训——if——配套基础示例
- 前端必备的 CSS 库,normalize.css
- CSS 基础
- CVPR 2023 | 模块化MoE将成为视觉多任务学习基础模型
- CSS基础(一)
- CSS-基础样式
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- Linux基础:如何查看系统的 类型 版本 内存 磁盘 查询命令介绍
- elasticsearch6 学习之基础CURD详解程序员
- 前端基础-CSS是什么详解编程语言
- CSS基础 – 弹性盒子模型 – flex布局详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- 学习必备:嵌入式Linux基础入门(嵌入式linux基础)
- 深入理解MySQL: 从基础到入门(对mysql的理解)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- CSS基础学习
- CSS顶级技巧大放送,div+css布局必知
- juqery学习之六CSS--css、位置、宽高
- php压缩多个CSS为一个css的代码并缓存