01-border,padding,margin,color
来源:互联网 发布:mysql 报错1054 编辑:程序博客网 时间:2024/05/18 09:11
border,padding,margin,color
之前我在潭州课程上上了一期vip课程,现在把纸笔的笔记整理出来,与大家分享。很少牵扯到css3,后续会跟进
- border–边框
- padding–内边距
- margin–外边距
- color–颜色
- 外边距合并
border:边框
- border-width
- border-style
- border-color
- border-style
- border的复合模式
- border的每个方向详细
border-width: 边框宽度
(px)
border-style: 边框样式
- solid:实线
- dashed:虚线
- dotted:点线
- double:双实线
border-color: 边框颜色
- #FFF:十六进制
- red:英文字母
- rgb
- rgba
- transparent:透明
border复合模式
eg:border:1px solid red;---border: width style color;可以省略写,最好不要打乱顺序
border单独每个方向的样式
- border-top:上方边框
- border-top-width
- border-top-style
- border-top-color
- border-top:1px solid red;复合模式
- border-right:右侧边框
- border-right-width
- border-right-style
- border-right-color
- border-right:1px solid red;复合模式
- border-bottom:底侧边框
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-bottom:1px solid red;复合模式
- border-left:左侧边框
- border-left-width
- border-left-style
- border-left-color
- border-left:1px solid red;复合模式
padding:内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding的复合模式
- padding的注意事项
padding-top: (px) 上边距
padding-right: (px) 右边距
padding-bottom: (px) 下边距
padding-left: (px) 左边距
padding: 复合模式
1)eg:padding:10px; 每个方向的内边距都是10px;2)eg:padding:10px 5px; 上下的内边距是10px 左右的内边距是5px3)eg:padding:1px 2px 3px 4px; 上边距1px 右边距2px 下边距3px
border-color: 边框颜色
- #FFF:十六进制
- rgb
- rgba
- transparent:透明
border复合模式
eg:border:1px solid red;---border: width style color;可以省略写,最好不要打乱顺序
border单独每个方向的样式
- border-top:上方边框
- border-top-width
- border-top-style
- border-top-color
- border-top:1px solid red;复合模式
- border-right:右侧边框
- border-right-width
- border-right-style
- border-right-color
- border-right:1px solid red;复合模式
- border-bottom:底侧边框
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-bottom:1px solid red;复合模式
border-left:左侧边框
- border-left-width
- border-left-style
- border-left-color
- border-left:1px solid red;复合模式
border:边框
border-width
- border-style
- border-color
- border-style
- border的复合模式
- border的每个方向详细
border-width: 边框宽度
(px)
border-style: 边框样式
- solid:实线
- dashed:虚线
- dotted:点线
- double:双实线
border-color: 边框颜色
- #FFF:十六进制
- rgb
- rgba
- transparent:透明
border复合模式
eg:border:1px solid red;---border: width style color;可以省略写,最好不要打乱顺序
border单独每个方向的样式
- border-top:上方边框
- border-top-width
- border-top-style
- border-top-color
- border-top:1px solid red;复合模式
- border-right:右侧边框
- border-right-width
- border-right-style
- border-right-color
- border-right:1px solid red;复合模式
- border-bottom:底侧边框
- border-bottom-width
- border-bottom-style
- border-bottom-color
- border-bottom:1px solid red;复合模式
- border-left:左侧边框
- border-left-width
- border-left-style
- border-left-color
- border-left:1px solid red;复合模式
padding:内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding的复合模式
- padding的注意事项
padding-top: (px) 上边距
padding-right: (px) 右边距
padding-bottom: (px) 下边距
padding-left: (px) 左边距
padding: 复合模式
1)eg:padding:10px; 每个方向的内边距都是10px;2)eg:padding:10px 5px; 上下的内边距是10px 左右的内边距是5px3)eg:padding:1px 2px 3px 4px; 上边距1px 右边距2px 下边距3px 左边距4px
padding的注意事项
padding会改变盒子的大小,所以背景的相关样式会作用在padding上
margin:外边距
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin的复合模式
- margin的注意事项
margin-top: (px) 上边距
margin-right: (px) 右边距
margin-bottom: (px) 下边距
margin-left: (px) 左边距
margin: 复合模式
1)margin:10px; 每个方向的外边距都是10px;2)margin:10px 5px; 上下的外边距是10px 左右的外边距是5px3)margin:1px 2px 3px 4px; 上边距1px 右边距2px 下边距3px 左边距4px4)margin:10px auto; 上下边距是10px; 左右方向会根据父级元素使此居中
margin的注意事项
如果想把元素居中可以使用margin:auto;但是要注意margin只对块级元素起作用,再就是外边距合并的问题
color
- #FFF:十六进制
- rgb
- rgba
- transparent:透明
外边距合并的问题
外边距合并的现象在开发中经常遇见
我遇见的情况中包含两种现象
- 两个垂直外边距相遇时,他们将合并成一个外边距,合并后的外边距的高度为之前外边距较大的那个。
注:div1,和div2都没有border属性 - 当div1嵌套div2时,里面的div1有margin-top的属性 会使div1与垂直方向的会计元素产生边距,即:
注:div1,和div2都没有border属性
直接上解决的方法:
第一种情况用padding代替margin;padding在div的内部,用来撑开空间,
第二种情况在div2的加属性border即可解决。当不需要border样式时,可以将border的属性设置为;
border:1px solid transparent;这样就看不出边框的效果了
总结:
这是第一课的内容,也是比较基础的知识点,常见的问题也就是外边距的问题,多多注意就好了。
阅读全文
0 0
- 01-border,padding,margin,color
- 关于margin ,padding ,border
- margin,border,padding,content
- padding,margin,border
- CSS Border & Padding & Margin
- Margin-Border-Padding
- outline padding margin border
- margin、border、Padding
- CSS padding margin border
- margin padding border
- CSS-border,padding,margin
- CSS:margin,border,padding
- margin,border,padding
- padding,margin,border的区别
- border、margin、padding、elelment -- CSS
- padding border margin综合示意图
- padding,border,margin的区别
- 第八章 padding border margin
- tomcat服务器配置字符集为utf-8-彻底解决中文乱码问题
- 基于tensorflow实现AI图片鉴黄(NSFW)
- 电路延迟
- 《python print -> print() 》
- [kuangbin带你飞]专题一 简单搜索 B
- 01-border,padding,margin,color
- 插火把(水题测试2017082501&洛谷1789)
- 树状数组入门
- Kotlin 第四章:Kotlin 基础之包、控制流、返回与跳转
- Redis使用-java-Jedis
- python读写excel文件
- 【Linux学习笔记】15:挂载命令
- python 学习2
- JavaScript学习笔记(DOM脚本)