CSS那些事儿
相邻选择器 +
/* 代表着从一个div相邻的div,也就是2,3等等 */
div+div{
background-color:black;
}
/* 代表着从一个div相邻的div的响铃的div,也就是3...等等 */
div+div+div{
background-color:black;
}
通过浮动来实现自适应的问题(通过清除浮动的方法)
1.两列自适应结构
.content-box{
margin: 10px 0;
}
/* 如果只通过clear:both的话 那么margin-bottom的话就不会显示 */
.content-box::after{
display: block;
content: '';
//还占原先位置
visibility: hidden;
clear: both;
font-size: 0;
line-height: 0;
}
.left-box{
float: left;
width: 70%;
background-color: lightblue;
}
.right-box{
float: right;
width: 30%;
background-color: blue;
}
2.单列定宽单列自适应结构
- 可以通过清除浮动的方法
- 可以通过绝对定位的方法(问题就是不能够撑大父级)
.content-box{
position:relative;
margin: 10px 0;
background: url('./apic27858.jpg') repeat-y 0 0;
}
/* 如果只通过clear:both的话 那么margin-bottom的话就不会显示 */
.left-box{
float: left;
/* 要加空格 */
width:calc(100% - 200px);
margin-right: 200px;
background-color: lightblue;
color: red;
}
.right-box{
position: absolute;
right: 0px;
top: 0px;
float: right;
width: 200px;
margin-left: -200px;
background-color: blue;
}
3.等高结构
1.可以通过background的方法来实现
background: url('./apic27858.jpg') repeat-y 0 0;
2.可以通过负边距来实现
父级
overflow:hidden
子级
margin-bottom: -9999px;
padding-bottom: 9999px;
4.两列定宽中间自适应结构
(左侧定宽中间和右侧自适应,三列宽度自适应。这两种和两列定宽中间自适应方法类似.)
HTML
<div class="content-box">
<div class="right-box">
<div class="content">2</div>
</div>
<div class="left-box">2</div>
<div class="end-box">2</div>
</div>
CSS
.content-box{
margin: 10px 0;
}
.content-box::after{
display: block;
clear: both;
content: '';
font-size: 0;
line-height: 0;
visibility: hidden;
}
/* 如果只通过clear:both的话 那么margin-bottom的话就不会显示 */
.right-box{
float: left;
width: 100%;
background-color: #ffffff;
}
.right-box .content{
margin: 0 200px 0 200px;
background-color: #000000;
}
.left-box{
float: left;
/* 要加空格 */
width:200px;
margin-left: -100%;
background-color: lightblue;
color: red;
}
.end-box{
float: left;
width: 190px;
margin-left: -190px;
background-color:purple;
}
首字下沉(first-letter)
首行下沉(first-line)
链接操作
LoVe HAte
link visited hover active
input修改边框的简易方法
- 首先先去除input的轮廓
- 最后设置边框就可以