无论是哪种盒子模型,子元素相对于父元素content定位。
改变盒子模型的属性为 box-sizing: border-box/content-box;
。
!important > id > class > tag
important 比 内联优先级高
/*权重为1*/ div{ }
/*权重为10*/ .class1{ }
/*权重为100*/ #id1{ }
/*权重为100+1=101*/ #id1 div{ }
/*权重为10+1=11*/ .class1 div{ }
/*权重为10+10+1=21*/ .class1 .class2 div{ }
属性 | 说明 |
---|---|
block | 像块类型元素一样显示 |
none | 隐藏元素,并且不占位 |
inline-block | 像行内元素一样显示,但其内容象块类型元素一样显示 |
list-item | 像块类型元素一样显示,并添加样式列表标记 |
table | 此元素会作为块级表格来显示 |
inherit | 从父元素继承 display 属性的值 |
新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
圆角 (border-radius:8px)
多列布局 (multi-column layout)
阴影和反射 (Shadow\Reflect)
文字特效 (text-shadow)
文字渲染 (Text-decoration)
线性渐变 (gradient)
旋转 (transform)
增加了旋转,缩放,定位,倾斜,动画,多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
<div id="container">
<div id="box">
元素水平居中
</div>
</div>
<style>
/* 利用transform */
#container {
position: relative;
width: 500px;
height: 500px;
background: #0099cc;
}
#box {
width: 100px;
height: 200px;
border: 2px solid blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 或者利用flex*/
#container {
position: relative;
width: 500px;
height: 500px;
background: #0099cc;
display: flex;
justify-content: center;
align-items: center;
}
#box {
width: 100px;
height: 200px;
border: 2px solid blue;
}
</style>
1em = 16px
)。当改变浏览器设置里的字体大小时,em值也会相应改变。
em会继承父级元素的大小,类似百分比。所以,它的值并不固定。html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
最常用的两种方法如下(应用在父元素上面):
<div id="box" class="clear">
<div id="child">a float box</div>
</div>
<style>
body {
padding: 100px;
}
#box {
border: 2px solid red;
}
#child {
float: left;
width: 100px;
height: 100px;
border: 2px solid green;
}
/*方法一*/
.clear {
overflow: hidden;
}
/*方法二*/
.clear:after {
display: block;
content: '';
clear: both;
}
</style>