一、CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
*比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。
小贴士:
1.样式冲突,遵循的原则时就近原则
2.样式不冲突,不会层叠
二、CSS继承性 子承父业
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
三、CSS优先级
继承样式的权重为0,即在嵌套结构中,不管父元素的权重多大,被子元素继承是,权重都为0。
行内样式优先。行内样式权重相当高。
权重相同时,层叠行,就近原则。
css有一个命令 !important 优先级最大。
四、CSS的特殊性(Specificity)
关于css 的权重,我们需要一套公式,就叫CSS的特殊性(Specificity),我们称之为css特性或非凡性
css特性有四个数字组成,从左到右,左边最大,数位没有进制,级别之间不可超越。
4.1总结优先级
1.!important
2.行内样式
3.id选择器
4.类选择器,属性选择器,伪元素,伪类
5.元素选择器
6.通配符选择
7.同一类选择就近原则
五、 盒子模型(CSS重点)
css三大模块,盒子模型,浮动,定位。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
看透网页布局的本质
CSS 其实没有太多逻辑可言 , 类似我们小时候玩的积木,我们可以自由的,随意的摆放出我们想要的效果
盒子模型(Box Model)
所有的文档元素(标签)都会生成一个矩形框,我们称为元素框(element box),它描述了一个文档元素在网页布局汇总所占的位置大小。因此,每个盒子除了有自己大小和位置外,还影响着其他盒子的大小和位置。
盒子边框(border)
边框属性—设置边框样式(border-style)
语法:
border : border-width || border-style || border-color
border: 1px solid red;
边框样式用于定义页面中边框的风格,常用属性值如下:
solid
dashed
圆角边框(CSS3)
border-radius(半径): 左上 右上 右下 左下
内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距。
padding-right:右内边距。
padding-bottom:下内边距。
padding-left:左内边距。
外边距(margin)
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
外边距实现盒子居中
- 必须是块级元素。
- 盒子必须指定了宽度(width)
- 然后就给左右的外边距都设置为auto,就可使块级元素水平居中。
文字盒子居中图片和背景区别** - 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改为 auto
- 插入图片 我们用的最多 比如产品展示类
- 背景图片我们一般用于小图标背景 或者 超大背景图片
background-position: center center;
清除元素的默认内外边距
为了更方便地控制网页中的元素,制作网页时,需要清除元素的默认内外边距:
外边距合并
外边距塌陷:
当上下相邻的两个块级元素相遇时,他们之间的垂直间距不是top,bottom的和,而是两者的较大者,相邻块元素的垂直外边距的合并
解决方案:把较大值改成期望的值
嵌套块级元素垂直外边距的合并