黑马程序员技术交流社区
标题: css注意事项 [打印本页]
作者: 黄凯1 时间: 2019-3-18 13:41
标题: css注意事项
背景半透明 backgroud: rgba()rgba(0-255,0-255,0-255,0-1)
例如rgba(0, 0, 0, .3) 一般a的值不写0直接写.3
css三大特性层叠性 选择器的权重是一样的 样式冲突 才能进行层叠性的对比
就近原则 长江后浪推前浪
继承性简化代码 降低css复杂性
子元素可以继承父元素的样式
text- font- line- 这些元素开头的可以继承 以及colo属性---> 所有和文字属性有关的特性
宽高 背景不能继承
优先级选择器不同 -----> 优先级
大---------->小
继承/*--->0,0,0,0
标签选择器----> 0,0,0,1
类选择器 ---> 0,0,1,0
id选择器---->0,1,0,0
行内样式--->1,0,0,0
!important---->∞
权重叠加
相加不进行进位
0,0,0,5+0,0,0,5=0,0,0,10
继承权重为0
文字没有选中的盒子 看最近的父级样式
盒子模型盒子内容 内边距 外边距 边框
盒子边框宽度
border-width
样式
border-style soild实线 dashed虚线 dotted点线
颜色
border-color
上边框 border-top: 宽度 样式 颜色
下 border-bottom : 宽度 样式 颜色
左 border-left : 宽度 样式 颜色
右 border-right: 宽度 样式 颜色
边框的综合性写法border: 宽度 样式 颜色
border:none; 去除边框
表格的细线边框table td th都要设置边框
表格的边框重叠会有1+1=2的现象
border-collapse: collapse 合并相连的边框
内边距 padding内容和边框添加了距离
盒子会变大
内边距的综合写法padding: 20px 上下左右
padding: 10px 20px 上下 10 左右20
padding: 10px 20px 5px 上10px 左右20px 下5px
padding: 20px 20px 20px 20px 上 左 下 右
盒子的实际大小内容宽高+内边距+边框
border-sizing: border-box;css3新属性 不会撑开盒子
没给盒子宽度的情况下 不会撑开盒子
外边距margin语法和padding基本相同
块级盒子水平居中块级盒子必须有宽度
margin: 0,auto;
margin-left: auto;
margin-right: auto;
行内块和文字和行内元素 居中对其 用text-align:center;
块级盒子垂直居中大盒子角度 padding-top: 大盒子高度/2-小盒子高度/2
小盒子角度 会产生外边距塌陷
插入图片和背景图片的区别1.插入图片 只能通过盒模型的padding margin进行定位
2.背景图片只能通过backgroud-position: ;
清除元素默认的内外边距'* {
padding: 0;
margin: 0;
} '行内元素不能设置垂直方向的内边距
外边距塌陷相邻元素垂直外边距合并上下两个盒子都设置了margin上下的值 只会显示较大的值】
解决方法:
避免就好 只设置一个盒子的垂直方向的外边距即可
嵌套关系的垂直外边距合并给孩纸设置外边距时 父亲会随着移动
解决方法
1.给父亲一个边框
2.给父亲指定一个padding
3.给父亲添加一个overflow: hidden;
4.添加浮动 固定定位 绝对定位
盒子模型布局的稳定性width>padding>margin
背景半透明 backgroud: rgba()rgba(0-255,0-255,0-255,0-1)
例如rgba(0, 0, 0, .3) 一般a的值不写0直接写.3
css三大特性层叠性 选择器的权重是一样的 样式冲突 才能进行层叠性的对比
就近原则 长江后浪推前浪
继承性简化代码 降低css复杂性
子元素可以继承父元素的样式
text- font- line- 这些元素开头的可以继承 以及colo属性---> 所有和文字属性有关的特性
宽高 背景不能继承
优先级选择器不同 -----> 优先级
大---------->小
继承/*--->0,0,0,0
标签选择器----> 0,0,0,1
类选择器 ---> 0,0,1,0
id选择器---->0,1,0,0
行内样式--->1,0,0,0
!important---->∞
权重叠加
相加不进行进位
0,0,0,5+0,0,0,5=0,0,0,10
继承权重为0
文字没有选中的盒子 看最近的父级样式
盒子模型盒子内容 内边距 外边距 边框
盒子边框宽度
border-width
样式
border-style soild实线 dashed虚线 dotted点线
颜色
border-color
上边框 border-top: 宽度 样式 颜色
下 border-bottom : 宽度 样式 颜色
左 border-left : 宽度 样式 颜色
右 border-right: 宽度 样式 颜色
边框的综合性写法border: 宽度 样式 颜色
border:none; 去除边框
表格的细线边框table td th都要设置边框
表格的边框重叠会有1+1=2的现象
border-collapse: collapse 合并相连的边框
内边距 padding内容和边框添加了距离
盒子会变大
内边距的综合写法padding: 20px 上下左右
padding: 10px 20px 上下 10 左右20
padding: 10px 20px 5px 上10px 左右20px 下5px
padding: 20px 20px 20px 20px 上 左 下 右
盒子的实际大小内容宽高+内边距+边框
border-sizing: border-box;css3新属性 不会撑开盒子
没给盒子宽度的情况下 不会撑开盒子
外边距margin语法和padding基本相同
块级盒子水平居中块级盒子必须有宽度
margin: 0,auto;
margin-left: auto;
margin-right: auto;
行内块和文字和行内元素 居中对其 用text-align:center;
块级盒子垂直居中大盒子角度 padding-top: 大盒子高度/2-小盒子高度/2
小盒子角度 会产生外边距塌陷
插入图片和背景图片的区别1.插入图片 只能通过盒模型的padding margin进行定位
2.背景图片只能通过backgroud-position: ;
清除元素默认的内外边距'* {
padding: 0;
margin: 0;
} '行内元素不能设置垂直方向的内边距
外边距塌陷相邻元素垂直外边距合并上下两个盒子都设置了margin上下的值 只会显示较大的值】
解决方法:
避免就好 只设置一个盒子的垂直方向的外边距即可
嵌套关系的垂直外边距合并给孩纸设置外边距时 父亲会随着移动
解决方法
1.给父亲一个边框
2.给父亲指定一个padding
3.给父亲添加一个overflow: hidden;
4.添加浮动 固定定位 绝对定位
盒子模型布局的稳定性width>padding>margin
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |