CSS继承、盒子模型、float浮动、定位、diaplay

一、CSS继承

1.文字相关的样式会被子元素继承。

2.布局样式相关的不会被子元素继承。（用inherit可以强行继承）

实现效果：

二、盒子模型

每个标签都有一个盒子模型，有内容区、内边距、边框、外边距。

从内到外：content->padding->border->margin。

注：如果没有设置box-sizing属性，一个盒子的最终大小为content+padding+border，也是background-color的区域。

1.content：标签的内容区域，用来盛放别的标签或文本，一般css设置的宽高就是这个区域。

2.padding：内容到边框的距离，一般设置完后，由于padding占位，会撑大盒子模型。

①单参数：指定对应边内边距或者一次性指定所有内边距（单位：px %）。

padding-left

padding-right

padding-top

padding-bottom

padding

②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和对边相同。

padding：上下右左

padding：上右左下

padding：上右下左

3.border：边框样式

①单参数：指定对应边框或一次性指定所有边框。

border-left

border-right

border-top

border-bottom

border-width

②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和对边相同。

border-width：上下右左

border-width：上右左下

border-width：上右下左

③快速写法

border：1px，solid #123456

4.margin：外边距，一般用来调整盒子之间的距离，参数写法与作用同padding。

①单参数：指定对应边框或一次项指定所有边框。

margin

margin-left

margin-right

margin-top

margin-bottom

②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和对边相同。

margin：上下右左

margin：上右左下

margin：上右下左

补充：

1.背景颜色会填充到margin以内的区域

2.内容在content区域

3.box-sizing：可以改变盒子模型的展示形态

content-box（默认值）——width、height，作用于content

border-box——width、height，作用于content padding border，防止padding、border撑大盒子大小。

4.box-shadow：可以设置盒子模型的周边阴影

参数：x轴偏移量 y轴偏移量阴影大小阴影颜色

/* 一个偏右下的红色阴影 */
box-shadow: 10px 20px 10px red;

实现效果：

三、float浮动

1.文档流：文档中可显示对象在排列时所占用的位置。

块级元素：单独一行，自上而下（div、h1、p）

行内元素：从左到右水平分布显示（a、span、strong）

2.float特点：

①脱离文档流，相对于父容器靠左或者靠右排列，如果之前有浮动元素，会挨着排列。

②如果区域出现<img>标签，浮动元素的文本会绕开图片区域，呈现一个【文字围绕图片】的效果

3.参数值：

①none：不浮动，保持原文档流

②left：脱离文档流，居左浮动

③right：脱离文档流，居右浮动

实现效果：

多种浮动效果：

四、定位

分为relative、absolute、fixed。

属性值：top（距离顶部）、bottom（距离底部）、left（距离左边值）、right（距离右边值）

（top和bottom不同时用；left和right不同时用）

在开始布局之前，使用*｛｝把所有标签的margin和padding设置为0，取消屏幕间隔。

没有设置*｛｝时，有间隔

1.相对定位：relative，以自身为参照点移动位置。

<div class="box">

.box{

width: 100px;

height: 100px;

background-color: green;

position: relative;

left: 100px;

top: 100px;

｝

实现效果：

2.绝对定位：absolute，以最近一个带有定位属性的父级元素为参照点来移动位置。

若父级元素没有定位属性，就以body为参照点，默认值为position：relative。

<div class="box">

<div class="box1"></div>

.box{

width: 100px;

height: 100px;

background-color: green;

position: relative;

left: 100px;

top: 100px;

}

.box1{

width: 50px;

height: 50px;

background-color: red;

position: absolute;

top: 50px;

left: 50px;

}

实现效果：

父级元素没有定位属性的实现效果：

3.绝对固定定位：fixed，固定在网页的某一位置，无论怎么滚动网页它都不会移动位置。

<div class="box">

<div class="box1"></div>

</div>

<div class="place"></div>

.box1{

width: 50px;

height: 50px;

background-color: red;

position: fixed;

top: 50px;

left: 50px;

}

.place{

width: 50px;

height: 1000px;

background-color: pink;

}