发表于： 2018-05-12 23:32:27
1 548
今天完成的事情：CSS :before 选择器，CSS content 属性，CSS3 box-sizing 属性，::before和::after伪元素的用法，纯css修改下拉列表select的默认样式
明天计划的事情：对界面进行响应式设计
遇到的问题：
1、两个相同大小的盒子嵌套，边框消失
两个宽高相同的盒子嵌套，父元素设置边框，子元素未设置边框，下边框和右边框消失。
问题产生原因：
边框也占一部分宽度，根据html从左到右从上到下的排列原则，父元素的边框被子元素遮住。
解决办法：
1、将子元素设置的比父元素稍小
2、父元素不使用边框，使用边框阴影
box-shadow: 0 0 5px #ccc;
3、将父元素设置为box-sizing ：content-box，使其边框不占宽度
box-sizing 默认值为 content-box，但是我引用了bootstrap，里面box-sizing 的默认值为border-box
收获：
一、::before和::after伪元素的用法，
1、介绍
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
2、content属性
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline（行内元素，行内元素设置width，height属性无效），可以通过设置display:block（块级元素，独占一行,默认情况下，其宽度自动填满其父元素宽度）来改变其显示。
二、自定义单选框input[type="radio"]的样式
对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。
如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。
很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。
思路：
1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；
2. 然后把真正的单选按钮隐藏起来；
3. 最后把生成内容美化一下。
三、纯css修改下拉列表select的默认样式
.select-right {
width: 10rem;
height: 36px;
padding-left: 1.5rem;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-right{
position: relative;
width: 10rem;
height:36px;
border: 1px solid #d7d7d7;
box-sizing: content-box;
background: #ffffff;
}
.form-right::after{
display: inline-block;
position: absolute;
top: 4px;
right: 2px;
content: "";
width: 24px;
height: 28px;
background: url("../img/css10/triangle.png");
pointer-events:none;
}
任务开始时间：2018年5月11日
预计结束时间：2018年5月13日
返回列表
评论