一. CSS的三大特性

1. 层叠性：主要解决样式冲突问题。

样式冲突：执行就近原则，也可以看作会覆盖。

2. 继承性：子标签会继承父标签里的某些样式

如文本颜色，字号，跟文字相关的。

行高的继承：行高的写法可以跟单位px也可以不跟单位，若不跟单位，则行高设定的十进制数如1.5，就是当前字体大小的1.5倍。

<style>{body {color: pink;font: 12px/1.5 'Microsoft yahei';}div {font-size: 14px;/*这里实际上显示的为14*1.5=21px*/}/*其他未指定size的都为12*1.5=18px*/}
</style>

3. 优先级

不同的选择器有不同的优先级。

选择器相同执行层叠型，选择性不同根据选择器权重执行。

继承的权重是0！

权重叠加（重点）

复合选择器会有权重叠加的问题。不产生进位。

<style>{ul li {color: green;}/*0,0,0,1 + 0,0,0,1 = 0,0,0,2*/li {color: pink;}/*0,0,0,1*/.nav li {color: red;}/*0,0,1,0 + 0,0,0,1 = 0,0,1,1*/
}
</style>

二. CSS盒子模型

1. 盒子组成

border边框，content内容，padding内边距，margin外边距

2. 边框border

border : border-width | border-style | border-color

边框可以分开写：border-top、bottom、left、right

表格的细线边框：border-collapse

border-collapse: collapse;
/*合并边框，不会有间距*/

边框会影响盒子实际大小，实际大小为盒子大小加上边框大小*2。

3. 内边距padding

同边框，可以写成padding-top，bottom，left，right

padding也会影响盒子大小，实际大小为盒子大小加上内边距大小*2。

案例：导航栏

当盒子内字数不相等时，可以给盒子设定相同的内边距，让字数来撑开盒子。

padding不会撑开盒子的情况

盒子本身没有指定width/height属性

4.外边距：margin

同样的拥有top、bottom、left、right。margin简写方式与padding一致。

可以让块级模型水平居中显示。

（1）必须有宽度

（2）盒子的左右外边距设置为auto，margin: 0 auto

若让行内元素或者行内块元素水平居中，只需要给它们的父元素添加text-aligh: center;

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此处父元素会塌陷较大的外边距值。

解决方案：

（1）为父元素指定上边框

（2）为父元素定义上内边距

（3）可以为父元素添加overflow: hidden

5. 清除内外边距

CSS的第一行代码，清除网页元素的内外边距

* {padding: 0;margin: 0;
}

行内元素尽量只设置左右的内外边距。

CSS 自学笔记（三）相关推荐

nios自学笔记三：nios常用外设C函数整理
该文章为Nios II学习中的外设C函数收集整理笔记,长期更新. 提示:以下是本篇文章正文内容,下面案例可供参考一.PIO读写 1.1 对PIO进行写操作 (1)利用给定的宏定义函数,函数原型如下: ...
致自己：CSS学习笔记三
一.CSS三大特性 1.优先级介绍 1.特性:不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式. 2.优先级公式:继承 < 通配符选择器 < 标签选择器 < ...
CSS自学笔记（16）:CSS3 用户界面
CSS3中,也新增了一些关于用户界面的属性,这些属性可以重设元素或者盒子的尺寸.轮廓等等. 新增的部分属性的浏览器支持情况属性浏览器支持 resize IE Firefox Chrome Safa ...
CSS自学笔记（15）:CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性浏览器支持 column ...
CSS自学笔记（9）:CSS拓展（二）
CSS图片当一个网页上有一张或多张图片,而且这些图片的尺寸比较大时,为了是网页布局更紧凑合理,我们可以将这些图片放到一个图片库里,可以有效的防止图片过大可能会对网页布局造成的不良影响. 通过CSS我 ...
HTML+CSS自学笔记
type= " text/css " rel= "stylesheet" href= "lounge.css" media="sc ...
微信小程序开发自学笔记 —— 三、理解小程序宿主环境
理解小程序宿主环境小程序可以调用宿主环境提供的微信客户端的能力. 渲染层和逻辑层小程序的运行环境分成渲染层和逻辑层,WXML模板和WXSS样式工作在渲染层,JS 脚本工作在逻辑层. 小程序如何把脚 ...
【Spring Data JPA自学笔记三】Spring Data JPA的基础和高级查询方法
文章目录调用接口的基础方法查询 Repository CrudRepository PagingAndSortingRepository JPARepository JpaSpecification ...
中值滤波_Halcon联合C#编程自学笔记三之中值滤波
[前言] 在图像预处理过程中有中值滤波.均值滤波.高斯滤波等,本次主要研究中值滤波.中值滤波是消除图像噪声最常见的手段之一,特别是消除椒盐噪声,中值滤波比均值滤波更好.它的基本原理是计算出数字图像中的 ...

CSS 自学笔记（三）