持续更新中......
1、列举行内元素与块级元素
块级:div ul li p ol h1-6 table tr td video audio form hr dl dd dt figure
行内:a button span i sub sup select option textarea strong b s mark em big datalist
行内块:img input
2、哪些样式是可以继承的
所有元素可继承的样式:visibility cursor
内联元素可继承的样式:所有字体样式(font-size family style variant weight color line-height white-space text-direction text-transform letter-spacing word-spacing)
块状元素可继承的样式:text-indent text-align
列表元素可继承的样式:list-style list-style-type list-style-image list-style-position
3、不固定宽高元素的水平垂直居中
(1)flex 父级:display:flex; align-items: center; justify-content: center
(2)定位 display:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)
(3)table 父级:display: table; 子级:display: table-cell; vertical: middle; text-align: center
4、两种盒模型区别,怎么兼容
(1)IE盒模型:定义的width=content+padding+border;盒子宽度=定义的width+定义的margin
(2)标准盒模型:定义的width=content;盒子宽度=定义的width+margin+padding+border
使用!DOCTYPE html声明,即可对浏览器进行兼容,解析为W3C盒模型
5、清除浮动的方式
(1)clear:both
(2)overflow:hidden
(3)伪元素 .clearfix:after{ content:''; display: block; height: 0; clear: both; visibility: hidden; }
(4)双伪元素 .clearfix:after,.clearfix:before { content: '' ; display: block} .clearfix:after{ clear: both }
6、媒体查询,宽大于400,高大于800,修改元素样式
@media screen and( min-width: 400 ) and ( min-height: 800 ){ color: red }
7、css绘制三角形
原理:div宽高设置为0,使用border来制作三角形。