CSS笔记三 盒子模型 PS基本操作

               CSS三大特性

层叠性 继承性 优先级

1层叠性

 

样式冲突：给相同选择器选择了同一样式，遵循就近原则

样式不冲突：不会层叠

 

2继承性

子标签会继承父标签中的某些样式，如文本颜色和色号

可降低CSS样式的复杂性

子元素可以继承父元素的样式，但是并不是所有样式都会被继承

 

行高的继承

font: 12px/1.5 'Microsoft Yahei';

Body行高1.5这样写法最大的优势就是里面的子元素可以根据自己的文字大小自动调整行高

 

3优先级

选择器相同则执行层叠性

选择性不同，则根据选择器权重执行

指定约明确，权重越高

继承的权重是0,如果该元素没有直接选中，无论父元素权重多高，子元素的权重都是0

权重的叠加

如果碰到复合选择器则会有权重叠加，需要计算权重

<style>

        /* 复合选择器会有权重叠加的问题 */

        

        li {

            color: skyblue;

        }

        

        ul li {

            color: purple;

        }

        

        .nav li {

            color: pink;

        }

    </style>

 

 

 

CSS盒子模型

1看透网页布局的本质

网页布局过程

a先准备好相关的网页元素，

b利用CSS设置好盒子样式然后摆放到相应位置

c在盒子里添加内容

网页布局核心：利用CSS摆放盒子

 

 

2盒子模型的组成

盒子模型里面的内容

Css盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距，和实际内容

 

 

边框（border·）

Border可以设置文字的边框，边框有三部分组成 即 粗细 样式 颜色

/* 边框宽度 */

            border-width: 5px;

            /* border-style: solid; 实线边框 dashed;虚线边框 dotted;点线边框*/

            border-style: solid;

            /* 边框颜色 */

            border-color: pink;

边框简写

边框分开写

合并单元格边框：

/* border-collapse: border-collapse;的作用是控制单元格边框 collapse是合并的意思 */

            border-collapse: collapse;

 

边框可影响盒子实际大小

实际宽度=盒子宽度+边框

 

内边距（padding）

/* 复合写法：上左下右 */

            padding: 10px 20px 30px 40px;

当盒子指定大小之后再去设定内边距会撑大盒子

将width和height减去内边距即可解决

如果盒子本身并没有指定width和height属性，则此时padding不会撑开盒子大小

外边距margin（盒子与盒子之间的宽度）

 

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：
盒子必须指定了宽度

盒子左右的外边距都设置成auto

以上方法是让块级元素水平居中

行内元素和行内快元素水平居中只需要给其父元素添加text-aglin:center即可

 

外边距合并

使用margin时定义块元素的垂直边距时，可能会出现外边距的合并

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

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

解决方法

/* 为父元素指定上边框 */

            /* border: solid transparent 1px; transparent清澈的，透明的 */

            /* 为父元素指定内边距 */

            /* padding: 1px; */

            /* 可以为父元素添加overflow: hidden */

            overflow: hidden;

 

清除内外边距

行内元素为了照顾兼容性只要给他设置左右内外边距，不要给他设置上下内外边距

但是转换为块级元素和行内块就可以了

 

PS基本操作