CSS盒模型常用属性,单位,选择器
程序员文章站
2022-03-06 13:48:15
...
盒模型常用属性
- width 宽
- height 高
- border 边框
- padding 边框内填充
- margin 边框外填充
- color 颜色
- background-color 背景颜色
- background-clip:content-box 背景被裁剪到内容框
- box-sizing:border-box 通过收缩内容大小,保证盒子占的大小不变
- overflow 内容溢出控制属性
- box-shadow 内容阴影
- outline: red solid 5px 绘制边框的外围的一个框,不会占据空间
- :hover{cursor:pointer} 鼠标悬停
- opacity:0.8 透明度
- transition:0.3s 鼠标悬停逐渐改变
``
媒体查询(适用于手机端像素大小来切换内容大小)
@media(min-width:480px){
html{
font-size:12px
}
}
/*当宽的像素最小为480px时,就执行里面的样式。*/
CSS像素单位
- 10px(10像素)
- 1em(1*当前font-sizi或者根元素font-sizi大小)
- 1rem(1*根元素font-sizi大小)
- 50vh(始终占当前窗口50%高)
- 50vw(始终占当前窗口50%宽)
CSS常用选择器
-
这个是id类选择器
<style>
.id{
color:red;
}
</style>
<div id="id">
</div>
-
这个是class类选择器
<style>
.class{
color:red;
}
</style>
<div class="class">
</div>
注意权限: id > class > 标签
- 顺序选择器,:not取消选择器(不能空格)
注意:not()选择器只支持火狐、谷歌、苹果safari
<style>
ul > :nth-of-type(2):not(li:nth-of-type(2)) {
color: red;
border: solid 1px;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<p>p</p>
<p>p2</p>
<p>p3</p>
</ul>
:nth-of-type(1n+2)第二开始选择所有,1n+2等于1*0+2=2
:nth-of-type(2)按顺序选择2
:not(li:nth-of-type(2))取消选择
:first-of-type{}选择第一个
:last-of-type{}选择最后一个
:nth-last-of-type(2)倒数选择