对于现代浏览器来说,css中指定的width就是content width。
对于IE5.x和6来说,在怪异模式中width等于content、左右padding和左右border。
其中padding
和margin
的4种写法。
1、上 右 下 左
padding:10px 5px 15px 20px;
2、上 右左 下
padding:10px 5px 15px;
3、上下 右左
padding:10px 5px;
4、四边一致
padding:10px;
display
和position
介绍
display
规定元素应该生成的框的类型。值 描述 flex 设置弹性容器 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) none 此元素不会被显示。 list-item 此元素会作为列表显示。
position
: 指定一个元素在文档中的定位方式,top
,right
,bottom
和 left
属性则决定了该元素的最终位置。值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 left 位置添加 20 像素。 static 默认值。没有定位,元素出现在正常的流中 (忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值。
opacity:0
:该元素隐藏起来,但不会改变页面布局,如果该元素绑定了事件会触发。visibility:hidden
:该元素隐藏起来,但不会改变页面布局,不会触发该元素已经绑定的事件。display:node
:把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素删掉。.child{
width: 0;
height: 0;
border-bottom: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
height
,其height
由子元素撑开,对子元素使用了浮动之后,子元素就会脱离文档流。那么父元素中没有内容撑开其高度,这样父元素的height
就会被忽略。
.clearfix: after { // :after选择器向选定的元素之后插入内容
content:""; // 生成内容为空
display: block; // 块级元素显示
clear:both; // 清除前面元素
}
.parent {
text-align: center
}
.parent {
height: 600px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
border: 1px solid green;
width: 300px;
}
.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 300px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px;
}
.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
position: absolute;
width: 300px;
height: 200px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.parent {
border: 1px solid red;
position: relative;
}
.child_left {
width: 100px;
height: 100px;
border: 1px solid gray;
position: absolute;
}
.child_right {
width: 100px;
height: 100px;
border: 1px solid green;
position: absolute;
right: 0;
}
// div在html中必须放在left和right之后
.child_center {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto
}
.parent {
border: 1px solid red;
position: relative;
}
.child_left {
width: 100px;
height: 100px;
border: 1px solid gray;
float: left;
}
.child_right {
width: 100px;
height: 100px;
border: 1px solid green;
float: right;
}
.child_center {
width: 100px;
height: 100px;
border: 1px solid black;
margin: auto
}
vh
和vw
vh
相对于视窗的高度,视窗高度是100vhvw
相对于视窗的宽度,视窗宽度是100vw这里是视窗指的是浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight
大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
@supports (property: value){
element {
property: value;
}
}
// 例
@supports (display: flex){
.flex {
display: flex;
float: none;
}
}