盒子模型基础

1.盒子模型的定义

页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际占位，通过F12可以直观的查看到盒子模型

2.基础样式

text-align：行元素水平方向居中

text-decoration：控制下划线（none是没有，underline是有）

line-height：行高

font-size：设置字体大小

font-weight：设置字体粗细

font-family：设置字体样式

letter-spacing：设置中文字体之间的间距

word-spacing：设置英文单词之间的间距

3.边框颜色

border-color:red blue;/*上下 左右*/

border-color:red blue blueviolet;/*red上 blue左右 blueviolet下*/

border-color:red blue blueviolet green;/*上右下左*/

4.边框粗细

        /*border-width: 20px;*/

        border-top-width: 10px;

        border-left-width: 20px;

        border-right-width: 30px;

            border-bottom-width: 40px;

5.边框样式

border-top-style: dashed;/*边框样式为虚线*/

border-bottom-style: double;/*边框样式为双线*/

border-bottom-style: solid;/*边框样式为实线*/

6.外边设置

/*margin: 0px auto;块元素水平居中*/

7.内边设置

padding 内边距

8.背景

用于设置元素的背景样式，包括背景色、背景图、大小等，背景样式的设置前提是元素有大小

background-color设置背景颜色

background-image设置背景图片

background-position设置背景图片的位置

background-size设置背景图片的大小

background-repeat设置背景图片是否重复

background-attachment设置背景图片相对浏览器的定位位置

9.display属性

用于改变元素的生成类型，从而增加元素使用方式

display:none;隐藏元素

display:block;将元素变为块元素

display:inline;将元素变为行元素

display:inline-block;将元素变为行内块元素

/* 使用inlint-block属性后，元素块之间会出现间距，

   方案：将其所在父元素的font-size设为0，具体的元素字体大小再针对性的设置 */

10.visibility属性

控制元素的显示和隐藏

display:none；（display在隐藏元素时，不占据页面位置）

visibility:hidden；（visibility在隐藏元素时，位置仍被占据）

12.去掉列表样式：list-style:none

去掉a标签样式：text-decoration:none

13.浮动

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版

语法：float:left/right

14.清除浮动

语法：clear:left/right/both

15.解决浮动塌陷方案

方式一：给父级设置固定的宽高

/* height:400px; */

方式二：给父级设置 overflow:hidden

方式三：在浮动下方清除浮动

.divclass{clear:both;}(both是左右浮动都清除)

16.定位

绝对定位：不保留原来位置，定位的层腾空了

position:absolute

相对定位：保留原来的位置

position:relative

固定定位：相对浏览器进行绝对定位

position:fixed

17.堆叠排序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

18.圆角效果

控制盒子的四个角的弧度

语法：border-radius

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

border-radius=50%是一个圆

19.透明效果

透明效果的应用比较广泛，特别是在商城网站中的图片+文字描述

背景透明：background-color:rgba(x,x,x,x) 透明度在0~1之间

 rgb代表red,green,blue

整体透明：针对整个元素进行透明，包括该元素的所有子元素

opacity     透明度在0~1之间

20.盒子阴影

对文本添加阴影从而达到视觉效果上的立体感

语法：box-shadow:x,x,x,x,x,x

/* 参数一X轴偏移量 参数二Y轴偏移量 参数三阴影模糊程度

参数四阴影扩展半径 参数五阴影颜色 参数六 inset内阴影 */

21.文本阴影

对文本添加阴影从而达到视觉效果上的立体感

语法：text-shadow