前端开发学习笔记-2-CSS基础内容02

CSS基础内容:

元素显示模式:

标签可以分为三类,块级、行内元素和行内块元素。

块级元素：

div， h系列， p， ul， li

特点：

独占一行，

可以设置宽高，默认的宽度是父元素宽度，高度由内容撑开。

行内元素：

a， span， em， strong

一行多个，装满了换行

不能设置宽高，默认由内容撑开。

行内块元素：

input ， button

一行多个，

可以设置宽高。

元素模式转换：

转换为块级元素
display: block;
转换为行内块元素
display: inline-block;
转换为行内元素
display: inline；

CSS三大特性：

继承性：

子元素可以基础父元素的某些样式：

颜色          color: red;       a标签不能继承颜色，需要单独设置
字形          font-style: italic;
字体宽度  font-weight: 700;       h标签有对应默认字体大小 默认加粗
字体大小  font-size: 30px;
字体         font-family: 宋体;
文本缩进  text-indent: 2em;
文本居中  text-align: center;
行高         line-height: 300px;

高度不能被继承。

层叠性：

相同选择器会层叠 就近原则

其中样式冲突会覆盖，不冲突就叠加

优先级：

各个选择器权重不同，高优先级会覆盖低优先级。

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

盒子模型：

 一个完整的盒子有四部分组成：内容(content)， 内边距(padding)，边框(border) ，外边距(margin)。

内容content：

上图模型盒子的蓝色内容区域，实际装东西的地方，宽*高

内边距padding：

绿色区域，内容到边框之间的距离。

设置内边距：padding:上 右 下 左； 由空格隔开，缺少的看对面

单方向设置
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;

边框border：

黄色区域，盒子的边框

boder:1px solid red;    边框粗细 边框样式（虚实等 一般用实线） 边框颜色

也可以单方向设置
border-top:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
border-right:1px solid red;

外边距margin：

盒子模型最外面一层， 盒子边框与外界盒子或浏览器的距离。

设置外边距：margin:上 右 下 左；缺少的看对面

也可以单方向设置

margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;

盒子塌陷：

水平布局的盒子，左右margin值互不影响，实际距离为两者之和。垂直布局则取较大值。

margin塌陷现象：互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷

塌陷解决办法：

1 给父元素设置 padding-top或 border-top

2 给父元素设置 overflow: hidden;

3 把子元素转换为行内块 display: inline-block;

4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象。