前端入门视频笔记 CSS3（三） P129-164

CCS（三）

 

01~07 CSS的三大特性

（1）层叠性：相同的选择器设置相同的样式，产生了样式冲突，离结构更近的样式（后执行的）会覆盖较远的样式（先执行的）。

 

（2）继承性：子标签会继承父标签的某些样式，如文字属性text-、font-、line- 和color。

        行高可以设置为 line-height = （一个数字如）1.5，意思是行高为当前字体高度的1.5倍，可以根据字体大小自动调整行高，也具有继承性。

 

（3）优先级：当多个选择器指向同一个元素时，若选择器相同，则遵循层叠性；若选择器不同，则按照选择器的权重优先级来执行。

选择器	选择器权重
继承 或 *（通配符）	0,0,0,0 （最低级）
标签选择器	0,0,0,1
类、伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style="..."	1,0,0,0
!important 重要的	无穷大

使用复合选择器时，权重值为多个选择器的权重相加的总和。

（权重虽然可叠加，但是不会进位）

 

 

页面布局的三大核心：盒子模型、浮动和定位

08~22 css盒子模型（Box Model）

将HTML页面上的布局元素看成一个个矩形的盒子，或是承装内容的容器；

盒子模型封装其中的HTML元素，由边框（border）、内边距（padding）、外边距（margin）和实际内容（content）组成。

 

（1）盒子边框（border）

作用	属性	属性值
边框宽度（粗细）	border-width	数字+单位px
边框样式	border-style	solid 实线、dashed 虚线、dotted 点线
边框颜色	border-color	颜色值

边框有复合写法，属性值没有规定顺序，习惯写法为：

                                            border: 粗细 样式 颜色;

 

边框的四条边可以分开来设置，分别使用属性 border-top / bottom / left / right ；

边框会改变盒子的大小：加边框后的盒子大小 = 盒子原本的大小 + 边框的宽度；

在设置表格的边框时，只选择table就只设置表格的外边框，要设置内边框还要在选择器中加入td、th等；

使用属性 border-collapse = collapse; 将单元格相邻的边框合并在一起。

（2）内边距（padding）

属性padding 设置边框与内容的距离，可以对四条边框分开来设置：

                               padding-top / bottom / left / right = 数字px;

也可以用复合写法：

                                       padding = 1~4个值;

一个值代表上下左右的内边距相同；

两个值分别代表上下内边距和左右内边距；

三个值分别代表上内边距、左右内边距和下内边距；

四个值分别代表上、右、下、左的内边距（顺时针方向）。

 

内边距padding也会影响盒子的大小：加内边距后的盒子大小 = 盒子原本的大小 + 内边距的宽度；

即padding会撑开盒子，当盒子中的内容大小不一样时，加内边距padding可以自适应地调整盒子的大小；

但若在增加内边距的同时不想改变盒子大小，就要相应减少盒子的宽度。

 

（3）外边距（margin）

margin属性设置盒子与盒子之间的距离，与padding类似；

可以对四条边框分开来设置：

                               margin-top / bottom / left / right = 数字px;

也可以用复合写法：

                                       margin = 1~4个值;

 

23/24-典型应用——使块级盒子水平居中：

盒子必须指定了宽度的情况下，将左右外边距设置成auto，

                         margin: 0 auto;  ( margin-left = auto; margin-right = auto; )

行内元素或行内块元素的水平居中，则使用 text-align: center; 

 

26-对于两个是嵌套关系（父子）的块元素，父子元素同时有上外边距，父元素会随着子元素的外边距值垂直塌陷；

解决方案：

       为父元素定义上边框，颜色可设置为transport；

       为父元素定义上内边距；

       为父元素添加 overflow: hidden 。

 

27-清除内外边距

很多元素默认带有内外边距，如列表ul等；

可以用通配符选择器，清除所有的内外边距，常作为CSS的第一行代码：

* {
    padding: 0;
    margin: 0;
}

 

为了兼容性，行内元素尽量只设置左右内外边距，不设置上下内外边距；但若转换为块元素或行内块元素就可以设置了。

 

28-PS基本操作

主要是测量、取色、切图操作；

        Ctrl+R（视图-标尺）：打开标尺；

        右击标尺，可以将标尺的单位改为像素；

        按住空格键，鼠标可以拖动图片；

       （矩形）选区工具，左边第二个功能，可以测量像素大小；

         吸管工具，可以取图片中的颜色值。

 

案例：

去掉列表项目<li>前面的项目符号（小圆点）：   list-style: none;

 

9.7/8