一.CSS三大特性
1.继承性
2.层叠性
3.优先级
接前面CSS进阶
3.1优先级
便捷记法:谁作用范围小,谁的优先级就高
如果都是同一种选择器,那就遵循就近原则,靠近谁就使用谁
3.2权重叠加计算
Chrome调试工具
(拓展)查错流程(遇到样式出不来,要学会通过调试工具找错)
注意:如果CSS上一行代码出错,会导致下一行也不生效
pxcook软件的基本使用
png后缀用设计模式
psd后缀就用开发模式
重点.盒子模型
1.1.盒子模型的介绍
两个盒子之间的距离就是外边距
2.1.内容的宽度和高度
3.1.边框(border)- 连写形式
border: 粗细 线条样式 颜色 -- 不分先后顺序,先后写谁都可以
3.2.边框(border)-单方向设置
3.3.边框(border)-单个属性
3.4.盒子实际大小触及计算公式
在浏览器调出检查后发现div尺寸变成了420x420,其原因是因为盒子的最终尺寸是盒子的width / height + 边框线。border是会撑大盒子的
(小案例)盒子边框的小案例
(综合案例)新浪导航
3.5.内边距(padding)
内边距和外边距一样,都会把盒子撑大
padding如果只设置一个数值,那么就是四边内边距都为同一个值
padding 属性可以当做复合属性使用,表示单独设置某个方向的内边距;四值:上 右 下 左 从上顺时针旋转,比如 padding: 10px 20px 40px 80px;
三值:上 左右 下; 两值:上下 左右
不用硬记,多值写法,永远都是从上开始顺时针转一圈,如果数不够,看对面
内边距也可以单独设置一边,格式为padding-top、padding-right、padding-bottom、padding-left。
3.6.盒子实际大小终极计算公式
3.7.优化之前的新浪导航案例
在实际开发中,可能每个超链接的字数不一样,因此就会出现有的字少,空间间距长,而有的字数多久导致溢出链接宽度而换行,因此可以使用padding来使每个链接的左右两边保持同一间距
使用 padding: 0px 16px;
3.8.CSS3盒模型(自动内减)
3.9.外边距
margin: 100px,表示盒子外边距四边为100像素。若是定义单独一边的外边距,有margin-top、
margin-right、margin-bottom、margin-left。
3.10.清除默认内外边距
3.11.版心居中
版心居中就一个重要代码,margin: px px; 左边为上下的位置,右边为上下位置,如果为margin:0 auto则表示版心居中。
需要注意的是,不要与margin: px; 混淆,前者是版心居中,后者是表示外边距。注意!
(案例)网页新闻列表案例
3.11.外边距折叠现象 -- ①合并现象
意思即是如果两个盒子之间都有外边距,就取两者外边距最大的那一个。不会相加
②塌陷现象
设置 overflow: hidden; 最实用
3.12.行内元素内外边距的问题
如果想要通过margin或padding改变行内标签的垂直位置,无法生效,即:行内标签的margin-top 或者margin-bottom不生效;行内标签的padding-top 或者padding-bottom不生效。若想改变行内元素的垂直位置,可以使用line-height。