发表于： 2019-05-23 23:47:44
1 802
今天完成了什么：
初步完成css模拟下拉框
今天遇到了什么问题：
查了一天资料，初步完成css模拟下拉框，花了很长时间去摸索。很多地方没搞清楚，都是借鉴人家敲出来的，尝试去理解人家的代码，但是为什么这里要设置边框这里要设置边距要定位这里要弹性等等东西。什么时候该用到，怎么去分析他这个布局要用到那些属性，再重新敲一遍暂时还不能敲出来，注释是自己用f12调试出来的，明天继续理解下拉框。
一开始尝试使用select下拉表单来实现，发现下拉列表的文字无法居中，局限性太大。
</select>
}
收获了什么：
经过下拉菜单的学习，了解部分代码的用途：
display：flex。当多个div盒子想要让它们并排一行时，添加这个属性就可以并排显示。
在ul li中，我们用ulli做下拉列表需要在样式前面取消声明列表的属性。
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
box-sizing: border-box;
意思是带有指定宽度和高度的盒子，并把边框和内边距放入盒子中，也就是内外边距都在盒子的宽内，而不是外面。
可以设置下拉列表项中，选项文字都居中。
box-shadow
向 div 元素添加阴影例如图中箭头部分。
box-shadow常用属性有：
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
在设置三角符号按钮的时候需要给 父元素设置为相对定位，子元素用绝对定位 。这样子元素才能对父元素参照物进行定位。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接显示的样式
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
cursor: pointer光标呈现为指示链接的指针（一只手）
currsor指的是定义了鼠标指针放在一个元素边界范围内时所用的光标形状
常用的有以下值：
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
display: block此元素将显示为块级元素，此元素前后会带有换行符。
display常用的属性有以下几个:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
明天计划：
熟悉下拉表单，毕竟这个东西很重要，继续完成任务。
返回列表
评论