目录
CSS的三大特性
层叠性、继承性、优先级
层叠性
就近原则
同一个标签后面的样式会覆盖前面的样式
继承性
子标签会继承父标签的某些样式,如文本颜色、字号
通常先再body里面设置字体样式
行高继承通常写的是倍数如
font: 16px/1.5 'Microsoft yahei'
优先级
一个元素指定了多个选择器,就会有优先级产生
-
如果选择器相同,则执行层叠性
-
选择器不同则根据选择器权重
继承 通配符(*)< 标签 < 类 伪类 < ID < 行内样式(style="")< !important
-
小心继承陷阱
-
链接标签a有默认样式(蓝色 下划线)不会继承body的样式
-
css会有权重叠加的问题,如 ul li{} > li{}
权重的叠加计算
-
同位相加不进位
-
从左边开始比
盒子模型
页面布局三大核心和,盒子模型、浮动、定位。
-
网页布局核心就是利用CSS摆盒子
盒子模型四部分
-
边框(border)
-
三部分:边框宽度(粗细)(border-width 单位是px)、样式(border-style)、颜色(border-color)
-
实线边框: border-style: solid;
-
虚线边框: border-style: dashed;
-
点线边框: border-style: dotted;
-
-
简写:
border: 1px solid red; (顺序可变)
可以分开来写 分为四部分border-top(bottom、left、right)
-
细线边框(合并重叠的相邻边框)
border-collapse: collapse;
-
会影响盒子的实际大小
-
-
外边距(margin)
-
margin-top(bottom、left、right): 5px;
-
margin: 5px;(上下左右都是5px)
-
margin: 5px 10px;(上下5px 左右10px)
-
margin: 5px 10px 20px;(上5px 左右10px 下20px)
-
margin: 5px 10px 20px 30px;(上5px 右10px 下20px 左30px)
-
-
内边距(padding)
-
padding-top(bottom、left、right): 5px;
-
复合写法:(顺时针)
padding: 5px;(上下左右都是5px)
padding: 5px 10px;(上下5px 左右10px)
padding: 5px 10px 20px;(上5px 右左10px 下20px)
padding: 5px 10px 20px 30px;(上5 右10 下20 左30)
-
会影响盒子实际大小,若没有width/height属性,则不会撑开盒子。
-
-
实际内容(content)
外边距典型应用
外边距可以让块级盒子水平居中,但必须满足两个条件:
-
盒子必须制定了宽度(width)
-
盒子左右的外边距都设置为auto
常见三种写法(设置了width之后)
-
margin-left: auto; margin-right: auto;
-
margin: auto;
-
margin: 0 auto;(常用)
行内元素或行内块元素居中对齐只需给其父元素添加text-align: center;即可。
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距合并的问题。
两种情况:
-
相邻块元素垂直外边距合并
-
同位置的外边距以大的为准。如margin-bottom: 100px;和另一个盒子的margin-top: 200px;最后两个盒子的距离是200px。
解决方案:
-
相同位置只设置一个外边距。
-
-
-
嵌套块元素垂直外边距的塌陷
-
子元素的外边距会导致父元素的外边距塌陷,如父元素的margin-top: 50px;子元素的margin-top: 100px;
最后效果相当于父元素的上外边距为100px(取值大的那个外边距)。
解决方案:
-
给父元素加个border(不想要颜色可以将颜色设置为transparent)(会影响盒子大小)
-
给父元素加padding(会影响盒子大小)
-
给父元素加overflow: hidden; ( 常用,不会影响盒子大小 )
-
-
清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
于是,在写css的时候,第一行都写上这样一行代码:
* {
padding: 0; /* 清除内边距*/
margin: 0; /*清除外边距*/
}
另外,行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但转换为块级或行内块元素就可以了。