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;

       

    }

实现效果：

 无论如何滚动鼠标，向下滑动时，红色的小方块始终固定在原来位置不会移动。

注意点：

①元素移动后，原来的位置不会空出来，所以新元素不会占领原来的位置。

②考虑absolute会出现脱离文档流的情况，而relative不会。

效果图：

absolute出现脱离文档流的情况：

效果图：

五、diaplay

1.值

①none：隐藏该元素

②block：将元素转为块级元素

③inline：将元素转为行内元素

④inline-block：将元素转为行内块元素，可以指定宽高并且不换行。（未指定宽高则根据内容撑开）

2.去除元素间空白间隙

【inline-block】 【inline】元素之间会有空白间隙

1.在你的HTML代码里元素间不留任何空白。

2.父元素设置font-size：0。