5day-元素的显示模式

元素的显示模式

显示元素 display

display属性规定元素展示的类型。通过该属性可以让元素呈现另一种元素的显示效果

display: none | block | inline | inline-block | list-item | table

• none：此元素不会被渲染
• block：此元素显示为块级元素，该元素前后带有换行符
• inline：此元素会显示为内联元素，前后没有换行符
• inline-block：此元素显示为行内块元素，同时具有行内和块级元素的一些属性
• list-item：此元素会作为列表显示，例如li
• table：此元素会作为块级表格来显示，例如table

行内元素与块级元素的特点

行内元素：

• 不可以直接设置宽高
• 默认宽度有内容撑开，与其他行内元素共处一行
• 上下内外边距会失效，只能设置左右内外边距
  块级元素：
• 默认会占满整行，不能与其他元素共处一行（前后带有换行符）
• 可以直接设置宽高、内外边距

在div中嵌套一张图片会发现在盒子的底部出现了几个像素的空白间隙，我们想要将这个间隙去除可以通过display属性将图片设置为块级元素，或者为其父盒子设置font-size为0，即可消除空白

置换元素与非置换元素

置换元素

例子：浏览器会根据img标签的src属性的值，来读取图片信息并显示出来，但是查看具体的代码时，则不能直接看到图片。

还有例如：input、a、select标签等等。

非置换元素

HTML大多数标签都是非置换元素，他的特点就是：代码书写的内容是什么。页面就渲染什么。

visibility 元素是否可见

visibility: visbel | hidden | collapse

• visbel：默认值，元素是可见的
• hidden：元素不可见,但是位置会被保留
• collapse：在表格中使用可以删除一行或一列，如果在其他元素使用效果则与hidden一致。

opacity 透明度

用于设置元素的透明度

opacity:0~1;

• 0表示完全透明，1表示不透明

盒子模型

什么是盒子模型

所有的HTML元素都可以看作一个盒子，这个盒子包含了：边距、边框、实际内容。
一个完整的盒子模型由width、height构成的内容区、border边框、padding、内边距、margin外边距组成

W3C盒子模型 （标准盒模型）

指的就是上面讲到的由width、height构成的内容区、border边框、padding、内边距、margin外边距组成

标准盒模型的总宽 = width + 左右border + 左右padding + 左右margin
总高 = height + 上下border + 上下的padding + 上下的margin

box-sizing:content-box;

IE盒子模型 （怪异盒模型）

IE盒模型中的width指的是内容、边框、内边距（content+border+pdding）
height指的是内容、边框、内边距

IE盒模型的总宽 = width + 左右外边距
总高 = height + 上下外边距

box-sizing:border-box;

内外边距及边框

外边距

外边距用于定义元素周围的空间。这个空间内没有任何的内容（包括颜色）。也可以理解为当前元素与父级元素或兄弟元素之间的距离。

margin-left：设置左外边距
margin-right：设置右外边距
margin-top：设置上外边距
margin-bottom：设置下外边距
margin: auto | px | %

• %：基于父元素宽度的百分比计算。如果父元素没有宽度，则寻找祖辈元素的宽度，如果都没有设置宽度，则会按照屏幕的宽度来作为参考对象
• px：具体的数值
• auto：浏览器自动计算外边距

复合语法

• 一个值时，表示四边同时设置外边距
• 两个值：第一个值表示上下的外边距。第二个值表示左右的外边距
• 三个值：第一个表示上外边距，第二个表示左右外边距，第三个表示下外边距
• 四个值：表示外边距按照书写顺序设置外边距，分别是：上–右–下–左（从顶部顺时针下来）

margin特殊应用

将元素水平方向的margin设为auto，可以让块级元素在父盒子中水平居中

目前存在两个属性值，代表垂直外边距为0，水平外边距为auto。此时左右外边距的具体值为：（当前所处父元素的宽度 - 当前元素的宽度）/2，再将它平均分到两边。
auto这个属性值做了一件事：将父级元素的剩余空间评分给元素的左右外边距。实现水平居中。

margin纵向重叠问题

在默认情况下，当两个块级元素均设置了纵向外边距时，第一个元素的下外边距会与第二个元素的上外边距发生重叠。
这是因为在最早期的HTML段落中，p标签存在默认的上下外边距，为的是和别的行直接产生一些距离，但多个p元素上下排列，会导致p元素之间的距离变得巨大，出于这样的考虑，浏览器在解析时，设置了纵向的外边距重叠规则。
发生重叠时，以数值更大的margin值为准。

内边距 padding

padding内边距，盒子模信中，边界距离内容区的距离。这个区域会被盒子的背景颜色填充，并且在标准盒模型下设置内边距，会将元素的整体尺寸撑大

padding-left
padding-right
padding-top
padding-bottom
padding:px | %

• 内边距的值与外边距的值类似，都有四个，计算的方式也相同。
• 内边距没有负值，设置负值时相当于padding：0px；

什么情况下该用哪个，没有特定的规范，开发中有句话叫：父子之间用padding，兄弟之间用margin

边框 border

允许设置边框的颜色、样式、宽度

border-color
border-style
border-width

border-left
border-right
border-top
border-bottom

border-left-color
border-left-width
border-left-style

border: 宽度(px) 样式(solid、dashed、double、dotted、groove、ridge、inset、outset ) 颜色

边框粗细 border-width

一般以数字定义，单位为px，当我们设置边框不指定宽度时，默认为3px。

border-width:px | em | rem

• px:固定数值
• em：相对于当前的字体大小
• rem：相对于HTML的根元素字体大小
  不能以%作为单位。

边框的样式 border-style

边框样式的默认值为none，所以他是边框属性中的必填项
取值：

• solid：实线
• double：双线
• dashed：虚线
• dotted：点线
• groove：定义3D沟槽边框
• ridge：定义3D脊边框
• inset：3D嵌入边框
• outset：3D突出边框

边框颜色 border-color

默认为黑色

border-color:颜色英文｜十六进制｜rgb｜rgba ｜ transparent

• transparent:透明色

复合语法

border:border-width border-style border-color

单独定义一边的样式

border-left-width:80px;
border-left-color:green;
border-left-style:solid;

其余三边语法同理。

border-radius

顾名思义，在开发中我们的边框一直都是直角的，有时根据需求需要带点弧度 更加美观，就可以使用border-radius

border-radius:5px 5px 5px 5px;

border-radius可以定义四个属性值：四个值的顺序：左上–右上–右下–左下；

值的单位：px、%、em、rem
%：定义水平半轴，相对于盒模型的宽度，垂直半轴，相对于盒模型的高度。负值无效

当只设置一个值时。表示四个角都应用用样的圆角半径

想要将一个正方形的盒子变成圆形，可以将border-radius的值设置当前元素宽度的一半，或50%。

盒子阴影 box-shadow

box-shadow:h-shadow | v-shadow | blur | spread | color | inset

• h-shadow：水平偏移量。必填项，允许负值，值得单位为px
• v-shadow：垂直偏移量，必填项，允许负值，单位为px
• blur：可选，模糊距离
• spread：可选，阴影的大小
• color：可选，阴影颜色
• inset：可选，将外阴影变为内阴影

文字阴影 text-shadow

text-shadow:h-shadow | v-shadow | blur | color

• h-shadow：水平偏移量。必填项，允许负值，值得单位为px
• v-shadow：垂直偏移量，必填项，允许负值，单位为px
• blur：可选，模糊距离
• color：可选，阴影颜色