CSS高级操作
1. 理解盒子模型-布局
box盒子
它是抽象于现实生活中的盒子,将网页中的所有元素看做是一个个的盒子,那么在调整网页中的这些元素布局时,就可以通过调整盒子信息来进行。
盒子模型的组成:
盒子内容 + 盒子的内边距(盒子内容到边框的填充) + 盒子边框 + 盒子外边距
2. 掌握盒子模型的使用
2.1 边框
-
border-style 边框样式
/*border-style: solid;*/ /*border-style: dotted;*/ /*border-style: dashed;*/ border-style: double;
-
border-color 边框颜色
/*border-color: green;*/ /*border-color: #008000;*/ border-color: rgb(255,0,0);
-
border-width 边框粗细
border-width: 1px;
-
上方的样式直接设置多个值可以表示不同的方向
/* 所有的 */ /*border-color: red;*/ /* 上下 左右 */ /*border-color: red green;*/ /* 上 左右 下 */ border-color: red green yellow; /* 顺时针:上右下左 */ /*border-color: red green black pink;*/
上方的边框样式,还可以和我们的CSS方向关键词结合,用于对不同方向的边框进行样式设置。
例如:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- …
另外CSS还给提供了统一的边框设置方式:
/* 可以同时设置颜色、粗细、样式 */
border: 1px solid red;
上方的样式设置如果和方向关键词结合,还可以对某个方向的所有边框样式进行设置。
例如:
- border-top:1px solid red;
- border-bottom:xxx;
2.2 内边距
padding(填充):它可以调整边框到元素内容的距离。
-
padding-top
-
padding-right
-
padding-bottom
-
padding-left
-
padding:它可以统一设置不同方向的距离
/*padding: 50px;*/ /* 上下 左右 */ /*padding: 50px 20px;*/ /* 上 左右 下 */ /*padding: 10px 20px 30px;*/ /* 上右下左 */ padding: 10px 20px 30px 40px;
2.3 外边距
margin:设置元素的外边距,也就是和其他元素之间的距离
- margin-top
- margin-ritght
- margin-bottom
- margin-left
- margin
2.4 盒子尺寸
box-sizing:设置盒子模型尺寸计算规则的。
- content-box(默认值):计算盒子尺寸时,只计算盒子元素内容,不包括内边距和边框。
- border-box:计算盒子尺寸时,不止计算盒子元素内容,还包括内边距和边框。(大小一共就那么大,所以到时候会调整元素内容的空间)
2.5 标准文档流调整-display
默认情况下,在标准文档流中,元素是分为两大类的。
- 块元素:
独占一行
,拥有完整的盒子模型设置 - 行内/内联元素:如果有多个内联,会排在一行,且盒子模型不完整。它的大小主要由内容撑开。
实际上之所以出现这种效果,就是因为dispaly
属性,块元素默认为block
,而内联元素默认为inline
。
如果想将块元素和内联元素进行转换,可以通过此属性。
display:
- none 隐藏
- block 块元素的默认值
- inline 内联元素的默认值
- inline-block 行内块元素 (但是有不可控的间隙)
3. 掌握浮动的使用
**float:**能够实现块元素在一行并列布局展示。
- none 默认值
- left 左浮动
- right 右浮动
4. 掌握解决浮动引起的父级边框塌陷问题
当浮动出现后,会导致:
-
兄弟元素受到浮动影响,导致显示错乱
- 可以通过
clear
清除浮动,解除浮动影响。
- 可以通过
-
如果都浮动了,父级元素会产生边框塌陷
-
利用添加空子元素解决
在父级元素最后添加一个子元素,然后将其清除两侧浮动。
-
和上方一致的思路(推荐):因为上方还需要添加一个空子元素 麻烦
/* 表示在元素最后面设置信息 */ .father:after{ /* 给标签添加内容 */ content: ""; display: block; clear: both; }
-
利用overflow(溢出)特性
当overflow设置的标签没有设置高度时,会自动跟随溢出元素进行高度适应。
-
5. 掌握定位的使用
position:定位
-
static 默认的
-
relative 相对的
设置它,会保留原有的位置,然后通过方向调整可以定位位置,但是它的定位偏移是相对于原来的位置
-
absolute 绝对的
设置它之后,原有位置会消除,但是它默认会保留在原有位置上方,它后面的元素会向上偏移。
使用方向调整,默认情况下会相对于浏览器边框进行偏移,
当然如果它的某一级父元素设置过定位,则会相对于父级元素偏移。
往往它会结合着relative使用
-
fixed 固定的
固定定位