元素的显示模式
显示元素 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:可选,阴影颜色