发表于： 2019-11-04 20:18:04
1 929
今日完成:
less文件找不到了,从新写了一遍
task10
问题一:
button按钮,设置width:100%失效,设置width:100vw有效
待解决:
问题二:
为input设置的属性样式,是输入后的文本样式;
不是placeholder
占位符的样式
解决:
对input的color更改成其它颜色时，只会对input输入的内容进行赋值颜色，而placeholder还是默认颜色。
可以这样对它控制：
<style>
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
</style>
总结:
语法:input::placeholder{
color:red;
}
针对不同版本和浏览器时会有不同的写法，需要添加相应的后缀
ps:
1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀，且是双冒号，写的时候还要带上input
2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（：），而高版本的使用双冒号（：：）；要点2：火狐浏览器不需要像webkit内核那样要带上input。
3、由于placeholder属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（：），需要带上input
特别强调：冒号与双冒号的问题，还有是否需要加上input
问题三:
输入框的宽度,是直接在input的类中调节
方法一:
直接设置width;100%,
ps:这个100%是父元素的100%,因为弹性元素的自适应,填充剩下宽度,其实是超出的,待思考会不会在某些时候蹦掉
方法二:
设置:flex-grow:1;
占用父元素剩下的宽度
扩展:
outline: none;/*去除输入框的默认样式*/
去除输入文本时显示的样式
如上图:输入时有蓝色边框
标题：
CSS中有哪些方法可以实现垂直居中？
开场语：
大家好，我是IT修真院上海分院第15期的学员赵朋，一枚正直纯洁善良的程序员，今天给大家分享一下，修真院官网Web任务八，深度思考中的知识点——CSS中有哪些方法可以实现垂直居中？
（1）背景介绍：
在前端开发过程中，对页面进行布局时，经常会用到元素的垂直或者水平的居中,这是作为一个前端工程师的基本知识
（2）知识剖析： 几种常用到的垂直居中方法：
行内元素;
单行 - 行内元素
display属性为inline 或者 inline-* 行内元素?（例如：文本或者链接）。
1.用padding来实现垂直居中。
2.用line-height来实现垂直居中。
3.display:block用块级元素的居中
多行 - 行内元素
对于多行行内元素，如果使用单行的方法，在换行之后，会出现错误。
1用表格的vertical-align来实现垂直居中
2.用flexbox来实现垂直居中
3.伪类来实现垂直居中
块级元素
1.相对定位,绝对定位
1.高度知道
demo
2.高度不知道
demo
2.flex布局
3.padding
（3）常见问题：
设置属性无效
(4)解决方案
了解HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种
因为有些垂直居中标签只在某一种元素中生效,所以在设置居中属性之前需要了解,标签到底是行内元素还是块级元素,
所以我把垂直居中分为行内元素和块级元素两部分讲解.
在实际应用中,根据在2中的划分,分门别类,对号入座,并且和可以通过
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
相互转换灵活运用,不过一般根据实际需求还是行内转化为块级居多
（5）编码实战：
demo
（6）拓展思考：
在实现垂直居中的情况下，怎样让元素水平方向也居中？
1.相对定位,绝对定位
1.高度知道
demo
2.高度不知道
demo
2.flex布局
3.padding
(同块级文字)
（7）参考文献：
居中
bfc
html3种元素
(8)问答
遇到问题;
骨骼已经搭好,要想办法怎么填充内容,能让它表达比较流畅了,嘴笨
收获:
更新了一遍自己关于居中应用的认知和原理
明日计划:
填充一下内容,如实际中的应用demo,继续任务14,15
返回列表
评论